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

سلسله مراتب ظاهری

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

الگو های خواندن

الگو های خواندن رایج‌ ترین روش­ هایی است که کاربران می‌ توانند صفحات را بررسی کنند که این الگو ها به شکل خطوط جهت­ دار (بردار ها، برای علاقه ‌مندان به ریاضی خارج از آن بافت) نمایش داده می­ شوند. از آنجا که تحقیقات نشان می‌ دهد 79٪ از بازدید کنندگان سایت فقط نگاه مختصری به صفحه می ‌اندازند، تسهیل­ مرور صفحه از اهمیت بالایی برخوردار است. طراحی چیدمان وب­ سایت با یک الگوی خاص خواندن در ذهن خود، یکی از روش ­های تأثیر گذار برای انجام این کار است.

تلفیق کردن الگو های خواندن با چیدمان شما شامل قرار دادن عناصر در راستای دید بیننده به شکلی راهبردی است. بیشترین الگو های رایج که باید در نظر گرفته شود الگوی Z (یک بردار زیگزاگی؛ برای چیدمان وب­ سایت دارای تصایر سنگین، مفید است) و الگوی F (یک بردار خط به خط؛ برای چیدمان وب­ سایت دارای متن سنگین، مفید است) هستند.

سیستم‌ های شبکه‌ای

یک سیستم شبکه ‌ای یک چیدمان براساس اندازه‌ گیری ‌ها و دستور العمل‌ های سفت و سخت است. این شبکه از ستون‌ ها (فضا های تعیین شده برای قرار دادن محتوا) و حاشیه­ ها (فضا های خالی بین ستون‌ ها) ساخته شده است.

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

فضای سفید

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

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

روش‌ های کلیدی برای چیدمان مؤثر

انواع چیدمان مرسوم وب ‌سایت

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

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

چیدمان تک ستونی

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

طرح دو ستونه

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

چیدمان چند ستونه

چیدمان چند ستونه اغلب به ‌نام چیدمان روزنامه ‌ای و یا مجله ‌ای مطرح می‌شود. این محتوای سنگین سایت ‌ها را در همان صفحه جا می‌ دهد. استفاده از یک شبکه برای حفظ نظم و سلسله‌ مراتب با دادن فضای ستون بیشتر به مؤلفه­ های مهم ‌تر مانند محتوای بدن امری شایع است، درحالی ‌که عناصر کم اهمیت ‌تر مانند یک منوی جهت ‌یابی، نوار کناری یا آگهی تبلیغاتی فضای کمتری اشغال می ­کنند. این برای صفحات اصلی شرکت، سایت ‌هایی با عکس یا ویدیو سنگین، نشریات آنلاین، داشبورد‌ های کاربر و وب‌ سایت‌ های خرید «وب‌ سایت‌ هایی که محتوا و دسته ‌بندی ‌های زیادی برای هدایت کاربران دارد» مفید است.

چیدمان نامتقارن

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