سمیکالن – روایتگران داستان تکنولوژی

website

آشنایی با روش های ترکیب بندی و چیدمان صفحات وب

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

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

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

چیزی که واضح است این است که طرح بندی ها و ساختارهای بسیار زیادی برای طراحی وب سایت وجود دارد ولی ما در این مقاله به 4 تا از متداول ترین ها میپردازیم.در ادامه ی مطلب با ما همراه باشید.

Single Visual

طراحی سایت

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

Z Layout

چیدمان صفحات وب

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

Rule of Thirds

ترکیب بندی صفحات وب

تکنیک Rule of Thirds معمولا در عکاسی و فیلم برداری مورد استفاده قرار میگیرد.ولی ساختاری بسیار مناسب برای طراحی وب نیز است.این قانون پیشنهاد می کند که یک عکس بهتر است به نه قسمت (سه سطر و سه ستون) تقسیم شود و عناصر تشکیل دهنده ی آن اثر در این نه عکس قرار گیرند.

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

(Golden Ratio (Section

golden-ratio-twitter

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

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