چیدمان های برتر وب سایت که هرگز قدیمی نمی شوند چیدمان های برتر وب سایت که هرگز قدیمی نمی شوند

چیدمان های برتر وب سایت که هرگز قدیمی نمی شوند

طراحی سایت زمان مطالعه : ~ 16 دقیقه 19 آبان 1399

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

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

  • آنها قابل استفاده هستند: طرح بندی وب سایت های رایج معمول شده است زیرا آنها ثابت کرده اند که کاربران می توانند با آنها کار کنند.
  • آنها آشنا هستند: با ایجاد حس آشنایی، یک تجربه کاربری خوب در کاربران ایجاد می شود. بازدیدکنندگان وقتی احساس می کنند که سایت ویژگی های آشنایی را که انتظار می رود ارائه می دهند ، احساس لذت بخشی از حضور در سایت می کنند. در نتیجه، افراد به جای تمرکز بر طراحی منحصر به فرد صفحه ، وقت خود را صرف درک مطالب خواهند کرد.
  • صرفه جویی در زمان: استفاده مجدد از طرح های وب موجود باعث صرفه جویی در وقت می شود. طراحان زمان کمتری را برای آزمایش چیدمان می گذارند و بیشتر روی سلسله مراتب بصری و سایر جنبه های طراحی که تأثیر مستقیم بر تجربه کاربر دارند تمرکز خواهند کرد.

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

چیدمان طراحی سایت

1. تک ستون

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

چه موقع از آن استفاده کنیم

این طرح در بسیاری از وبلاگهای شخصی براساس اصول طراحی حداقلی کاربرد دارد. این یک طرح معمول برای میکروبلاگ ها می باشد.

نکته طراحی

  • برای صفحات طولانی منوهای "چسبناک" را در نظر بگیرید.از آنجا که طرح تک ستون اغلب برای صفحات پیمایش طولانی استفاده می شود ، ضروری است که ناوبری همیشه در دسترس باشد. ناوبری به شما کمک می کند تا بازدیدکنندگان به راحتی پیمایش را از بالای صفحه تا انتهای صفحه انجام دهند.

2. تقسیم صفحه

یک صفحه تقسیم شده (یا یک صفحه به دو قسمت تقسیم شده) برای صفحه ای مناسب است که دارای دو محتوای اصلی با اهمیت یکسان باشد. به طراحان این امکان را می دهد تا هر دو مورد را به طور همزمان نمایش دهند در حالی که به آنها یکسان توجه می کنند.

طراحی سایت صفحه تقسیم شده

چه موقع از آن استفاده کنیم

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

طراحی سایت دراپ باکس

نکات طراحی

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

3. طرح نامتقارن

عدم تقارن، عدم تساوی بین دو طرف طرح است. عدم تقارن یکی از روشهای مورد علاقه در دنیای هنر است و اخیراً هنگام ایجاد طرح بندی وب سایت در بین طراحان محبوب شده است. بسیاری از افراد عدم تقارن را با عدم تعادل اشتباه می گیرند اما در حقیقت، هدف عدم تقارن ایجاد تعادل است درصورتی که استفاده از وزن برابر برای دو بخش غیر ممکن باشد یا مطلوب نباشد. استفاده از عدم تقارن ایجاد تنش و پویایی را امکان پذیر می سازد و عدم تقارن با تمرکز توجه کاربر بر روی اشیا منفرد (نقاط کانونی) رفتار اسکن بهتر را تسهیل می کند. با تغییر در عرض، مقیاس و رنگ هر یک از مطالب نامتقارن، طراح بازدید کننده را ترغیب می کند تا از نظر بصری مشغول بماند.

چه موقع از آن استفاده کنیم

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

طراحی سایت صفحات فرود

این نوع چیدمان وب سایت برای صفحه فرود بهتر کار می کند تا کاربر از لحظه ای که با صفحه وب شما روبرو می شود مستقیماً درگیر شود. همچنین مناسب وب سایت هایی با کمتر از 25 صفحه می باشد.

نکات طراحی

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

طراحی نامتقارن

4. شبکه ای از کارت ها

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

مهمترین مورد در شبکه کارتها این موضوع می باشد که تقریباً بی نهایت قابل تغییر هستند. شبکه ها می توانند از نظر اندازه، فاصله و تعداد ستون ها متفاوت باشند و سبک کارت ها نیز بر اساس اندازه صفحه تغییر کند. (کارت ها می توانند برای هر صفحه ای مرتب شوند) به همین دلیل شبکه های کارت با طراحی پاسخگو بسیار خوب کار می کنند.

چه موقع از آن استفاده کنیم

طرح بندی شبکه ای کارت برای سایت های پرمحتوا که بسیاری از موارد را با سلسله مراتب برابر نمایش می دهد، مناسب است.

شبکه ای از کارت ها در طراحی سایت

نکات طراحی

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

5. مجله

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

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

چه موقع از آن استفاده کنیم

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

طراحی سایت مجله

نکات طراحی

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

نکات طراحی

6. جعبه ها

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

چه موقع از آن استفاده کنیم

این طرح کاملاً متنوعی است که می تواند هم برای سایت های مشابه نمونه کارها و هم برای وب سایت های تجارت الکترونیکی یا شرکتی استفاده شود.

نکات طراحی

  • جعبه ها را برای گفتن یک داستان متصل کنید. از جعبه بزرگ می توان برای نمایش محصولات استفاده کرد در حالی که از جعبه های کوچکتر می توان اطلاعات بیشتری در مورد محصول ارائه داد.

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

7. نوار کناری ثابت

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

چه موقع از آن استفاده کنیم

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

نکات طراحی

  • نوارهای جانبی همچنین می توانند حاوی محتوایی غیر از منو یا علاوه بر آن باشند. مانند پیوندهای رسانه های اجتماعی ، اطلاعات تماس یا هر چیز دیگری که می خواهید بازدیدکنندگان به راحتی پیدا کنند.

نوار کناری ثابت در طراحی سایت

8. تصویر ویژه

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

چه موقع از آن استفاده کنیم

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

نکات طراحی

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

استفاده از تصاویر ویژه

9. طرح شکل F

این نوع طرح بندی وب سایت براساس روش مطالعه محتوای کاربران در وب ایجاد شده است. الگوی F-شکل اسکن ، در ابتدا توسط NNGroup تعریف شده است، معمولا اسکن محتوا از یک الگوی پیروی می کند که به نظر می رسد مانند حرف F یا E چشم در گوشه بالا سمت راست صفحه شروع به اسکن می کند. اسکن به صورت افقی، پس از آن به خط بعدی می رود و همین کار را مرتباً انجام می دهد تا زمانی که چیزی را پیدا کنیم که توجه ما را جلب کند (محتوای جالب). این الگوی اسکن نه تنها برای کاربران دسکتاپ بلکه برای کاربران تلفن همراه نیز مرتبط است.

چه موقع از آن استفاده کنیم

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

نکات طراحی

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

طراحی سایت

10. تصویری تنظیم شده

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

چه موقع از آن استفاده کنیم

از طرح وب می توان برای تزئین و ارتقا صفحه سایت شرکت استفاده کرد. 

نکات طراحی

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

تصاویر تنظیم شده

نتیجه

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

صفحات مشابه

ارسال نظر
توجه داشته باشید، درج اطلاعات "ایمیل" ، "وبسایت" و "شماره تماس" اختیاری بوده و به هیچ وجه منتشر نخواهد شد. این اطلاعات صرفا جهت پاسخگویی در موارد نیاز استفاده می شوند.