طراحی وب به طراحی وب سایتهایی که در اینترنت نمایش داده میشوند اشاره دارد و به جنبههای تجربه کاربر در توسعه وب سایت اشاره دارد. تا سال 2010 طراحی وب متمرکز بر طراحی وب سایت برای مرورگرهای دسکتاپ بود و از اواسط سال 2010، طراحی برای مرورگرهای تلفن همراه و تبلتها به طور فزایندهای اهمیت یافته است.
تاریخچه طراحی وب
در سال 1990، تیم برنرزلی اولین مرورگر وب را توسعه داد و آن را WorldWideWeb نامید و بعدها به Nexus تغییر نام داد. در آن زمان، فقط متن در صفحه وب نمایش داده میشد و خبری از فونتهای فانتزی، تصاویر یا فیلمهای زیبا و پیوندهای آبی نبود. در سال 1993 مرورگر موزائیک منتشر شد و اولین مرورگر وب بود که به توسعه دهندگان اجازه میداد تصاویر را به صفحات وب خود اضافه کنند و جهشی بزرگ در دنیای وب ایجاد کرد. به دلیل محدودیتهای مرورگرها و سرعت اتصال فوق العاده کند اینترنت، قابلیت طراحی وب سایت به شدت محدود بود و بارگذاری وب سایتهایی که حاوی تصاویر، فیلمها یا عناصر گرافیکی بیش از حد بودند، خیلی طول میکشید. از اواسط دهه 1990 تا 2000 با ظهور Internet Explorer جنگ بین مرورگرها شروع شد و تقریباً در این زمان، با استفاده از قابها و جداول و همچنین تصاویر، طراحی وب کمی پیچیدهتر شد.
تحول در طراحی وب
استفاده از تصاویر متحرک gif برای ایجاد دکمه در سایتها استفاده شد و استفاده از جاوا اسکریپت در بعضی از وب سایتها ظاهر شد. از سال 1998 ابزارهای توسعه دهنده وب مانند DreamWeaver ظهور پیدا کردند و تعداد بیشتری از کاربران امکان ایجاد و طراحی صفحه وب را پیدا کردند. در سال 2000 استانداردهای طراحی وب مورد تجدید نظر قرار گرفتند و تصاویر شفاف و با کیفیت با فرمت png به عرصه نت راه پیدا کردند و سیستمهای مدیریت محتوا شروع به محبوبیت بین طراحان و کاربران کردند. از سال 2008 تا کنون طراحی وب سایت به طرز باورنکردنی تکامل یافته است. طراحی وب سایت تلفن همراه ارائه شد که به مردم امکان مشاهده درست سایتها روی تلفنهای همراه فراهم شد. بسیاری از وب سایتهای بزرگ نسخههای موبایل سایتهای خود را برای تلفنهای هوشمند و تبلتها طراحی کردند. امروزه طراحی وب سایت یک تجارت بزرگ است. طرحها پیچیدهتر و در عین حال کمتر به هم ریختهاند و طراحان برای رشد در این صنعت باید روز به روز به دانش خود بیفزایند.
یک طراح وب بر چه المانهایی تمرکز میکند؟
یک طراح وب روی ظاهر، چیدمان و در برخی موارد محتوای یک وب سایت کار میکند. به عنوان مثال رنگها، قلمها و تصاویر استفاده شده در وبسایت را تماما طراح انتخاب میکند. همچنین طرح بندی، ساختار بندی و طبقه بندی اطلاعات به طوری که کاربر به آسانی به محتوای سایت دسترسی داشته باشد، از وظایف یک طراح وبسایت به شمار میرود. طراحی وب مناسب باید علاوه بر استفاده آسان، از نظر زیبایی شناسی هم مورد بررسی قرار گیرد.
بسیاری از صفحات وب با تمرکز بر سادگی طراحی شدهاند، به گونهای که هیچ اطلاعات و عملکرد غیر عادی که ممکن است کاربران را منحرف یا سردرگم کند، ظاهر نمیشود. از آنجا که محور اصلی خروجی یک طراح، وب سایتی است که اعتماد مخاطبان هدف را جلب میکند، حذف هرچه بیشتر اطلاعات و المانهای غیر ضروری یک نکته مهم است.
روشهای طراحی وبسایت
با توجه به همه گیر بودن و تنوع دستگاههای تلفن همراه، یک طراح وبسایت باید به تنوع اندازه صفحه نمایشها توجه داشته باشد. از مانیتور غول پیکر شرکتی گرفته تا ساعت هوشمند همگی روشهایی هستند که کاربران با استفاده از آنها به اطلاعات آنلاین دست پیدا میکنند.
دو روش متداول برای طراحی وب سایت، طراحی واکنشگرا (Responsive Web Design) و تطبیقی یا سازگار (adaptive design) است. نمایش محتوای یک وبسایت با حفظ چیدمان، که تا حد ممکن روی دستگاههای مختلف سازگار باشد، برای حفظ اعتماد و تعامل کاربر بسیار مهم است و از وظایف یک طراح این است که تا حد ممکن وبسایت را به گونهای طراحی کند که نمایش محتوای آن در تمام نمایشگرها یکسان باشد.
طراحی واکنشگرا (Responsive Web Design)
اصطلاح Responsive Design برای اولین بار توسط یک طراح وب با نام ایتان ماركوت Ethan Marcotte ارائه شد. یک وب سایت واکنش گرا محتوا را بر اساس فضای موجود در مرورگر نشان میدهد. اگر یک سایت واکنشگرا را روی دسک تاپ باز کنید و سپس اندازه پنجره مرورگر را تغییر دهید، محتوا به صورت پویا حرکت میکند تا محتوای وبسایت برای پنجره مرورگر تنظیم شود. در تلفنهای همراه، این فرایند به صورت خودکار انجام میشود، سایت فضای موجود را بررسی میکند و سپس محتوای خود را با آرایش ایده آل ارائه میدهد. در طراحی واکنش گرا، کاربر همان اندازه که با نگاه کردن به یک دسکتاپ بزرگ به تمام محتوی یک وبسایت دسترسی دارد، میتواند همان فضا را بدون کم شدن محتوا، روی تلفن همراه خود مشاهده کند.
طراحی تطبیقی یا سازگار (adaptive design)
در سال 2011 اصطلاح Adaptive Web Design برای اولین بار توسط یک طراح وب با نام آرون گوستافون Aaron Gustafson ارائه شد. در حالی که طراحی واکنش گرا، الگوی سایت را بر اساس تغییر سایز صفحه نمایش، تغییر میدهد، طراحی تطبیقی، سایز محتوا را بدون تغییر دادن الگوی اولیه سایت، بر اساس اندازه صفحه نمایش تغییر میدهد بنابراین در این طراحی، وقتی مرورگر را روی دسک تاپ باز میکنید، سایت بهترین طرح را برای صفحه دسک تاپ انتخاب میکند؛ تغییر اندازه مرورگر هیچ تاثیری در طراحی ندارد و الگوی اولیه سایت تغییری نمیکند.
کاربر کدام طراحی وب را ترجیح میدهد؟
اکثر وبسایتهای معمولی به دنبال طراحی واکنشگرا هستند. با توجه به اینکه امروزه بسیاری از کاربران مستقیماً از طریق تلفنهای هوشمند و تبلتها به صفحات وب دسترسی پیدا میکنند و صفحه نمایشهای بزرگتر مانند دسکتاپ به اندازه گذشته محبوب نیستند، وجود وب سایتهای واکنشگرا بسیار سودمند است. با این حال، این بدان معنا نیست که طراحیهای سازگار یا تطبیقی به اندازه کافی خوب نیستند. به عنوان مثال، سایتهایی که همیشه تحت بازنگری و به روزرسانی قرار دارند و اطلاعات و عناصر همیشه در حال تغییر هستند، طراحی تطبیقی انتخاب بهتری خواهد بود.
بررسی نقاط مثبت و منفی طراحی واکنشگرا و تطبیقی
نقاط مثبت طراحی واکنشگرا:
- عملکرد یکپارچه با حفظ یکنواختی در تمامی صفحه نمایشها
- تجربه کاربری آسان و بهینه
- مناسب برای سئوی سایت
- طراحی و پیاده سازی آسان
نقاط منفی طراحی واکنشگرا:
- کنترل کمتر بر طراحی برای سازگاری با اندازههای مختلف صفحه نمایش
- احتمال حرکت و جابه جایی عناصر
- احتمال گم شدن آگهیها و بنرها
- مدت زمان طولانی بارگذاری و بارگیری وبسایت
نقاط مثبت طراحی تطبیقی:
- انعطاف پذیری کامل برای بهینه سازی و طراحی صفحات در اندازههای مختلف صفحه نمایش
- بهینه سازی تبلیغات بر اساس دادههای دریافت شده از دستگاه کاربر
- نمایش بهینه سازی شده و مرتب عناصر و محتوا
نقاط منفی طراحی تطبیقی:
- طراحی زمان بر و طولانی
- اگر پیکربندی صفحه به طور خاص برای تلفنها و دسکتاپها باشد، ممکن است نت بوک و تبلتها، سایت را خوب نمایش ندهند.
- ایجاد مشکل برای سئوی سایت و موتورهای جست و جوگر
نتیجه گیری
بزرگترین چالش یک طراح وب ترکیب طراحی، محتوا، تجربه، اطلاعات و اعتبار است. در مورد سؤال Adaptive vs. Responsive باید گفت که برای یک طراح وب بر اساس نیاز، استفاده و تجربه، هر یک از این دو میتوانند یک انتخاب عالی باشند! فقط باید دانست که کدامیک متناسب با کجاست.
