در بیشتر موارد ، دلیل اصلی پشت هر بازدید، محتوا است. محتوا از اهمیت بالایی برخوردار است و هر طراح می خواهد آن را به مفیدترین و بصری ترین روش در وب سایت خود ارائه دهد. بنابراین جای تعجب نیست که انتخاب طرح بندی برای محتوای شما یکی از اولین کارهایی است که طراحان هنگام شروع یک پروژه جدید انجام می دهند.
بسیاری از طراحان معتقدند طرح وب برای هر سایتی که کار می کنند باید کاملاً منحصر به فرد باشد تا اهداف پروژه را برآورده کند. این اعتقاد می تواند دور از واقعیت باشد. اگر از وب سایت های معروف بازدید کنید، متوجه خواهید شد که بسیاری از آنها از طرح های مشابهی استفاده می کنند. این انتخاب تصادفی یا از روی تنبلی انجام نشده است، زیرا این طرح ها دارای سه مزیت قابل توجه هستند:
اگرچه هر پروژه منحصر به فرد است و نیاز به رویکردی جداگانه دارد، اما آشنایی با طرح بندی های معمول بسیار مفید است. در این مقاله ، نگاهی خواهیم داشت به بهترین طراحی سایت ، که امروز می توانید در سایت های بی شماری پیدا کنید.
طرح های تک ستونی محتوای اصلی را در یک ستون واحد و عمودی ارائه می دهند. این نوع چیدمان شاید ساده ترین نوع از این لیست و برای کاربران راحت تر باشد. در این حالت بازدیدکنندگان برای دیدن مطالب بیشتر به پایین پیمایش می کنند.
با وجود سادگی، طرح بندی های تک ستونی در میان بسیاری از وب سایت ها کاملاً محبوب هستند. انقلاب موبایل نیز تأثیر خود را در محبوبیت این نوع چیدمان گذاشت، چیدمان های تک ستونی کاملاً مناسب صفحه های موبایل هستند.
چه موقع از آن استفاده کنیم
این طرح در بسیاری از وبلاگهای شخصی براساس اصول طراحی حداقلی کاربرد دارد. این یک طرح معمول برای میکروبلاگ ها می باشد.
نکته طراحی
یک صفحه تقسیم شده (یا یک صفحه به دو قسمت تقسیم شده) برای صفحه ای مناسب است که دارای دو محتوای اصلی با اهمیت یکسان باشد. به طراحان این امکان را می دهد تا هر دو مورد را به طور همزمان نمایش دهند در حالی که به آنها یکسان توجه می کنند.
چه موقع از آن استفاده کنیم
طرح های تقسیم صفحه نمایش زمانی مناسب هستند که سایت شما دو متغیر متفاوت در سفر کاربر ایجاد کند، مانند دو نوع دستورالعمل متفاوت که در مثال Dropbox در زیر مشاهده می کنیم.
نکات طراحی
عدم تقارن، عدم تساوی بین دو طرف طرح است. عدم تقارن یکی از روشهای مورد علاقه در دنیای هنر است و اخیراً هنگام ایجاد طرح بندی وب سایت در بین طراحان محبوب شده است. بسیاری از افراد عدم تقارن را با عدم تعادل اشتباه می گیرند اما در حقیقت، هدف عدم تقارن ایجاد تعادل است درصورتی که استفاده از وزن برابر برای دو بخش غیر ممکن باشد یا مطلوب نباشد. استفاده از عدم تقارن ایجاد تنش و پویایی را امکان پذیر می سازد و عدم تقارن با تمرکز توجه کاربر بر روی اشیا منفرد (نقاط کانونی) رفتار اسکن بهتر را تسهیل می کند. با تغییر در عرض، مقیاس و رنگ هر یک از مطالب نامتقارن، طراح بازدید کننده را ترغیب می کند تا از نظر بصری مشغول بماند.
چه موقع از آن استفاده کنیم
وقتی طراحان بخواهند طرح های جالب و غیرمنتظره ای ایجاد کنند، از این نوع طرح بندی وب استفاده می کنند. عدم تقارن با استفاده مناسب ، می تواند فضای فعالی ایجاد کند که چشم را از یک عنصر به عنصر دیگر ، حتی در خالی بودن ، هدایت کند. در نظر بگیرید که چگونه Dropbox به وضوح نقاط تمرکز را در مثال زیر نشان می دهد.
این نوع چیدمان وب سایت برای صفحه فرود بهتر کار می کند تا کاربر از لحظه ای که با صفحه وب شما روبرو می شود مستقیماً درگیر شود. همچنین مناسب وب سایت هایی با کمتر از 25 صفحه می باشد.
نکات طراحی
کارت ها اشیایی عالی برای اطلاعات قابل کلیک هستند و به طراحان این امکان را می دهند که مقدار زیادی از اطلاعات را به صورت قابل درک ارائه دهند. پیش نمایش ها، معمولاً یک تصویر با یک توضیح کوتاه هستند که، به بازدیدکنندگان کمک می کنند تا محتوای مورد علاقه خود را پیدا کرده و با کلیک یا ضربه زدن روی کارت ، به جزئیات آن بپردازند.
مهمترین مورد در شبکه کارتها این موضوع می باشد که تقریباً بی نهایت قابل تغییر هستند. شبکه ها می توانند از نظر اندازه، فاصله و تعداد ستون ها متفاوت باشند و سبک کارت ها نیز بر اساس اندازه صفحه تغییر کند. (کارت ها می توانند برای هر صفحه ای مرتب شوند) به همین دلیل شبکه های کارت با طراحی پاسخگو بسیار خوب کار می کنند.
چه موقع از آن استفاده کنیم
طرح بندی شبکه ای کارت برای سایت های پرمحتوا که بسیاری از موارد را با سلسله مراتب برابر نمایش می دهد، مناسب است.
نکات طراحی
این شاید پیچیده ترین طرح وب سایت باشد که در این مقاله عنوان می شود. همانطور که از نامش پیداست ، این سبک از طرح بندی وب در ابتدا توسط روزنامه ها و مجلات رواج پیدا کرد و در ارائه اطلاعات زیاد، به خوانندگان کمک می نمود. طراحان چاپ برای این منظور از سیستم شبکه استفاده کردند. طرح با استفاده از یک شبکه مدولار ساخته می شد و امکان انعطاف پذیری را با یک طرح چند ستونی از وزن بصری مختلف برای اولویت بندی اطلاعات فراهم می کرد.
مجلات دیجیتال مشابه مجلات کاغذی از یک شبکه چند ستونی استفاده می کنند که به شما امکان می دهد یک سلسله مراتب پیچیده ایجاد و متن و تصاویر را یکپارچه کنید. هدف اصلی یکسان است و بازدید کنندگان باید بتوانند یک صفحه را به سرعت اسکن و درک کنند. طراحان تلاش می کنند تا برای این سبک از چیدمان وب سایت ریتمی بصری ایجاد کنند. آنها سعی دارند اسکن بخشهای صفحه را برای چشم راحت کنند و اجازه دهند که چشم از یک بلوک به بلوک دیگر به طور طبیعی حرکت کند. در همان زمان ، طراح سعی می کند جلوی رقابت بلوک های مختلف را بگیرد.
چه موقع از آن استفاده کنیم
طرح مجله برای انتشاراتی که دارای سلسله مراتب پیچیده با مقادیر زیادی از مطالب در یک صفحه هستند ، انتخاب خوبی است. به احتمال زیاد بدون استفاده موثر از شبکه ، تمام محتوای صفحه اصلی بهم ریخته و کم نظم تر به نظر می رسد.
نکات طراحی
این طرح دارای یک جعبه عرض هدر بزرگ و چند جعبه کوچکتر است که هر کدام بخشی از املاک و مستغلات صفحه بزرگتر را اشغال می کنند. تعداد جعبه های کوچکتر می تواند از دو تا پنج جعبه باشد. هر یک از جعبه ها می تواند پیوندی باشد که به یک صفحه بزرگتر و پیچیده تر منتهی می شود.
چه موقع از آن استفاده کنیم
این طرح کاملاً متنوعی است که می تواند هم برای سایت های مشابه نمونه کارها و هم برای وب سایت های تجارت الکترونیکی یا شرکتی استفاده شود.
نکات طراحی
پیمایش قسمت مهمی از هر وب سایت است، منوی اصلی اولین چیزی می باشد که اکثر کاربران هنگام پیمایش به دنبال آن می گردند. همراه با ناوبری افقی از بالا، می توان گزینه های منو را با قرار دادن در یک نوار کناری ثابت در معرض دید قرار داد. نوار کناری ستونی و عمودی در قسمت چپ یا راست صفحه است. برای این چیدمان وب، نوار کناری ثابت می ماند و در حالی که بقیه صفحه با پیمایش کاربران به پایین تغییر می کند، همیشه قابل مشاهده است. از این طریق پیمایش همچنان در دسترس است.
چه موقع از آن استفاده کنیم
این طرح برای وب سایت هایی که تعداد نسبتاً محدودی از گزینه های پیمایش را دارند، به خوبی کار می کند. ترجیح داده می شود با ورود کاربر به صفحه، همه گزینه ها در معرض دید باشند.
نکات طراحی
طرح بندی وب سایت بر اساس این ایده و استفاده از تصاویر در طراحی، سریعترین راه برای فروش یک محصول است. تصاویر برجسته ارتباط عاطفی با بازدیدکنندگان ایجاد می کنند. یک عکس بزرگ یا جسورانه یا یک تصویر از یک جسم، بیانی قوی ایجاد می کند و اولین برداشت خیره کننده را ایجاد می کند.
چه موقع از آن استفاده کنیم
این چیدمان وب زمانی عالی است که شما نیاز دارید فقط یک محصول یا خدمات را نشان دهید و تمام توجه کاربر را به آن معطوف کنید. با استفاده از این نوع چیدمان می توان یک تجربه احساسی و واقعاً عمیق ایجاد کرد.
نکات طراحی
این نوع طرح بندی وب سایت براساس روش مطالعه محتوای کاربران در وب ایجاد شده است. الگوی F-شکل اسکن ، در ابتدا توسط NNGroup تعریف شده است، معمولا اسکن محتوا از یک الگوی پیروی می کند که به نظر می رسد مانند حرف F یا E چشم در گوشه بالا سمت راست صفحه شروع به اسکن می کند. اسکن به صورت افقی، پس از آن به خط بعدی می رود و همین کار را مرتباً انجام می دهد تا زمانی که چیزی را پیدا کنیم که توجه ما را جلب کند (محتوای جالب). این الگوی اسکن نه تنها برای کاربران دسکتاپ بلکه برای کاربران تلفن همراه نیز مرتبط است.
چه موقع از آن استفاده کنیم
این طرح برای صفحاتی که نیاز به ارائه گزینه های مختلف دارند، مناسب است و به کاربران امکان می دهد تا سریع آنها را اسکن کنند. بازدیدکنندگان به طرح الگوی F بهتر پاسخ می دهند زیرا از الگوی اسکن طبیعی تقلید می کند. و برای یک صفحه اصلی سایت یا سایت خبری حاوی نتایج جستجو مفید است.
نکات طراحی
این چیدمان وب سایت زمانی می تواند مفید باشد که کارمندان شرکت شما در تلاش برای تصمیم گیری بین آنچه از تصاویر برای نشان دادن به مشتریان هستند مردد شوند. تصاویری را به نمایش گذارید که پیام یا احساسی که شرکت می خواهد مشتری هنگام تعامل با محصولات یا خدمات خود احساس کند، به راحتی منتقل نماید.
چه موقع از آن استفاده کنیم
از طرح وب می توان برای تزئین و ارتقا صفحه سایت شرکت استفاده کرد.
نکات طراحی
هنگام طراحی سایت موفق مهم است به یاد داشته باشید که محتوا همیشه پادشاه است. هدف اصلی وب سایت انتشار محتوای قابل درک می باشد. مهم نیست که از چه طرح وب سایتی استفاده کرده اید ، انتخاب موردی که باعث درخشش محتوای شما شود ضروری است.
