درک نقش گرید در طراحی وب سایت
در طراحی سایت، گریدها یا همان شبکهبندی به طراح کمک میکنند تا بداند المانها را چگونه و در کجای صفحه سایت قرار بدهد. درواقع مسائلی چون سطربندی، ستون بندی، فاصله المانها یا همان مارجین1margin و مسائلی از این دست همگی درزمینه گریدبندی و چیدمان المانها مؤثر هستند.
لزومی ندارد که این سطرها و ستونها را مانند یک جدول و یک سری خط در صفحه وب سایت ببینید. درواقع آنها در پس پرده قرار دارند. صفحه سایت را بهخوبی تقسیمبندی میکنند تا بتوانید کل المانها را بهدرستی بچینید. همچنین این ساختار گرید در طراحی وب سایت به شما کمک میکند تا نسبت ابعاد المانها و فاصله آنها از یکدیگر را بهخوبی رعایت کنید.
اهمیت گرید در طراحی وب سایت چیست؟
همانطور که ذکر شد گریدها کمک میکنند تا المانهای صفحه وب سایت در سطرها و ستونهای مناسب (طراحی مناسب) قرار بگیرند. با وجود چنین ساختار نظاممندی، متون، تصاویر و یا هر المان دیگری به شکل منظمی در صفحه قرار داده میشود و سازگاری خوبی در طراحی و چیدمان عناصر به وجود میآید.
در واقع به کمک گرید در طراحی وب سایت شما قالبها و الگوهای مناسبی در اختیار خواهید داشت که باعث میشوند صفحات مختلف سایت شما هماهنگ و زیبا به نظر بیایند. طراحان سایت به کمک گرید و سطرها و ستونهای آن ساختار منظمی در طراحی خود به وجود میآورند. در نتیجه صفحات مختلف را با صفحهبندی یکسان و متناسب طراحی میکنند که از دید مخاطب نشاندهنده طراحی اصولی است. این کارها به کمک واحدهای اندازهگیری ثابتی که در سطرها و ستونها تعریف میشود، امکانپذیر میگردد. این شبکهبندیها تنها در طراحی وب متداول نیستند، بلکه از ابتدا در طراحی و پرینت آن بود که چنین ایدههایی مطرح شد و امروزه نیز در طراحی رابط کاربری نرمافزارها و بهخصوص طراحی واکنش گرا، این مسئله به کار گرفته میشود.
در دنیای وب نیز فریم ورک های مطرحی چون بوت استرپ از اینگونه الگوها کمک گرفتهاند. چنین ابزارهایی به کمک گریدها و سطرها و ستونهایی که در اختیار برنامه نویسان قرار میدهند، به آنها کمک میکنند تا ابعاد و چیدمان عناصر صفحه را بهدرستی پیادهسازی کنند.
مفاهیم و اصطلاحات در صفحهبندی سایت
برای افرادی که بخواهند از گرید در طراحی وب سایت خود استفاده کنند دانستن اصول و قواعد و اصطلاحات موجود در این حیطه ضروری است. درواقع این مفاهیم مشابه آناتومی گرید هستند که درک صحیح آنها به شما در شناخت بهتر صفحهبندی وب سایت کمک میکند. در ادامه سعی میکنیم توضیحات مختصری در مورد برخی از این موارد (مانند سطرها و ستونها و…) ارائه کنیم.
ستون در گریدبندی
ستونها2Columns یکی از اصول شبکهبندی هستند. آنها ازنظر ارتفاعی تمام محتوای صفحه را میپوشانند (از بالا تا پایین صفحه ادامه دارند). ازنظر عرض نیز بسته به طراحی صورت گرفته، هر ستون عرض مشخصی دارد. معمولاً این عرض مقداری بین 60 تا 80 پیکسل را دارد. درنتیجه عموماً در حالت دسکتاپ حدود 12 ستون برای تمام عرض صفحه توسط سازندگان چنین سیستمهایی طراحی میشود. معمولاً این تقسیمبندیها و طراحیها توسط سازنده یک فریم ورک (مانند بوت استرپ) یا صفحه ساز وردپرس (مانند المنتور) صورت میگیرد.
سطر در گریدبندی
خب دیگر با توضیح ستون مشخص است که سطرها در گرید در طراحی وب سایت حالت برعکس دارند. یعنی تمام عرض صفحه را در خود جای میدهند. معمولاً در طراحی وب نقش سطرها نادیده گرفته میشود. زیرا اصولاً المانها توسط طراح وب از بالا به پایین در صفحه طراحی میشوند و خیلی این موضوع که هر المان یا عنصر چند سطر را اشغال کرده به چشم نمیآید.
ماژول در گریدبندی
به عنوان یک تعریف دیگر و اصطلاح رایجی که در بحث شبکهبندی به کار میرود، میتوانیم ماژولها3Modules را در نظر بگیریم. به هر بخش یا جزیی که از تقاطع یک سطر و یک ستون ایجاد میگردد، یک ماژول میگویند. ماژولها معمولاً مربعها یا مستطیلهایی هستند که عرض و طول آنها بسته به عرض و ارتفاعی که برای ستونها و سطرها تعریفشده، میتواند متغیّر باشد.
فضای خالی در گریدبندی
فضای خالی4Gutters ازجمله مواردی است که در طراحی سطرها و ستونها باید لحاظ شود. معمولاً فضایی در حد 20 پیکسل بین سطرها و نیز بین ستونها خالی گذاشته میشود. این کار به زیبایی طراحی سایت و مشخص شدن بهتر جایگاه المانها کمک میکند. در برخی طرحبندیها مانند Masonry layout این فضاهای خالی بسیار اثرگذار هستند.
مارجین در گریدبندی
بهعنوان آخرین اصطلاحی که در اینجا توضیح داده میشود، میتوانیم به مارجین ها اشارهکنیم. در برنامه نویسی وب و بهخصوص در زبانهایی چون CSS این اصطلاح را شنیدهاید. مارجین به فاصله میان المانها اشاره دارد. در شبکهبندی و گرید نیز فضای اطراف بهعنوان مارجین شناخته میشود. یعنی فاصلهای که مجموعه سطرها و ستونهای تعریفشده از هر یک از چهار طرف صفحه دارند.
توجه داشته باشید که مارجین ارتباطی به حجم یا فضای اشغالشده توسط یک المان ندارد. بلکه به فاصله آن المان با المان کناری (چه در راستای افقی و چه در راستای عمودی) اشاره میکند. این فاصلهها بسته به نیاز طراحی ممکن است در قسمتهای مختلف طراحی یک وب سایت به کار گرفته شوند.
انواع گرید در طراحی وب سایت
گرچه واژه گرید معمولاً یک ساختار مربعی و خانه به خانه را در ذهن تداعی میکند، اما در دنیای وب طرحها و صفحهبندیهای مختلفی به کمک همین سیستم گرید ابداعشده و به کار گرفته میشوند.
انتخاب نوع گرید و صفحهبندی بستگی به طراحی سایت شما دارد و در اغلب موارد، محتوا و موضوع صفحه نیز در این خصوص تأثیرگذار است. ما در ادامه برخی از انواع معروف و متداول گرید را با ذکر مثال معرفی میکنیم تا بهتر با آنها آشنا شوید.
طراحی تک ستونه یا بلاک گرید5Block Grid
این گزینه یکی از انواع گرید در طراحی وب سایت است که در زبان انگلیسی با نامهایی چون single-column grids یا manuscript grids نیز شناخته میشود. معمولاً این نوع طراحی برای ساختار یک نوشته یا پست6post در یک وب سایت استفاده میگردد. یعنی تمامی المانها پشت سر هم از بالا به پایین تنها در یک ستون بزرگ (که مجموعهای از ستونهای تشکیلدهنده گرید است) قرار میگیرند.
طراحی چند ستونه7Column Grid
طراحی چند ستونه همانطور که از نامش مشخص است برای زمانی مناسب است که بخواهید چند المان را در کنار یکدیگر و در ستونهای مجزا قرار دهید. البته بسته به طراحی میتوانید از دو ستون تا هر تعداد ستون که نیاز باشد، در کنار یکدیگر قرار دهید. اما معمولاً تعداد ستونهای خیلی زیاد باعث فشردگی بیشازاندازه محتوا شده و از خوانایی آن برای کاربر سایت میکاهد.
طراحی ماژولار (سطر و ستون متقارن)
طراحی ماژولار8Modular Grid نیز یکی دیگر از انواع گرید در طراحی وب سایت است. نمونه چنین طراحی را در صفحه مقالات طراحی سایت ما مشاهده میکنید. در این حالت علاوه بر ستونها، سطرها نیز مهم هستند. یعنی محتوای شما بهگونهای تنظیم میشود که تعداد سطرها و ستونهای یکسانی را اشغال میکند. این الگوی تکراری در نهایت مشابه یک صفحه شطرنجی عمل کرده و در ذهن مخاطب تقارن خوبی (هم ازلحاظ افقی و هم ازلحاظ ارتفاعی) ایجاد میکند.
جمعبندی
در این مقاله به موضوع گرید در طراحی وب سایت پرداختیم. برخی اصطلاحات رایج در زمینه گرید و صفحهبندی را توضیح دادیم و سعی کردیم مفاهیم طراحی وب سایت در این زمینه را بررسی کنیم. همچنین به برخی از انواع رایج گرید در طراحی نیز اشاره کردیم. البته بهکارگیری این روشها مستلزم کسب دانش و تجربه بیشتر است. همچنین باید از ابزارهای مناسبی که این امکانات را در اختیار شما قرار میدهند، استفاده کنید. یکی از این ابزارهای مشهور در حیطه وردپرس، صفحه ساز المنتور است که به شما کمک میکند بتوانید چیدمان مناسبی از المانها در طراحی وب سایت خود داشته باشید.
