لرن بلاگ

تصویر بنر مقاله لی اوت در طراحی وب

لی اوت در طراحی وب – با صفحه بندی سایت آشنا شوید

مقدمه

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

صفحه بندی سایت چیست؟

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

المان‌های اصلی لی اوت در طراحی وب

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

هدر وب‌سایت

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

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

منوی سایت2navigation menu

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

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

محتوای سایت عنصر مهم لی اوت در طراحی وب

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

فوتر وب‌سایت از عناصر اصلی لی اوت در طراحی وب

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

برای درک بهتر شما خوانندگان و پاسخ بهتر به پرسش «صفحه بندی سایت چیست؟» در ادامه به برخی نکاتی که در انتخاب و طراحی لی‌اوت خود باید در نظر بگیرید، اشاره می‌کنیم.

چگونه صفحه‌بندی سایت را درست انجام دهیم؟

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

عناصر را واضح و ساده معرفی کنید

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

توجه به جذب مخاطب

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

رعایت اصول طراحی سایت

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

انواع صفحه بندی سایت چیست؟

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

لی‌اوت تک ستونه

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

لی اوت در طراحی وب: تک ستونه

صفحه‌بندی چندبخشی

به غیر از لی‌اوت تک‌ستونه، یکی دیگر از انواع صفحه‌بندی سایت، لی‌اوت چندبخشی است. در اصطلاح انگلیسی آن را Split-screen می‌نامند. به زبان ساده در این نوع صفحه‌بندی، صفحه وب‌سایت به صورت افقی یا عمودی به چند بخش تقسیم می گردد و المان‌های وب‌سایت در آن بخش‌ها قرار می گیرند. یکی از رایج‌ترین حالت‌ها در این نوع صفحه‌بندی آن است که برخلاف حالت تک‌ستونه، شما از دو ستون یا بیشتر در طراحی صفحه خود سود ببرید. اگر چنین طراحی به درستی صورت بگیرد، می‌تواند باعث جذاب‌تر شدن سایت و بهبود تجربه کاربری3user experience گردد. نمونه‌ای از چنین طراحی را در تصویر زیر مشاهده می‌کنید:

صفحه بندی سایت چیست؟ طراحی چندستونه

صفحه‌بندی نامتقارن

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

جمع‌بندی

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

پاورقی:

  • 1
    clear navigation
  • 2
    navigation menu
  • 3
    user experience

دیدگاهتان را بنویسید

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