در زیر محبوب‌ترین و مؤثرترین طرح‌بندی‌های وب‌سایت را که طراحان در سراسر جهان برای ساخت وب‌سایت‌های خود استفاده می‌کنند، خواهید یافت.
۱. چیدمان زیگزاگ
تحقیقات نشان داد که کاربران چگونه محتوای یک صفحه وب را اسکن می‌کنند: چشم‌ها در امتداد صفحه با دنبال کردن یک حرف Z حرکت می‌کنند.
- اول، چشم از چپ به راست حرکت می‌کند
- بعد، چشم به سمت پایین و چپ می‌رود
- در آخر، چشمانشان دوباره به سمت راست حرکت می‌کند
از آنجایی که طرح زیگزاگ به طور پیچیده‌ای با برخی از رفتارهای رایج وب‌گردی مرتبط است، برای طیف گسترده‌ای از وب‌سایت‌ها، در حوزه‌های فعالیت مختلف، قابل اجرا است.
۲. چیدمان F
طرح F شکل از یک رفتار اسکن شناخته شده دیگر پیروی می‌کند، که در آن چشم‌ها در یک صفحه با الگوی حرف F حرکت می‌کنند.
به دلیل ارتباط آن با رفتار شناخته شده کاربر، این طرح برای طیف وسیعی از وب‌سایت‌ها، از وب‌سایت‌های تجارت الکترونیک گرفته تا وب‌سایت‌های نمونه کارها، مناسب است.
برای سفارش طراحی سایت در لاهیجان با خجسته وب تماس بگیرید
۳. عکس تمام صفحه
در این مورد، طرح‌بندی به معنای پخش محتوا بر روی یک عکس/تصویر تمام صفحه است. بنابراین، بخش‌های متنی یا بخش‌های منو برای پشتیبانی از تصویر «زنده» وجود دارند. استفاده از آن برای وب‌سایت‌هایی که می‌خواهند موضوع سایت را فوراً در ذهن بازدیدکننده تثبیت کنند، مناسب است.
۴. طرح‌بندی شبکه‌ای
اطلاعات به صورت شبکه‌ای سازماندهی شده‌اند که مرور آنها را آسان می‌کند و افراد می‌توانند روی موضوعات مورد علاقه خود توقف کنند. طرح‌بندی‌های شبکه‌ای امکان توزیع مساوی متن، عکس و ویدیو را در صفحات وب فراهم می‌کنند و به کاربران اجازه می‌دهند در مورد اهمیت هر واحد تصمیم‌گیری کنند. برای استفاده در روزنامه‌ها، وبلاگ‌های ویدیویی و غیره مناسب است.
۵. طرح‌بندی تک ستونی
این طرح‌بندی، اطلاعات را در یک ستون واحد سازماندهی می‌کند و یکی از ساده‌ترین طرح‌بندی‌ها برای اجرا است. دنبال کردن محتوا (متن، عکس، ویدیو) آسان است و نیاز به مرور اجمالی چیزی بیش از شناسایی نکات کلیدی مورد علاقه در آن ستون واحد نیست. برای استفاده در مقالات تحقیقاتی و مقالات طولانی مناسب است.
همچنین، طرح‌بندی‌های تک ستونی برای تجربه‌های موبایل کاملاً مناسب هستند.
۶. طرح‌بندی تصویر شاخص
یکی از رایج‌ترین طرح‌بندی‌های امروزی، تنظیم یک تصویر شاخص است که نماینده هر صفحه در وب‌سایت باشد. این تصویر برای متمرکز کردن توجه و علاقه به یک نقطه کانونی که بیانگر موضوع صفحه است، عمل می‌کند. همچنین، تصویر به عنوان منبع معنایی است که از این نقطه کانونی ساطع می‌شود. استفاده از آن برای وبلاگ‌های تخصصی، فریلنسرها و متخصصان مناسب است.
۷. طرح‌بندی نامتقارن
طرح نامتقارن با قوانین تقارن بازی می‌کند تا جایی که آنها را به نفع یک وعده منحصر به فرد خم می‌کند: ما چیزهای بیشتری از کمال برای ارائه داریم. ترفند این است که فضای فعال ایجاد کنیم و فضای سفید را زنده‌تر کنیم.
برای استفاده در این دسته از وب‌سایت‌های طراحی وب، برای ارائه‌های غیرمعمول نمونه کارها و وب‌سایت‌های تجاری نوآورانه، مناسب است.
منبع: کیوی
۸. طرح‌بندی صفحه نمایش تقسیم‌شده
این نوع طرح‌بندی هم به تقسیم صفحه عمودی و هم به تقسیم صفحه افقی اشاره دارد. به‌طورکلی، تقسیم صفحه عمودی نقش مهمی در انتقال اهمیت دوگانه به دو یا چند ناحیه مجزا ایفا می‌کند. هدف در اینجا، ایجاد گزینه‌های سریع برای تعامل بهتر با وب‌سایت از همان ابتدا است.
مثال زیر به نوعی متفاوت است، به این صورت که هم تقسیم عمودی و هم تقسیم افقی را در یک صفحه دارد. با نگاه صرف به تقسیم عمودی، نیازی به انتخاب نیست، بلکه هدف آن بهبود یک تجربه از طریق دیگری است.
طرح‌بندی صفحه نمایش دوبخشی برای فروشگاه‌های آنلاین (مثلاً فروش به آقایان و خانم‌ها) یا وب‌سایت‌های خلاقانه‌ای که «سلامتی» را از طریق ارائه‌های وب می‌فروشند (مانند مورد زیر) توصیه می‌شود.
۹. طرح‌بندی گالری تیتر و تصاویر کوچک
در دنیای آنلاین که بیش از پیش بر جنبه‌های بصری تمرکز دارد، این طرح‌بندی می‌تواند معجزه کند. این طرح‌بندی از تصاویر مینیاتوری تشکیل شده که به توضیحات کامل آن موضوعات و تیترها (به‌علاوه ارائه‌های کوتاه) منتهی می‌شوند و به عنوان راهنما در آلبوم تصاویر عمل می‌کنند.
مناسب برای وب‌سایت‌های مسافرتی، وبلاگ‌ها و مجلات.
۱۰. طرح‌بندی ماژولار (همچنین به عنوان طرح‌بندی کارتی / طرح‌بندی بلوکی شناخته می‌شود)
این طرح‌بندی ارتباط نزدیکی با طراحی متریال، پروتکل طراحی راه‌اندازی شده توسط گوگل، دارد. به دلیل انعطاف‌پذیری و واکنش‌گرایی‌اش ، محبوبیت روزافزونی پیدا کرده است . طرح‌بندی ماژولار به این معنی است که هر واحد محتوا (متن، تصاویر، ویدیوها، دکمه‌ها) در یک کارت یا ماژول قرار می‌گیرد و فضای اختصاصی خود را دارد.
هنگام اعمال طرح‌بندی‌های ماژولار در وب‌سایت‌ها، نتیجه، ظاهری ساده و ترکیبی بسیار منسجم از موارد در یک صفحه وب است.
مناسب برای وب‌سایت‌های تجاری، جایی که ارائه‌های واضح و منسجم برای حضور آنلاین حرفه‌ای ضروری هستند.
۱۱. طرح‌بندی مجله
طرح‌بندی مجله، آنطور که امروزه دیده می‌شود، ترکیبی از طرح‌بندی‌های دیگر است که همگی برای بخشیدن جلوه‌ای باشکوه به اخبار به کار می‌روند.
مثال زیر طرح‌بندی تیتر + گالری تصاویر کوچک و طرح‌بندی تصاویر ویژه به علاوه یک طرح‌بندی F شکل را ترکیب می‌کند تا جذابیت مجله را در حد معمول حفظ کند.
چنین ترکیب‌هایی برای مجلات آنلاین خوب هستند، اما محدود به آنها نیستند.
۱۲. طرح‌بندی تک‌صفحه‌ای
اگرچه این طرح‌بندی در بین طرح‌بندی‌های رایج وب‌سایت چندان رایج نیست، اما به دلیل ویژگی‌های نسبتاً جالبش، خواستیم آن را در اینجا فهرست کنیم. این طرح‌بندی چندین عمل را در یک صفحه ترکیب می‌کند (مثلاً Gmail). محتوا با استفاده از جاوا اسکریپت به صورت پویا بارگذاری می‌شود. و طوری ساخته شده است که برای هر دیدگاه، URLهای منحصر به فردی ایجاد می‌کند.
۱۳. طرح‌بندی با تقارن شعاعی
یکی دیگر از انواع طرح‌بندی که کمتر رایج است، تقارن شعاعی است. یک نقطه مرکزی وجود دارد که از آن عناصر مرتبط به صورت شعاعی و به شکل گرد بیرون می‌آیند:
این یک لفاف است
حالا که با طرح‌بندی‌های مختلف وب‌سایت آشنا شدید، وقت آن رسیده که بررسی کنید کدام طرح‌بندی خاص برای وب‌سایت شما مناسب‌تر است. آیا این یک طرح‌بندی چندمنظوره است یا طرحی که برای یک حوزه خاص طراحی شده است؟
برای انجام این کار، باید مخاطبان خود، رفتار، نیازها و انتظارات آنها را بشناسید و پیام مناسبی را بسازید که کاملاً در قالب یک طرح‌بندی قرار گیرد. طرح‌بندی نقش دارد تا پیام را بدرخشاند و برای کاربران آنقدر قانع‌کننده باشد که نتوانند آن را نپذیرند.
بهترین طرح‌بندی‌های وب‌سایت با موفقیت اثبات‌شده