سایت چگونه طراحی می‌شود؟

طراحی سایت چگونه انجام می‌شود؟

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

طراحی سایت و برنامه‌نویسی آن شامل 5 مرحله‌ی کلی است که در ادامه می‌بینیم.

 

1. تعیین هدف

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

 هدف

2. تعیین نیازمندی‌ها

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

 

3. طراحی تجربه کاربری و رابط کاربری

تجربه کاربری (UX) چیست؟ معادل عبارت انگلیسیUser Experience  است و در این‌جا به معنای حسی است که بازدیدکننده‌ی سایت هنگام استفاده از سایت و امکانات آن را دارد.

رابط کاربری (UI) چیست؟ معادل عبارت انگلیسی User Interface است و در این‌جا به مجموعه صفحات، تصاویر، دکمه‌ها، آیکون‌ها و به طور کلی ظاهر و رنگ و لعاب سایت گفته می‌شود.

طراح تجربه‌‌ی کاربری، با توجه به هدف و نیازمندی‌های سایت، باید ببیند کاربر به دنبال چیست و بهترین و سریع‌ترین راه پاسخ‌گویی به نیاز او را پیدا کند.  بعد کار طراح رابط کاربری شروع می‌شود. او باید طرح تجربه‌ی کاربری را با استفاده از نرم‌افزارهایی مثل Adobe XD یا Sketch App به واقعیت تبدیل کند.

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

 تجربه کاربری و رابط کاربری

4. کدنویسی ظاهر سایت (Front end یا کدنویسی سمت کاربر)

در کدنویسی ظاهر سایت، طراح وب، طرح‌های مربوط به صفحات مختلف سایت و متعلقات هر کدام (شامل متون، تصاویر، آیکون‌ها، چیدمان‌ها و ..)، که توسط طراح رابط کاربری خلق شده است، را با استفاده از زبان‌های برنامه‌نویسی سمت کاربر پیاده‌سازی می‌کند. کاربران حاصل تلاش طراح وب را در صفحه‌ی مرورگر خود می‌بینند. بدون کدنویسی ظاهر سایت، طرح رابط کاربری فقط یک عکس خواهد بود (شاید هم یک فایل PDF).

 

5. کدنویسی باطن سایت (Back end یا کدنویسی سمت سرور)

باطن سایت در واقع کدهایی است که به طور مستقیم توسط کاربر مشاهده نمی‌شوند. توضیح بهتر این‌که کاربر اثر و نتیجه‌ی کدهای سمت سرور را می‌بیند و نه اصل آن‌ها را.


یک مثال کلی:

همان دکمه‌ی سبد خرید را در نظر بگیرید. وظایف هر یک از طراحان را توضیح می‌دهیم:

طراح تجربه‌ی کاربری: دکمه کجای سایت قرار داشته باشد و نحوه‌ی دسترسی کاربران به آن چگونه باشد.

طراح رابط کاربری: پس‌زمینه‌ی دکمه چه رنگی باشد، حاشیه‌اش چگونه باشد، رنگ نوشته‌ی آن چه باشد و ... .

کدنویس سمت کاربر (Front end Developer): با استفاده از زبان‌های سمت کاربر، طرح رابط کاربری را پیاده می‌کند تا در مرورگر کاربر قابل مشاهده باشد.

کدنویس سمت سرور (Back end Developer): این‌که پس از کلیک روی دکمه‌ی سبد خرید، طبق طرح تجربه‌ی کاربری، چه اتفاقی افتد را کدنویسی می‌کند.

 

کلام آخر ...

در این مقاله‌ی کوتاه، روال طراحی یک سایت را بررسی کردیم تا شما بتوانید راحت‌تر روی طراحی سایت خود نظارت و کنترل بیشتری داشته باشید. اما طراحی یک سایت خوب به مختصری و سادگی آن‌چه گفتیم نیست!


Powered by Froala Editor

Powered by Froala Editor

Powered by Froala Editor

Powered by Froala Editor

Powered by Froala Editor

Powered by Froala Editor

Powered by Froala Editor

نظرات خود را با ما در میان بگذارید