گرید در طراحی وب سایت

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

گرید چیست؟

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

مفهوم اصطلاحات

واحد

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

شیار یا Gutter

به فضای خالی کمی که بین واحدها وجود داره شیار گفته میشه. شیار به گرید یه فضای تنفش میده و واحدها رو از هم جدا میکنه.

ستون

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

فیلد

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

قانون یک سوم

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

تناسبات الهی؟!

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

گرید دوازده واحدی

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

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

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

گرید سه ستونی

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

گرید شش ستونی

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

ترکیبی

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

تأکید

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

محدودیت ها

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

نقشه ذهنی

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

سخن آخر

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