الفبای طراحی سایت
الفبای طراحی سایت شامل مطالبی است که باید درباره این تخصص به‌صورت پایه بدانید. در این بخش، تعاریف اولیه این دانش آمده است.
مراحل طراحی یک وب‌سایت
توسعه یک وب سایت دارای چندین مرحله است. این شامل:
- تجزیه و تحلیل
- طراحی
- پیاده‌سازی
- آزمایش
- ارزیابی
به‌عنوان مثال، یادگار یک توسعه دهنده وب سایت خوداشتغال است. محمد کسب‌وکار لوله‌کشی خود به‌نام آرسام پایپ را اداره می‌کند و از یادگار برای ایجاد یک وب‌سایت برای تجارت خود استفاده کرده است.
تجزیه و تحلیل
یادگار و محمد با هم ملاقات می‌کنند تا تصمیم بگیرند که محمد دقیقاً چه کاری می‌خواهد که وب سایت انجام دهد. آنها سندی به‌نام مشخصات وب سایت ایجاد می‌کنند که الزامات کاربر نهایی و الزامات عملکردی وب سایت را فهرست می‌کند
طراحی
سپس یادگار از تکنیک‌های قاب بندی سیمی برای برنامه ریزی ساختار وب سایت به گونه‌ای استفاده می‌کند که با الزامات عملکردی مطابقت داشته باشد. ساختار وب سایت شامل یک صفحه اصلی با پیوندهایی به صفحات دیگر خواهد بود. هر صفحه احتمالاً جنبه‌ای از تجارت محمد را منعکس می‌کند، به‌عنوان مثال. یک صفحه درباره، یک صفحه تماس، یک صفحه قیمت گذاری و غیره.
علاوه بر این، یادگار با محمد همکاری خواهد کرد تا رابط کاربری (تعامل با وب‌سایت چگونه است) را طوری برنامه‌ریزی کند که وب‌سایت به طور کلی نیازهای کاربر نهایی را برآورده کند.
تکرار: محمد در بررسی طرح مشارکت خواهد داشت و ممکن است بر اساس آنچه می‌بیند تغییراتی را در مرحله طراحی درخواست کند و این می‌تواند به معنای بازگشت به مرحله تحلیل با یادگار باشد. تکرار به معنای “دوباره انجام دادن” است. فرآیند توسعه وب‌سایت تکراری توصیف می‌شود، زیرا ممکن است هر مرحله در نتیجه اطلاعات جدید بازبینی شود.
پیاده‌سازی
پس از تکمیل طراحی، یادگار کد برنامه را برای پیاده‌سازی نیازهای کاربر نهایی و عملکردی وب سایت می‌نویسد. برای شروع، او نمونه‌های اولیه کم وفاداری را برای محمد ایجاد می‌کند تا ببیند. اینها تعاملی خواهند بود – جابجایی‌ها، پیوندها و غیره – اما جزئیات واقعی زیادی را نشان نمی‌دهند. هنگامی که او از ظاهر و رفتار وب سایت راضی بود، یادگار به اجرای طرح ادامه خواهد داد.
آزمایش
یادگار به طور مداوم وب سایت را در حین کار آزمایش می‌کند. هنگامی که او تمام شد، محمد در آزمایش آن شرکت خواهد کرد تا مطمئن شود که همانطور که او مشخص کرده است کار می‌کند. این ممکن است شامل بازگشت به مراحل قبلی و ایجاد تغییرات (تکرار) باشد. پس از تکمیل، یادگار ترتیبی می‌دهد که وب سایت به‌عنوان بخشی از وب جهانی میزبانی شود تا بتوان از طریق اینترنت به آن دسترسی داشت.
ارزیابی
این برای تصمیم گیری در مورد مناسب بودن وب سایت برای هدف است. یعنی: آیا نیازهای کاربر نهایی و عملکردی خود را برآورده می‌کند؟
ساختار وب سایت
یک وب سایت اطلاعات را در صفحات وب سازماندهی می‌کند؛ وب سایت گروهی از صفحات وب است که معمولاً توسط افراد مشابهی در مورد یک موضوع تولید می‌شود.
وب سایت‌ها همیشه یک صفحه اصلی یا فهرست دارند که به صفحات (موضوعات فرعی) در وب سایت پیوند می‌دهد.
هر صفحه وب در شبکه جهانی وب دارای یک آدرس منحصر به فرد است که در نوار آدرس مرورگر نشان داده شده است. این آدرس‌ها یا URLها (Uniform Resource Locators) همچنین می‌توانند ساختار وب سایت را به شما اطلاع دهند.
هنگام طراحی یک وب سایت، ترسیم نقشه‌ای از وب سایتی که نشان می‌دهد چگونه همه صفحات به پیوند و پیوند دارند، مفید است. این را می‌توان با ترسیم ساختار سایت به دست آورد. یک نقشه جزئی از سایت هتل استاروودز ممکن است به شکل زیر باشد:
سپس این ساختار در URL هر صفحه منعکس می‌شود، به‌عنوان مثال، اگر کاربری از صفحه‌ای به‌نام alllist. html بازدید کند، آدرس URL خواهد بود.
ناوبری در یک وب سایت باید یکنواخت باشد تا استفاده از آن آسان باشد. این معمولاً به این معنی است که منوی پیمایش در همان مکان (اغلب در بالای هر صفحه یا پایین سمت چپ) با همان سبک در هر صفحه است. مثلاً:
یک وب سایت ممکن است شامل پیوندهای خارجی باشد – اینها پیوندهایی به وب سایت‌های خارج از دامنه هستند. به‌عنوان مثال، پیوندهای خارجی ممکن است به سایت‌های رسانه‌های اجتماعی مانند فیس بوک یا توییتر باشد
طراحی رابط کاربری
هنگام برنامه‌ریزی اینکه یک صفحه وب چگونه به نظر می‌رسد، ترسیم یک طرح (یک Framework) روی کاغذ یا با استفاده از یکی از ابزارهای نرم‌افزاری موجود، اعم از برنامه کاربردی یا مبتنی بر وب، مفید است که به شما امکان می‌دهد یک طراحی وب‌سایت را قالب بندی کنید. این کار، گام نخست طراحی رابط کاربری (UI) وب‌سایت است.
ابزارهای Wireframing به شما امکان می‌دهند طرح بندی صفحات را طراحی کنید و بسیاری از آنها به شما امکان ایجاد طرح‌های تعاملی را می‌دهند.
فریم‌ورک‌ها با کیفیت پایین مانند آنچه در بالا نشان داده شده است، نسبتاً سریع توسعه می‌یابند و به طراحان در انتقال ایده‌ها کمک می‌کنند. این نوع قاب سیمی بیشتر انتزاعی است زیرا اغلب از تصاویر ساده برای مسدود کردن فضا استفاده می‌کنند (مانند مستطیل‌هایی با ضربدر برای عناصر گرافیکی، مستطیل‌های ساده برای متن و غیره). گاهی اوقات متن لاتین (lorem ipsum) به‌عنوان پرکننده برای محتوا و برچسب‌ها استفاده می‌شود. عناصر تعاملی مانند جابه‌جایی‌ها، منوهای کشویی و پیوندها برای نشان دادن نحوه عملکرد وب سایت گنجانده خواهند شد.
طراحی رابط کاربری موثر
این به معنای توجه قابل توجه به طرح بصری و خوانایی وب سایت است و شامل در نظر گرفتن موارد زیر است:
- لینک‌های ناوبری
- سازگاری در صفحات متعدد
- موقعیت نسبی عمودی رسانه
- فرمت فایل‌های رسانه‌ای که گنجانده شده است
لینک‌های ناوبری
هایپرلینک عنصری در یک سند الکترونیکی است که به مکان دیگری در همان سند یا به یک سند کاملاً متفاوت پیوند دارد. اغلب وب سایت‌ها یک لینک روی لوگوی خود دارند که معمولاً شما را به صفحه اصلی باز می‌گرداند. گنجاندن نقشه سایت و منوی راهنما، یافتن مسیر خود را در وب سایت برای کاربر آسان‌تر می‌کند. پیمایش از طریق هایپرلینک‌های مناسب، نوارهای ناوبری و با گروه بندی هایپرلینک‌ها آسان‌تر می‌شود.
متن هایپرپیوند شده اغلب رنگی می‌شود تا نشان دهد که یک هایپرلینک است. اکثر وب سایت‌ها دارای نوارهای ناوبری هستند که پیوندهایی را به موضوعات فرعی دیگر یا وب سایت‌های دیگر ارائه می‌دهند. علاوه بر این، لینک‌ها را می‌توان به عناصر موجود در صفحه اضافه کرد. این اغلب برای عکس‌هایی استفاده می‌شود که پیوند شما را به صفحه‌ای درباره آن عکس می‌برد.
یک لینک داخلی کاربر را به یک مکان جدید در صفحه فعلی یا یک صفحه در سایت فعلی می‌برد. این اغلب با سیستم‌های منو در بالای صفحه استفاده می‌شود.
یک لینک خارجی کاربر را به یک صفحه وب جدید در یک وب سایت کاملاً متفاوت می‌برد.
سازگاری در چندین صفحه
سازگاری به این معنی است که کاربر می‌یابد عناصر موجود در هر صفحه دارای سبک یکسانی هستند و به طور مشابه در موقعیت قرار می‌گیرند. این در مورد نوارهای ناوبری، رنگ‌ها، فونت‌ها، موقعیت اشیا، هشدارهای صوتی / بصری و غیره صدق می‌کند. طراحی همچنین باید در نظر گرفته شود:
مخاطبان هدف
اگر کاربر نهایی احتمالاً یک کاربر بزرگسال (به جای کودک) و تازه کار (به جای یک متخصص) وب باشد، صفحات وب باید برای استفاده ساده و با پیمایش آسان بین صفحات باشند. برای افزایش قابلیت استفاده وب سایت، هر صفحه باید دارای چیدمان دلپذیر، خوانا و ثابت باشد که در آن طرح‌های رنگی به خوبی انتخاب شده باشد. گنجاندن نقشه سایت و منوی راهنما به کاربر کمک می‌کند تا راه خود را در وب سایت پیدا کند و استفاده از لیست‌های کشویی، دکمه‌های رادیویی و تکمیل خودکار انتخاب را آسان‌تر می‌کند.
دسترسی
به سهولت استفاده برای افراد دارای معلولیت مربوط می‌شود. برای مثال، ممکن است گزینه‌ای برای افزایش اندازه قلم یا انتخاب یک گزینه صوتی برای افراد کم بینا وجود داشته باشد.
تعامل
(مثلاً بازخورد در مورد ورودی‌های کاربر، نقاط مهمی که فعالیت‌ها، نظرسنجی‌ها، آزمون‌ها و…) را ایجاد می‌کند می‌تواند تجربه کاربر را بهبود بخشد.
آنچه در این یادداشت مطالعه کردید، بخش ابتدایی الفبای طراحی سایت بود. در بخش‌های آموزشی دیگر، می‌توانید موارد پیشرفته‌تر مانند سئو را مشاهده کنید.