سیستم Grid در طراحی سایت |ترفندهای بهترین صفحه آرایی برای وبسایت

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

• گرید چیست و چه کاربردی در طراحی سایت دارد؟
• مفاهیم و واژگان مربوط به Grid
• انواع گرید و کاربردهای آن 
• نکات و ترفندهای استفاده از شبکه Grid

پیشنهاد می کنیم مطالعه کنید:

هر آنچه باید درباره Layout در طراحی سایت بدانید!

منظور از گرید Grid در طراحی سایت چیست؟

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

گریدها برای کاربران سایت شما نامرئی هستند. Grid سوپرقهرمانی متواضع است که در مراحل سخت کار کنار شما می‌ایستد و به محض این که کار انجام شد شنلش را باز می‌کند و ناپدید می‌شود!

چرا باید از Grid در طراحی سایت استفاده کنیم؟

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

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

در این مثال فرضی طراحی سمت راست با یک لیست ساده انجام شده و طراحی سمت چپ با استفاده از شبکه گرید. کدام یک برای شما به عنوان کاربر جذاب تر و گویاتر است؟

در واقع یک شبکه گرید می تواند ساختار اساسی و اسکلت برای طراحی شما ایجاد کند. این خطوط نامرئی می‌توانند ارتباط منطقی میان سیستم کلی ایجاد کند.

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

آشنایی با اصطلاحات مربوط به گرید در طراحی

ستون یا Column

ستون ها بخشهای عمودی هستند که ارتفاع سطح محتوا را پوشانده و “بلوک های سازنده” شبکه ها هستند. آنچه در مورد ستون ها منحصر به فرد است این است که هرچه ستون های شبکه بیشتر باشد ، شبکه انعطاف پذیرتر خواهد بود. ما به زودی در مورد این موضوع با عمق بیشتری بحث خواهیم کرد. عرض ستون ها همیشه به طراح بستگی دارد ، اما از نظر روش های استاندارد ، تعداد سنتی ستون هایی که باید استفاده کنید 12 عدد در دسک تاپ ، 8 عدد در تبلت و 4 ستون در تلفن همراه است. بیشتر شبکه ها دارای عرض ستون 60-80px هستند. عرض ستون تأثیر کلیدی در عرض محتوای واقعی شما خواهد بود.

ردیف یا Row

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

ماژول یا Modules

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

حفره یا Gutter

گوترها خطوطی بین ستون ها و ردیف هاست که هر یک از این واحدها را جدا می کند. اندازه رایج گوتر معمولا 20px است. نقش گوتر ها ایجاد فضای منفی (بزرگ و کوچک) بین ستون ها و ردیف ها است. ساده تر بگویم گوترها فضای بین ستون ها و فضای بین ردیف ها هستند. این عناصر بیشترین کاربرد را در قالب بندی layout دارند و آن جا عرض گوتر بسیار مطرح می‌شود.

حاشیه یا Margin

حاشیه ها فضای منفی بین قالب و لبه بیرونی محتوا است. یعنی شبیه به همان گوتر اما بیرون از طرح!  حاشیه های جانبی معمولاً با اندازه 20-30 پیکسل در تلفن همراه هستند و بین دسک تاپ و موبایل تفاوت زیادی دارند.

انواع Grid در طراحی سایت

برای آن که بدانید کدام گرید برای طراحی شما مناسب تر است بایستی ابتدا انواع آن را بشناسید. به طور کلی ۴ نوع Grid اصلی وجود دارند:

گرید بلوکی یا کلاسیک

این نوع گرید معمولا یک بلوک یا ستون پر شده با نوشته و عکس‌های میانی است. یعنی یک ستون محتوا و تصویر به صورت مستطیل تمام طرح را تشکیل می‌دهند. تصاویر این صفحه معمولا اندازه کامل و بزرگ دارند. بیشتر کاربرد این نوع گرید برای پست‌های وبلاگ مثل همین صفحه است.

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

گرید ماژول

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

گرید ستونی

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

در واقع تعداد ستون در این نوع طراحی کاملا به خودتان بستگی دارد. اما طراحی سه ، چهار و دوازده ستونی بین طراحان بسیار محبوب تر هستند.

گرید سلسله مراتبی

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

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

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

۱. همواره طراحی ریسپانسیو را مدنظر قرار دهید

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

برای تغییر ظاهر وب سایت خود یا بهتره مندی از خدمات UI  می توانید از خدمات طراحی ui  تاس استفاده کنید

۲. فضای منفی و سفید را هم به حساب بیاورید

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

بنابراین حواستان باشد که مثلا اگر از گرید با مقیاس 8pt برای سایر عناصر استفاده می‌کنید واحدهای فضای سفید را نیز با همین مقیاس در نظر بگیرید.

۳. به نسبت طلایی و فیبوناچی احترام بگذارید

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