اصول ایجاد یکپارچگی در طراحی وب

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

حتماً شما هم در وب‌گردی‌های خود با وب‌سایت‌های مختلفی مواجه شده‌اید که هرکدام سبک منحصربه‌فرد خود را دارند اما برخی از ویژگی‌ها در تمامی این وب‌سایت‌ها یکسان هستند.

برخی از طراحان به عناصری مثل سربرگ (header)، منو، دکمه‎ها توجه نمی‎کنند. در طراحی این اجزا باید انسجام و یکپارچگی وجود داشته باشد تا دسترسی و استفاده از سایت برای کاربر ساده‌تر باشد.

طراحی بر اساس تجربه کاربری

بسیاری از کاربران انتظار دارند که ویژگی‌های مشخص در تمامی صفحات وب یکسان باشد. به‌عنوان‌مثال صفحات قابلیت پیمایش عمودی، قرارگیری منو در بالای صفحه و….
شکل و نحوه قرار داده تمام این ویژگی‌ها در یک صفحه از سایت بسته به سلیقه طراح متفاوت است ولی در طراحی باید تمامی صفحات سایت با یکدیگر هماهنگی داشته باشند.

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

برای مثال صفحه خانگی وب‌سایت Sketch یکی از صفحاتی است که انسجام در آن به نحو مطلوبی رعایت شده است. این صفحه وب دارای دو CTA (Call to Action) است. یکی برای دانلود دمو و دیگری برای خرید

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

در ابتدا بدانید که هدف بازدیدکننده از مراجعه به وب‌سایت چیست. اگر این هدف مشخص باشد بهتر می‌توانید انسجام در طراحی را همگام با انتظارات کاربر ایجاد نمایید.

یکی دیگر از مواردی که به ایجاد انسجام بیشتر سایت کمک کند، بازطراحی و بهبود مداوم وب‌سایت است. مثلاً وب‌سایت Reddit ازجمله وب‌سایت‌های خبری است که بیش از ۱۰ سال از فعالیت آن می‌گذرد. این وب‌سایت در طول زمان بارها بازطراحی شده، اما نمای کلی و منوهای آن تقریباً از سال ۲۰۰۵ دست نخورده باقی مانده است.

مقاله مرتبط: چرا برخی از زشت ترین سایت ها، هنوز هم پر بازدید هستند؟

قطعاً در هر بازطراحی بهبود تجربه کاربری و به‌روزرسانی ضروری است اما معمولاً ایجاد تغییرات زیاد در بازطراحی صفحات یک وب‌سایت بزرگ خطای بزرگی است که عمدتاً منجر به از دست رفتن تعداد زیادی از کاربران و بازدیدکنندگان وب‌سایت خواهد شد. البته توجه به میزان رضایت کاربران از نوع طراحی وب‌سایت نیز حائز اهمیت است.

منوی وب‌سایت

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

مقاله مرتبط: منوی سایت ؛ افقی یا عمودی

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

منوهای وب‌سایت P’unk Avenue بسیار دقیق و منحصربه‌فرد است. در منوهای این سایت توضیحات جزئی و کاربردی در خصوص محتوای آن صفحه ارائه‌شده است.

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

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

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

تکرار سبک Layout

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

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

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

از این روش می‌توان برای طراحی صفحات نیز استفاده کرد. یکی از وب‌سایت‌هایی که از روش تکرار سبک برای طراحی صفحات استفاده کرده است، وب‌سایت Algolia است.

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

با بررسی بیشتر در وب‌سایت مشاهده می‌شود که استفاده از افکت جعبه‌ای همراه با سایه در سراسر بخش‌های وب‌سایت تکرار شده است. این روش یکی از ساده‌ترین روش‌ها برای نمایش هماهنگی در وب‌سایت است.
در استفاده از این روش زیاده‌روی نکنید!

هماهنگی با برند تجاری

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

مقاله مرتبط: راهنمای سبک (style guide) برای طراحی سایت

وب‌سایت MailChimp  نمونه‌ای از وب‌سایت‌هایی که این روش در آن اجراشده است که در آن از تصویر میمون در بخش‌های مختلف وب‌سایت استفاده‌شده است. منوی وب‌سایت در همه صفحه‌ها ثابت است. از طرفی طراحی، فونت و ظاهر صفحات در هر بخش مشابه است. به عقیده بسیاری از طراحان خبره، این روش برای ایجاد انسجام در یک وب‌سایت بسیار مؤثر است.

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

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

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

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

کلام آخر

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