Composition یا ترکیب، درباره طرح بندی تمام ایده ها و عناصر طراحی در یک قالب کلی صحبت می کند. ایجاد یک ترکیب مناسب تجربه لذت بخشی را برای کاربران، به هنگام گشت و گذار در سایت شما به ارمغان آورده و به ایجاد یک قالب قوی و منسجم هم کمک خواهد کرد. علاوه بر این، پیکربندی صحیح کمک می کند تا کاربران ارتباط بصری بهتری با سایت برقرار کنند. بدون شک ترکیب مهم ترین قسمت فرآیند طراحی است. به خاطر داشته باشید که فرآیند ترکیب جدا از طراحی است. طراحی (design) تصمیم گیری درباره قیافه و کاربرد هر شی ای است که درحال طراحی آن هستیم و معمولا با ایجاد یک طرح دقیق از آن انجام می شود. اما ترکیب (composition) مرحله خلق یا ایجاد آن طرح است. بنابراین، وقتی این دو را در کنار هم قرار می دهیم، در مرحله ترکیب ما مشغول تولید ظاهر و عملکرد طراحی خود هستیم. به عبارت دیگر، ما در ترکیب در حال قرار دادن همه چیز در کنار یکدیگر هستیم. در طراحی چاپی سنتی، تعداد بیشماری ترکیبات و چیدمان های متفاوت و کاربردی وجود دارد. بسیاری از آنها امروزه راه خود را به دنیای وب هم پیدا کرده اند . اگر چه برگردان این لی اوت ها (layout = طرح بندی و ساختار) به شرایط مختص طراحی وب ممکن است کار سختی باشد، اما می تواند حداقل ایده های کوچکی به ما قرض دهد که به مدد آنها بتوان لی اوت های مناسبی را در دنیای وب خلق کنیم. تعداد زیادی ترکیبات مختلف و لی اوت های محبوب وجود دارد، اما در این مقاله قصد داریم درباره تعدادی از متداول ترین آنها صحبت کنیم. منابع آنلاین بسیار زیادی برای جستجو در این باره وجود دارد که توصیه می کنیم به مطالعه آنها بپردازید. اما اکنون، در ادامه مطلب با نردبان همراه باشید. [h=3]Single Visual[/h] مثال مناسبی از این لی اوت در شکل زیر قابل مشاهده است. همانطور که می بینید این لی اوت کاملا ساده است. یک عنصر ساده طراحی وجود دارد که نقش اصلی را در شکل دهی لی اوت و ایجاد تمرکز برعهده دارد. مانند مثال بالا، ممکن است یک عکس بزرگ در بک گراند قرار گرفته و سپس در فضای خالی زیادی که اطراف آن وجود دارد، با استفاده از چند المان ساده، دسترسی به سایر بخشهای سایت فراهم شود. [h=3]Z Layout[/h] در حقیقت به وجود آوردن لی اوت Z، به شدت به چیدمانی که شما برای طراحی عناصر سایت خود انتخاب می کنید وابسته است. این لی اوت از رفتار طبیعی که چشم ممکن است در اسکن کردن یک صفحه وب دنبال کند پیروی می کند. نتیجه تحقیقات نشان داده الگوی این حرکت شبیه حرف Z است. هرچند که برخی آن را شبیه حرف F می دانند. همانطور که در عکس زیر می بینید، چشم از گوشه سمت چپ بالا شروع کرده، به سمت راست می رود ، دوباره به سمت چپ ولی این بار پایین تر برگشته و سپس دوباره سمت راست حرکت می کند. اگر در این اندیشه هستید که عناصر خود را چگونه در صفحه قرار دهید تا با کاربر ارتباط بهتری برقرار کنند، این الگو می تواند به شما کمک کند تا با قرار دادن عناصر مهم خود در این نقاط کلیدی به آنها شانس بیشتری برای دیده شدن بدهید. [h=3]Rule of Thirds[/h] این اصل طراحی که بیشتر در عکاسی و فیلمسازی به کار می رود، یک لی اوت ترکیبی خوب برای طراحی وب نیز هست. قانون سه تایی راهبردی است که پیشنهاد می کند یک عکس بهتر است به نه قسمت مساوی تقسیم شود ( سه سطر و سه ستون) و سپس عناصر آن عکس یا طراحی، در هر یک از این نه قسمت قرار بگیرند. این امر در طراحی وب بسیار می تواند سودمند باشد، چرا که به ما کمک می کند تا نسبت ها و لی اوت های متوازنی در سایت خود داشته باشیم. قانون سه تایی یک ابزار و لی اوت ترکیبی ارزشمند است، چرا که می تواند کمک بزرگی در ایجاد طراحی با تعادل بیشتر باشد. همچنین می تواند در کنار سایر لی اوت ها و ترکیبات بصری مانند single visual و یا حتی زمانی که از سیستم گرید استفاده می کنید به کار رود. [h=3](Golden Ratio (Section[/h] این روش چیدمان به شدت با ریاضیات درگیر است. نسبت طلایی ( که اگر دوست دارید می توانید آن را بخش طلایی هم بنامید) یکی از شناخته شده ترین (حداقل از نظر نام) لی اوت ها یا ابزارهای ترکیبی در هر شکل طراحی است. این روش را به یونانیان تیزهوش عهد باستان نسبت می دهند. نسبت طلایی رابطه میان دو نسبت را توصیف می کند و مقدار آن برابر با (…03398875)1.618 است. به نظر می رسد عناصر بسیاری در طبیعت وجود دارند که از این نسبت پیروی میکنند. به این معنا که همیشه بخشی از هر چیز، با نسبت ذکر شده در مقایسه با کل شی، در نظر چشم ما مطلوب تر و قابل توجه تر است. به دلیل وجود این منطق ساده، می توان آن را در طراحی ها برای ایجاد یک تعادل هماهنگ استفاده کرد . روش ساده استفاده از این متد در طراحی این است که مقدار عددی نسبت طلایی (1.618) را برداشته و مقدار کمی عملیات ریاضی انجام دهیم. همیشه یک فضای مشخص برای طراحی خود در دست داریم. تقسیم کردن این فضا اگر نخواهید درباره نسبتهای آن خیلی فکر کنید، کار چندان سختی نیست -مخصوصا اگر دارید از سیستم گرید استفاده می کنید- اما وقتی که درباره مقدار نسبت طلایی فکر می کنید و آن را وارد عمل می کنید، ممکن است در انتها خروجی بهتری دریافت کنید. پس الان فضایی داریم که قصد داریم با استفاده از مقدار طلایی آن را به دو بخش تقسیم کنیم. برای انجام این کار، عرض فضای در دسترس را اندازه گرفته (اجازه دهید مقدار 950 را برای این مثال انتخاب کنیم) و سپس آن را بر 1.618 تقسیم می کنیم. اگر عرض صفحه ما 950 پیکسل باشد، به این معناست که محاسبه اول ما برای محتوای اصلی صفحه، عرضی برابر با 587.144622991 = 1.618 / 950 پیکسل خواهد داشت که آن را گرد کرده و به 587 تبدیل می کنیم. با این حساب به سادگی می توان عرض نوار کنار صفحه را با کم کردن 587 پیکسل به دست آمده، از عرض اصلی صفحه یعنی 950 پیکسل به دست آورد : 363 = 587 - 950. زمانی که محتوایی داریم که مهم تر است و می خواهیم تمرکز روی آن باشد، مقدار بزرگتر به دست آمده را به آن اختصاص داده و عرض کمتر را برای نوار کناری در نظر می گیریم و به همین راحتی در اینجا ما طراحی خود را به طور کامل با نسبت طلایی به اتمام رسانده ایم. به یاد داشته باشید که در ترکیب بندی همواره به فضاهای خالی هم توجه می شود. به هیچ وجه توصیه نمی شود که محدوده های بزرگ و خالی را در اطراف طراحی خود رها کنید، بلکه همواره باید با فضای خالی که در دست دارید هوشمندانه رفتار کنید. فضاهای سفید را به گونه ای مهار کنید که تمرکز روی محتوای اصلی را افزایش دهند وگرنه ایجاد مقادیر زاید فضای خالی هیچ نفعی ندارد. از padding و فضاهای اضافه به نفع خودتان استفاده کنید. هیچ کس در یک وب سایت به هم ریخته و جایی که عناصر جوری در هم پیچیده شده اند که جایی برای نفس کشیدن نیست، راه خود را پیدا نخواهد کرد. در عوض، ایجاد فضای خالی در مکانهایی که امکان پذیر است برای کاربران تجربه لذت بخش تر و درک بهتری را به همراه خواهد داشت.
