با وجود این که ما در مورد طراحی Layout مایع مانند یا با طول ثابت صحبت کردیم، Navigation ستون سمت چپ در عمل یک فرمت و شکل استاندارد است. سایت ThinkGeek ، که تصویرش را در زیر مشاهده مینمایید، یک مثال کلاسیک از این نوع پیکربندی میباشد.اکثر سایت ها که در این قالب فیکس می شوند لزوما از ستون سمت چپ به عنوان بلوک Naviggation اصلی استفاده نمی کنند-گاهی Navigation را در طول قسمت بالای صفحه مشاهده خواهید کرد-اما باز هم پیکربندی پایین Header را به قسمت های باریکتر ستون سمت چپ و ستون پهن سمت راست تقسیم میکنند.

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

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

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

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

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

کنتراست به معنای کنار هم قرار دادن اجزای گرافیکی ناهمسان است ، و رایج ترین شیوه ای است که برای ایجاد تاکید و تمرکز در Layout استفاده می شود.مفهوم آن بسیار ساده است : ” بزرگترین تفاوت بین اجزای یک گرافیک و محیط  ، به حدی که آن جزء برجسته شود و به چشم بیاید.” کنتراست را میتوان با استفاده از تفاوت رنگ ها ( که در بخش های دیگر توضیح خواهم داد.) اندازه ، و شکل ایجاد کرد.به شکل زیر نگاه کنید :

این سایت Woot هست ، یک وبسایت تجارت الکترونیک که فقط روزی یک جنس به فروش می رساند.وقتی شما به این Layout نگاه می کنید ،  اولین چیزی که توجه شما را به خودش جلب می کند چیست؟ حدس میزنم که احتمالا محصولی باشد که آنها می فروشند. محصولات در Woot روزانه تغییر می کند ، ولی بعد از آن چه چیز چشمان شما را جذب میکند؟ برای من ، دگمه ی “I want one!” . اگرچه همان رنگ در جاهای دیگر طراحی نیز بکار رفته است ، اما شکل بیضی آن جای دیگری بکار نرفته است. وقتی بر روی قسمتی با زمینه ی سفید قرار میگیرد ، دکمه هر دو کار کنتراست و جداسازی را برای تاکید بر آن انجام می دهد. صاحب این سایت از شما میخواهد که بر روی آن کلیک کنید.

نقطه کانونی

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

همانند یکپارچگی ، تعدادی روش آزمایش شده و دقیق برای رسیدن به نقطه کانونی و جذب تمرکز وجود دارد:

همانند یکپارچگی ، تعدادی روش آزمایش شده و دقیق برای رسیدن به نقطه کانونی و جذب تمرکز وجود دارد:

جایگیری (Placement)

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

استمرار (Continuance)

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

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

تجزیه و جداسازی (Isolation)

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

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

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

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

مجاورت (proximity)

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

زمانی که ترکیب ظاهری چینش رندوم رنگ ها را مشاهده کنید ، آن پنج رنگی که به یکدیگر نزدیک هستند به عنوان یک شکل یکپارچه به نظر می رسند.

ما زمانی مفهوم مجاورت را متوجه میشویم که شروع به تنظیم margin و padding برای عناصر سایت کنیم.به عنوان مثال ، وقتی من قوانین CSS را برای اغلب سایت ها مشخص میکنم ، معمولا margin پیش فرض را برای عناصر رایج مثل header ، p ،  Image و … تغییر میدهم.با تغییر دادن این مقادیر میتوانیم فضای بین عناصر را مدیریت کنیم ، و به این صورت گروه هارا ایجاد کنیم.

اگر شما نگاهی به دو ستون از متن های عکس زیر بیاندازید ، متوجه خواهید شد که آنها بسیار شبیه به هم هستند. و تنها تفاوتشان نحوه قرار گرفتن heading ها است.در ستون سمت چپ ، کلمۀ “Unkgnome” فاصله برابری از پاراگراف های بالا و پایین دارد.این باعث می شود که سرتیتر جدا از دو پاراگراف به نظر بیاید و متعلق به هیچ یک نباشد، اما در ستون سمت راست اینگونه نیست.

تکرار (repetition)

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

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

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

بالانس متقارن

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

اگرچه این شیوه ممکن است که برای همه ی طراحی ها مورد استفاده قرار نگیرد ، اما این گونه بالانس کردن میتواند برروی قالب هایی که وسط چین میکنند پیاده سازی شود.سایت The Grow Collective نمونه ای از این گونه بالانس کردن است.

بالانس نامتقارن

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

برخلاف بالانس متقارن ، بالانس نامتقارن بسیار رایج تر است، و همینطور ، در وب بیشتر مورد استفاده قرار میگیرد.اگر نگاهی به سایت های دو ستونه بیاندازید ،متوجه خواهید شد که ستون بزرگتر اغلب در رنگ آمیزی بسیار روشن تر است که تاکتیکی است برای ایجاد کنتراست خوب برای متن و مطلب اصلی.ستون navigation bar اغلب تاریکتر است، دارای border است ، و یا به روش های متفاوتی برجسته است  ، تا بالانس را در داخل قالب به وجود آوریم.

نسخۀ ساده شدۀ نسبت طلایی ، قاعدۀ تقسیم بر 3 کردن(Rule of thirds) است.یا در یک گفتار ساده از یکی از استادان گرافیک من ، یکی که دو برابر اندازۀ بقیه قسمت ها باشد.تقسیم کردن ترکیب به سه قسمت یک راه ساده برای ایجاد نسبت طلایی بدون استفاده از ماشین حساب است.

برای شروع به ایجاد یک نسخۀ دست نویس از layout سایت خود ، یک مستطیل رسم کنید.اندازۀ خط های افقی و عمودی آن واقعا اهمیتی ندارد ، اما سعی کنید که خطوط را مستقیم و زوایا را کاملا 90 درجه رسم کنید.

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

سپس ، سه قسمت بالایی که ایجاد شده را دوباره به سه قسمت تقسیم کنید.درنهایت ، هر یک از ستون های ایجاد شده را به دو قسمت تقسیم کنید.(برای ایجاد شبکه های بیشتر)

با این شبکه بندی ساده ، ما می توانیم شروع به layout کردن عناصر سایت خود بکنیم.بزرگترین مستطیل اصلی نمایش دهنده محتوایی است که ما در قسمت “آناتومی صفحات وب” در رابطه با آن صحبت کردیم.وقتی که از این روش برای طراحی layout استفاده می کنیم،ابتدا بزرگترین بلوک (قسمت) را شناسایی میکنیم.معمولا این بلوک نمایش دهنده متن اصلی است.در شبکه اول “تقسیم به سه کردن”،من بلوک متن را داخل دوتا از سه قسمت پایین گوشۀ راست که به وجود آمده جای می دهم.سپس ، بلوک Navigation را در ستون سمت چپ و قسمت وسطی قرار می دهم.قسمت بعدی از بلوک شناسایی را در قسمت سمت چپ بالایی متن قرار می دهم . وقسمت تصویری شناسایی سایت را بالای menu قرار می دهیم.در نهایت ، قسمت Copyright را در قسمت پایین متن در ستون سمت راست قرار میدهم.

با توجه به تجربه ای که شما در ترکیبات مختلف دارید ، از خطوطی استفاده کنید که سه ستون به عنوان راهنمایی برای منظم کردن شناسه ، Navigation ، محتوا و بلوک Footer تولید کنید.

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

تمایل دیگری که طراحان غیر حرفه ای در layout دارند این است که همه چیز را در صفحه center-align میکند.سیستم شبکه ای ما را از انجام این کار بازمی دارد،اما یک دلیل وجود دارد که ما را به center کردن همه چیز متمایل میکند.آن هم دلیل “میل به تعادل” است.

در مقاله بعدی در رابطه با تعادل صحبت خواهیم کرد.

گل آفتاب گردان يك نمونه از نسبت طلايي در طبيعت است. قطر دايرۀ مركزي گل آفتاب گردان برابر با كل قطر دايرۀ آفتاب گردان شامل گلبرگها تقسيم بر (عدد في) است.