برای طراحی سایت چه چیزهایی نیاز است؟

معمولا برای طراحی سایت باید تعدادی کار صورت بگیرد تا یک سایت به صورت کامل طراحی و پیاده سازی شود. ما عادت داریم آدرس یک سایت را تایپ کنیم و گوگل آن را برایمان نمایش ‌دهد. ولی چیزی که نمی‌دانیم که در پشت این سایتی که ما می بینیم چه جریانی در حال کار کردن است .از موارد لازم برای سایت سایت که در همان ابتدا به آن برمی خوریم هاست ودامنه است .البته قبل از توضیح هاست و دامنه باید بگوییم که یک وب سایت از چهار بخش کلی تشکیل شده است که این چهار بخش را بایک مثال ساده به شما معرفی می کنیم . فرض کنیم شما قصد راه‌اندازی یک مغازه در گوشه‌ای از شهر را دارید. یک مغازه عالی که قرار است، میلیون‌ها تومان برای شما درآمد داشته باشد. برای کسب درآمد از این مغازه، باید چه قدم‌هایی بردارید؟

• نام مغازه: باید برای مغازه خود یک اسم مناسب و جذاب که در ذهن بماند، انتخاب کنید. در دنیای اینترنت نیز، شما یک اسم برای سایت خود دارید که همان نام دامنه است.
• مکان مغازه: برای فروش محصولات‌تان به یک فضا نیاز دارید. در اینترنت هم، شما به فضایی مشابه برای قرار دادن اطلاعات سایت خود نیاز دارید که هاست نامیده می‌شود.
• دکور مغازه: دکور مغازه اولین چیزی است که نظر مشتری را جلب می‌کند! پس باید محصولات و دکور را طوری بچینید، که در همان نگاه نخست، تحت تاثیر قرار بگیرد و وارد فروشگاه شود. برای ساخت وب سایت هم، شما به یک قالب یا پوسته نیاز دارید که حکم همان دکور را دارد. در طراحی سایت وردپرس به آن قالب گفته می شود.
• مدیریت مغازه: باید کسی را مسئول مدیریت محصولات و خدمات خود کنید، تا همه‌چیز از انبارگردانی گرفته تا ظاهر مغازه را به بهترین نحو کنترل کند. این موضوع در مورد سایت هم وجود دارد. یعنی یک سیستم مدیریتی لازم است تا از طریق آن بتواند بخش‌های مختلف سایت را مدیریت کرد.

1. دامنه ، نام اینترنتی شما : دامنه یک آدرس منحصر به فرد و آسان که به خاطر سپردن آن کار بسیار راحتی است و برای دسترسی به وب‌سایت‌ها استفاده می‌شود. کاربران می توانند با استفاده از نام دامنه به لطف سیستم DNS به وب سایت ها متصل شوند. در توضیح دیگر باید بگوییم که دامنه رشته ای از متن است که به یک آدرس IP عددی نگاشت می شود و برای دسترسی به وب سایت از نرم افزار مشتری استفاده می شود. در زبان انگلیسی ، نام دامنه متنی است که کاربر در پنجره مرورگر تایپ می کند تا به یک وب سایت خاص برسد. به عنوان مثال، نام دامنه Google "google.com” استانتخاب یک نام مناسب برای دامنه درواقع اولین قدم برای ساخت یک وب سایت است که کاربران برای رسیدن به سایت شما بتوانند به راحتی از آن استفاده کنند .البته باید این را در نظر داشت باشید که بابت ثبت و تمدید سالیانه این دامنه هزینه ایی را باید پرداخت کنید. نکته مهم اینجاست که نام دامنه هرچه ساده تر و کوتاه تر بهتر است زیرا به راحتی در ذهن ماندگار می شود.
2. هاست ، فضای مورد استفاده شما : فضایی که در دنیای اینترنت اجاره می‌کنید یعنی یک فضا برای ورود و ذخیره اطلاعات و محتوای سایت‌ شما یا به صورت کامل تر یعنی فضایی که اجازه ذخیره اطلاعات، فایل‌ها و همۀ محتوا را به شما می‌دهد. هاست یک هزینه ماهیانه یا سالیانه برای شما خواهد داشت که این هزینه بر اساس میزان فضا و کیفیت آن محاسبه می‌شود. آیا نمی‌شود به جای خرید هاست از کامپیوتر خودمان استفاده کنیم؟ پاسخ قطعی "خیر" است! وقتی شما هاست می‌خرید، در واقع یک حساب کاربری به شما اختصاص داده می‌شود. با توجه به هزینه‌ای که پرداخت کردید "حجم دیسک و مشخصات خاصی" از یک سرور را اجاره می‌کنید. شاید فکر کنید خب چه کاری است! من از فضای کامپیوتر خودم استفاده می‌کنم و اطلاعات سایتم را وارد سیستم خودم می‌کنم. این کار عملا ممکن نیست. چون سرورها با کامپیوتر شخصی بسیار متفاوتند. کامپیوترهای ما با سخت‌افزارهای ضعیف‌تر و اینترنت محدود کار می‌کنند. اما سروری که هاست میزبانی ارائه می‌دهد بسیار قدرتمند، پر سرعت و با پهنای باند بالا است. به علاوه برای اینکه سایتتان برای بازدیدکننده‌ها همیشه در دسترس باشد، لازم است که آن را 24 ساعته روشن نگه دارید و به محض خاموش شدن سایتتان هم دیگر قابل نمایش نیست!

سرور چیست؟! از نظر فیزیکی سرور یک کامپیوتر یا دستگاه همیشه روشن، و همیشه در دسترس است. سرورها وظیفه دارند محتوای سایت‌ها را در خود نگه دارند، و اطلاعاتی که شما در هر ساعت از شبانه روز در اینترنت جستجو می‌کنید را برایتان نمایش بدهند. تمام شرکت‌ها، ارگان‌ها، و حتی افراد شخصی که نیاز به سایت دارند به "شرکت‌های ارائه دهنده هاست و میزبانی وب" مراجعه می‌کنند. این شرکت‌ها یک سرور میزبان برای شما در نظر می‌گیرند و بخشی از هارد آن را به شما می‌فروشند. از چند سایت تا صد سایت می‌توانند از یک سرور مشترک استفاده کنند، و دیگر نیازی نیست هر کس هزینه خرید و نگهداری یک سرور جداگانه را بپردازد. تعداد سایت‌هایی که بر روی یک سرور قرار می‌گیرد به عواملی مانند قدرت پردازنده، قدرت رم، و میزان فضای سرور بستگی دارد.

1. قالب دکوراسیون سایت شما: یک لازمه دیگر برای ساخت وب سایت، قالب است. قالب یا پوسته، همان طرحی است که مخاطبان شما می‌بینند و با آن تعامل می‌کنند. یک قالب خوب دو ویژگی مهم دارد: اول اینکه کاربردی است و باعث گیج شدن کاربر نمی‌شود؛ دوم اینکه از لحاظ بصری زیباست.دو مدل قالب وجود دارد: قالب آماده ، اختصاصی .قالب های آماده قالب های از پیش طراحی شده ایی هستند که شما می توانید با توجه به نیاز های خود آنها را ویرایش کنید البته در برخی موارد امکان تغییر این قالب ها وجود ندارد.اما قالب های اختصاصی این مشکلات را ندارند و به صورت منحصر به فرد برای شما طراحی می شوند. این قالب نیاز و سلیقه  شما را به طور کامل پوشش می دهد و اصطلاحا با سلیقه شما جور است .نکته حائز اهمیت این قالب ها این است که شما باید برای طراحی این قالب ها هزینه پرداخت می کنید پس اگر مشکلی با هزینه نسبتا بالا ندارید قالب های اختصاصی بهترین گزینه برای سایت شما می باشند.
2. سیستم مدیریت سایت ، برای انکه همه چیز تحت کنترل باشد: بخش مهم هر کاری مدیریت آن است که این مدیریت شامل طراحی سایت نیز می باشد. در مدیریت سایت سیستم این اجازه را به شما می دهد که کنترل کامل همه چیز را در دست خود داشته بشاید.در واقع Bone سیستم شما می باشد..خب این نکته را هم باید اضافه کنیم که سیستم های مختلفی برای ساخت و مدیریت سایت ساخته و معرفی شدند که هر کسی با هزینه مناسب می تواند یک سایت خوب بسازد و به سادگی آن را مدیریت کند. سیستم‌های مدیریت سایت را به دو دستۀ کلی زیر تقسیم می شوند:

• سیستم مدیریت محتوا (CMS Content Management System):
• سایت‌ساز / فروشگاه‌ساز

1. سیستم مدیریت محتوا (CMS) برنامه‌ای است که برای مدیریت محتوا استفاده می‌شود و به چندین مشارکت‌کننده اجازه می‌دهد تا ایجاد، ویرایش و منتشر کنند. محتوای یک CMS معمولاً در یک پایگاه داده ذخیره می شود و در یک لایه ارائه بر اساس مجموعه ای از قالب ها مانند یک وب سایت نمایش داده می شود. ویژگی های رایج CMS به شرح زیر است:

• تولید محتوا، به کاربران اجازه می دهد تا به راحتی محتوا را ایجاد و قالب بندی کنند
• ذخیره سازی محتوا، محتوا را در یک مکان و به شیوه ای ثابت ذخیره می کند
• گردش کار، مجوزهایی را برای مدیریت محتوا بر اساس نقش هایی مانند نویسندگان، ویرایشگران و مدیران اختصاص می دهد.
• انتشار، سازماندهی و انتشار محتوا به صورت زنده

برخی از ارائه دهندگان CMS محبوب‌تر در زیر فهرست شده‌اند:

• دروپال
• جوملا
• مجنتو
• فضای مربعی
• Wix
• فضای مربعی
• وردپرس

1. وب سایت ساز برنامه یا ابزاری است که به شما امکان می دهد بدون نیاز به ویرایش هیچ کدی وب سایت طراحی و ایجاد کنید. شما می توانید هر کاری را که نیاز دارید به تنهایی و بدون نیاز به طراح یا توسعه دهنده انجام دهید. با نرم‌افزار سازنده وب‌سایت drag-and-drop توسعه‌یافته، می‌توانید به سادگی از میان طیف وسیعی از قالب‌ها انتخاب کنید و آنها را مطابق با دیدگاه برند خود سفارشی کنید! سازندگان وب سایت آنلاین به گونه ای طراحی شده اند که استفاده از آنها آسان باشد، هم برای مبتدیان و هم برای طراحان با تجربه تر.

بعد از خرید هاست و دامنه نوبت به طرح اولیه می رسد که بیشتر با نام WireFrame شناخته می شود ، در ادامه به  بررسی WireFrame می پردازیم تا شما به طور کامل با طرح اولیه آشنا شوید.

• وایرفریمینگ چیست؟

Wireframing راهی برای طراحی سرویس وب سایت در سطح ساختاری است. Wireframe معمولاً برای چیدمان محتوا و عملکرد در یک صفحه استفاده می شود که نیازهای کاربر را در نظر می گیرد. وایرفریم ها در مراحل اولیه توسعه برای ایجاد ساختار اولیه صفحه قبل از اضافه شدن طراحی بصری و محتوا استفاده می شوند. Wireframing در طراحی UI ضروری است. هدف وایرفریم ارائه یک درک بصری از یک صفحه در ابتدای پروژه برای دریافت تاییدیه ذینفعان و تیم پروژه قبل از شروع مرحله خلاقانه است.

• طراحی سایت در فتوشاپ

بعد از اینکه WireFrame رو درست کردیم به سراغ طراحی گرافیکی صفحات سایت میرویم. در این مرحله ما نیاز داریم که کل صفحات به صورت گرافیکی در فتوشاپ طراحی شوند. در این بخش ظاهر سایت به صورت گرافیکی طراحی می شود. طراحی سایت با فتوشاپ به دو قسمت کلی تقسیم کنیم این دو قسمت ۱- طراحی رابط کاربری با فتوشاپ و ۲- تبدیل آن به کد است. برای طراحی سایت می‌توان از یک نوت پد ساده هم استفاده کرد اما دلیل اصلی استفاده از فتوشاپ راحتی و امکانات بسیار عالی آن برای طراحی سایت است. ابتدا باید بخش های مختلف سایت را در فتوشاپ طراحی کنید. صفحات مختلفی مثل صفحه اصلی، صفحه وبلاگ، صفحه محصولات، صفحه تماس باما،صفحه ارور و… سپس باید این صفحات تبدیل به کد شوند. این بخش را می‌توانید به یک برنامه نویس فریلنسر واگذار کنید یا توسط پلاگین های فتوشاپ انجام دهید. اولین قدم برای طراحی قالب سایت شناسایی نیاز مشتری و مخاطبش است. عمدتا کارفرما ها این اطلاعات را به شما می‌دهند و برای شما شرح می‌دهند که چه انتظاراتی از ظاهر سایت دارند. سپس باید ایده های اولیه تان را روی کاغد بکشید و به مشتری نشان دهید. نظرات نهایی را اعمال کنید تا روی کاغذ همان چیزی باشد که مشتری می‌خواهد و درنهایت یکی از مهم‌ترین مراحل در زمان طراحی یک وب‌سایت تبدیل فایل‌های PSD به HTML است. زمانی که می‌خواهیم طراحی‌های PSD خود را به صفحه‌های HTML تبدیل کنیم، گزینه‌های متفاوتی پیش روی ما قرار دارند. دانستن این گزینه‌ها قبل از انجام هر کاری بسیار مفید است.

• کدنویسی دستی

این امکان وجود دارد که شما کمی با کدنویسی آشنا باشید و از این رو بخواهید طراحی‌تان را خودتان به کد تبدیل کنید. البته این کار نیازمند برخی مهارت‌های فنی است. اما حتی اگر میانه خوبی با کدنویسی HTML نداشته باشید، باید تلاش کنید برخی تگ‌های ابتدایی این زبان را بشناسید تا بتواند کار تبدیل را به درستی اجرا کنید.

• ابزارهای خودکار تبدیل

برخی ابزارهای خودکار برای تبدیل فایل فتوشاپ به HTML نیز معرفی شده‌اند. با این که این ابزارها کار خود را نسبتاً به خوبی انجام می‌دهند، اما شما نمی‌توانید انتظار یک تبدیل کاملاً دقیق (pixel-perfect) را از آن‌ها داشته باشید. اگر کیفیت کار چندان اهمیتی ندارد، می‌توانید از این ابزارها کمک بگیرید.

• برنامه نویسی سایت

در مرحله بعدی از طراحی سایت نیاز داریم به کسی که به برنامه نویسی سایت مسلط باشد و بتواند نیاز های سایت را از طریق برنامه نویسی تامین کند برای برنامه نویسی سایت زبان های مختلفی مختفی وجود دارد از جملهPHP,JAVA. و ... .شخص برنامه نویس باید به یکی زبان به صورت کامل مسلط باشد تا بتواند پشت صحنه(Backend ) سایت را برنامه نویسی کند

• کانفیگ کردن بر روی هاست خریداری شده

بعد از اینکه سایت آماده شد باید آن را روی هاست یا سرور ببریم و کانفیگ کنیم.

• گذاشتن محتوا در سایت

بعد از اینکه سایت  را بر روی هاست قرار دادیم باید محتوی مروط به هر بخش را نیز قرار دهیم و تمام بخش های سایت را تست کینم که نتیجه این تست ها برای ما درست کار کردن یا کارنکردن سایت را در بر دارد، در واقع این تست ها به ما نشان میدهد که سایت ما درست ساخته ،کانفیگ و... شده است یا نه .

• تست و آزمایش سایت

در مرحله آخر باید شروع به تست و آزمایش تمام بخش های سایت کنیم و چند روزی رو به این کار اختصاص دهیم تا ببینیم کل بخش ها به درستی کار می کنند یا نه، پیشنهاد میکنم تمام بخش مورد بررسی قرار گیرد.

طرح اولیه WireFrame

طراحی سایت در فتوشاپ

تبدیل psd به Html و Css

برنامه نویسی سایت

کانفیگ کردن روی هاست یا سرور

گذاشتن محتوا در سایت

تست و آزمایش سایت

1– بررسی امکانات

اولین چیزی که برای طراحی سایت نیاز است بررسی امکاناتی است که میخواهیم در سایت باشد. قبل از طراحی و کد نویسی باید ببینیم در سایت چه چیزهایی باید باشد و بر اساس آن طرح اولیه یا همون WireFrame رو درست کنیم. پس اولین کار در طراحی سایت همین بررسی امکانات سایت است.

2– طرح اولیه WireFrame

بعد از اینکه امکانات سایت رو مورد بررسی قرار دادیم و توجه شدیم چه چیزهایی نیاز است کار دوم کشیدن طرح اولیه روی برگه است که معمولا بهش WireFrame می گویند. شما باید مشخص کنید که هر جعبه یا المانی در کجای سایت قرار میگیرد. در یک Wireframe نباید نهایت گرافیک را به کار برد! با یک قلم و کاغذ معمولی ویا با نرم افزار Point ویندوز هم می توان Wireframe را ایجاد کرد. این کار باعث می شود تا به قول خودمان دست طراح را برای زدن طرح بیشتر باز کنیم.

3– طراحی سایت در فتوشاپ

بعد از اینکه WireFrame رو درست کردیم به سراغ طراحی گرافیکی صفحات سایت میرویم. در این مرحله ما نیاز داریم که کل صفحات به صورت گرافیکی در فتوشاپ طراحی شوند. در این بخش ظاهر سایت به صورت گرافیکی طراحی می شود.

تبدیل psd به Html و Css

4– تبدیل psd به Html و Css

در این بخش ما نیازمند طراحی psd یا همون فایل گرافیکی سایت به کدهای html و css هستیم. یک کدنویس وب باید این صفحات گرافیکی رو تبدیل به صفحات وب کند.

5– برنامه نویسی سایت

در گام بعدی برای جواب دادن به سوال برای طراحی سایت چه چیزهایی نیاز است نیاز به یک برنامه نویسی وب داریم. کسی که به یک زبان برنامه نویسی مثل asp.net یا php مسلط باشد و بخش پشت صحنه سایت رو برنامه نویسی کند. اگر در مورد پشت صحنه یا بک اند چیزی نمیدونید پیشنهاد میکنم مقاله فرانت اند و بک اند در طراحی سایت رو مطالعه کنید.

6– کانفیگ کردن روی هاست یا سرور

بعد از اینکه سایت آماده شد باید آن را روی هاست یا سرور ببریم و کانفیگ کنیم. اگر در مورد هاست چیزی نمیدونید پیشنهاد می کنم مقاله هاست یا سرویس میزبانی چیست؟ رو مطالعه کنید در این مقاله به صورت کامل در مورد هاست صحبت کرده ایم.

7– گذاشتن محتوا در سایت

بعد از اینکه سایت روی هاست قرار گرفت باید محتوایی رو داخل آن قرار دهیم تا بتوان تمام بخش های آن را تست و آزمایش کرد و کامل متوجه شد که کل بخش های آن به درستی کار می کنند.

8– تست و آزمایش سایت

در مرحله آخر باید شروع به تست و آزمایش تمام بخش های سایت کنیم و چند روزی رو به این کار اختصاص دهیم تا ببینیم کل بخش ها به درستی کار می کنند یا نه، پیشنهاد میکنم تمام بخش مورد بررسی قرار گیرد.