گرید (Grid) در لغت به معنی توری یا یک شبکه سوراخ سوراخ است. اما اجازه دهید که در این مقاله آن را همان «گرید» صدا بزنیم تا راحت تر بتوان در مورد آن صحبت کرد. اما سوال اصلی ما این است: تا به حال هنگام طراحی یک صفحه وب از گرید استفاده کرده اید؟
اگر طراح وب و رابط کاربری هستید احتمالا با مفهوم Grid Base Design یا طراحی بر پایه صفحات شطرنجی آشنا هستید. اما اگر با این موضوع تا امروز برخورد نداشتید به شما اطمینان می دهم که آشنایی با آن، کار شما را بسیار ساده خواهد کرد. جایگذاری صحیح المان ها در طراحی بسیار مهم است و اگر شما توازن آنها را رعایت نکرده باشید به بهترین نتیجه کار خود نخواهید رسید. رعایت فاصله ها با نسبت متناسب و برقراری تقارن در پیاده سازی نظم در صفحات بسیار مهم است. می توانید به گرید به عنوان یک نقشه راه برای چیدمان صفحه نگاه کنید. گرید یک ساختار نامریی است که به قراردادن آیتم های مختلف صفحه کمک می کند. گرید در صفحه وب شما یا روزنامه چاپی که می بینید دیده نمیشود. اما هنگام طراحی مانند یک اسکلت اصلی مورد استفاده قرار می گیرد تا طراح بتواند چیدمان صفحه را بر اساس این راهنما مشخص کند.
ادامه مطلب را از دست ندهید. در واقع طراحی بر پایه صفحات شطرنجی ایده جدید و روشی برای دنیای وب نیست و از اصول ابتدایی طراحی سرچشمه می گیرد. طراحی بر پایه گرید روشی برای ایجاد هارمونی و توازن در ساختار یک طرح و برای ما در طراحی صفحات وب است. شاید بگویید که همیشه زیبایی با نظم همراه نیست و صحبت شما کاملا صحیح است. طبیعت پر از زیبایی هایی است که هیچ نظمی در آنها پیدا نیست و در هنر و حتی طراحی هم نمونه های بسیاری از زیبایی های خیره کننده را در بی نظمی می بینیم اما در هیچ یک از آنها قرار نیست یک مفهوم منطقی در سریع ترین زمان به مخاطب منتقل شود. و حتی بهتر است مخاطب به فکر وا داشته شود و هر کسی برداشت خودش را از اثر داشته باشد. اما آیا در مورد یک نرم افزار و یا وب سایت هم همین طور است؟ ذهن ما برای ساده سازی و درک بهتر مسائل سعی می کند در هر هرج و مرجی نظمی را به وجود بیاورد. این مهمترین دلیلی است که ما در سیاهی حفره های ماه تصویر اشخاص را می بینیم. به همین دلیل است که هر چه ما ساختاری منظم تر را به وجود آورده باشیم درک مطلب و محتوا برای ذهن ما سریع تر خواهد بود و در مخاطب تجربه بهتری را به وجود می آوریم. استفاده از خطوط شطرنجی در زمان طراحی روشی برای ایجاد نظم، هماهنگی و تناسب در طراحی است. گرید از تعدادی خطوط افقط و عمودی تشکیل شده که سلول هایی را برای چیدمان متن و قطعات گرافیکی ما ایجاد می کند. آنها کمک می کنند تا به راحتی فاصله ها و محل هایی را برای تیتر، متن، تصاویر و… مشخص کنید.
هر دو تصویر بالا بسیار ساده هستند و از قرار گرفتن چند مستطیل ساده به وجود آمده اند اما تصویر بالاتر، به مراتب زیباتر به نظر می رسد، زیرا با ساختاری مشخص که برای شما قابل تشخیص است، در ذهن می نشیند. اما تصویر دوم بیشتر شبیه به یک اتفاق است و برای چشم شما حرکت در بین اجزای آن به راحتی طرح اول نیست. در زمانی که یک صفحه جدید را باز می کنید شما در حال سعی کردن برای درک محتوا هستید و چشمان شما دیوانه وار و در کسری از ثانیه در بین اجزای صفحه حرکت می کنند. هرچه این زمان کوتاه تر باشد شما حس بهتری پیدا می کنید و اگر این زمان زیاد طولانی باشد ممکن است ادامه این کار برای شما خسته کننده شود. در واقع طراحی گرید بیس به کمک شما می آید تا محتوا را در ساختاری منظم و بر پایه اولویت بندی مشخص به مخاطب ارايه دهید.
تا اینجای بحث به اندازه کافی درباره اهمیت طراحی بر پایه گرید ها صحبت شد و بهتر است برویم سراغ روش کار. احتمالا انسان های نخستین برای طراحی مجبور بودند با خط کش و مداد یک کاغذ سفید را شطرنجی کنند و با خودکار طراحی کنند و بعد هم خط های مدادی را پاک کنند. روش ما خیلی ساده تر است. قدم اول ما طراحی با نرم افزار فتوشاپ است و بعد از آن هم پیاده سازی طرح با سی اس اس و اچ تی ام ال.
وب سایت رسمی دروپال بر اساس گرید ۱۲ ستونه طراحی شده است
می توانید یک گرید برای طراحی تان بسازید و یا از گرید های آماده استفاده کنید. گرید سبب ایجاد یک نظم بصری در طراحی شما می شود و در موارد زیادی به بهبود طراحی شما کمک می کند. البته این به این معنی نیست که گرید برای تمام طراحی ها مناسب است. در کارهای چاپی مانند مجله و روزنامه تقریبا همیشه از گریدها استفاده می شود. ضمن اینکه گرید سرعت کار طراحی را هم بالا می برد. در عین حال وقتی چند صفحه مختلف بر اساس یک گرید طراحی شده باشند شما می توانید یکپارچگی بصری را میان آنها ببینید و این طراحی شما را یکدست و همگون می کند.
بسیاری از گرید ها برای طراحی وب، صفحه شما را به ۹، ۱۲، ۱۶ و یا ۲۰ ستون تقسیم می کنند. البته ممکن است شما گرید خودتان را طراحی و از تقسیم بندی متفاوتی استفاده کنید. برخی طراحی گرید ها شامل خطوط افقی هم می شود.
بسیاری از طراحان وب تصور می کنند که گرید فقط برای لی اوت های با عرض ثابت مناسب اند. اما گرید ها برای طراحی های روان و انعطاف پذیر هم قابل استفاده هستند و برخی فریم ورک ها برای طراحی ریسپانسیو با گرید هم وجود دارد.
گرید نشان دهنده علاقه طراح به نظم در گرافیک است. در یک گرید واحد های اندازه گیری به صورت بلوک هایی وجود دارند که ستون ها را تشکیل می دهند و به گروه بندی قطعات گرافیکی کمک می کنند. در نهایت شما یک ساختار بصری منسجم خواهید داشت که لزوما شکل ظاهری یکسانی ندارد.
گرید در واقع یک سیستم برای قرار دادن قطعات مختلف است. از گرید در دو سطح متفاوت استفاده می کنیم. یکی سلول های گرید که مثلا ۲۰ در ۲۰ پیکسل هستند و دیگری ستون های گرید. مثلا گرید شما ۴ ستونه است.
طراحی با گرید سبب می شود که توازن و یکپارچگی در سایت شما به وجود بیاید که اعتماد کاربران شما را افزایش می دهد. نخستین قدم این است که یک لی اوت اولیه بر اساس گرید ایجاد کنید. با این زیر ساخت گرافیکی می توانید بفهمید که چطوری بلوک های اصلی نوشته و دیگر آیتم های مهم در صفحه شما قرار می گیرند. برای شروع مقداری از متن های اصلی طراحی را به همراه مقداری قطعات گرافیکی جمع کنید و شروع به چیدن آنها در اشکال مختلف روی گرید بکنید. تجربه کنید که چیدمان های متفاوت آنها چطور در صفحه قرار می گیرد. هدف شما این است که یک لی اوت منطقی و یکپارچه ایجاد کنید که متن و تصویر را بدون توقف بصری به کاربر نشان می دهد.
اما شما مجبور نیستید برای هر بار طراحی در فتوشاپ صفحه شطرنجی درست کنید. پترن های مختلفی طراحی شده اند و این امکان وجود دارد که از انها استفاده کنید. یکی از معروف ترین آنها پترن ۹۶۰ است که امروز در مورد آن بیشتر صحبت می کنیم. در واقع این پترن های آماده برای ساده کردن کار طراحان به وجود آمده اند. قبل از CSS3 ستون بندی صفحه به این شکل کار ساده ای نبود. اما بعد از آن پترن های مختلفی برای ستون بندی صفحات به وجود آمد. اگر دقت کنید متوجه می شوید همیشه ایجاد قالب برای صفحات ساده نیست برای مثال اگر شما با یک عرض هزار پیکسلی مواجه باشید و بخواهید یک صفحه با سه ستون را طراحی کنید تقسیم بندی صفحه به این شکل خواهد بود که هر ستون عرضی برابر با ۳۳۳ و یک سوم پیکسل خواهد داشت. این شکل تقسیم بندی صفحه باعث اختلال ستون ها می شود و برای رفع آن باید به اطراف ستون ها مارژين اضافه کرد.
وب سایت Sony Music بر اساس گرید ۱۶ ستونه طراحی شده است
برای این عرض ما ۱۰ پیکسل مارژین برای هر ستون در نظر می گیریم و بعد از آن ستون هایی با عرض ۳۱۳ پیکسل خواهیم داشت. با هر بار تغییر سایز صفحه شما و یا تعداد ستون ها این پروسه تکرار خواهد شد و البته قدم بعدی پیاده سازی این ستون بندی در فضای کار است. کار نسبتا سختی است اما راه بهتری هم وجود دارد. مثلا برای سیستم ۹۶۰ شما می توانید قالب های آماده را به همراه فایل CSS به سادگی دانلود کنید و در اختیار داشته باشید. استفاده از پترن ۹۶۰ برای طراحی صفحات وب بسیار مناسب و کاربردی است. زیرا این عرض برای بیشتر نمایشگرها مناسب است و یک عرض استاندارد برای طراحی وب محسوب می شود. البته این پترن دسته بندی های مختلفی دارد و بر اساس تعداد ستون هایی که طرح شما داشته باشد می توانید از آنها استفاده کنید. دو ورژن اصلی این پترن ۱۲ ستونه و ۱۶ ستونه هستند. در سیستم ۱۲ ستونه کم ترین عرض ستون ها ۶۰ پیکسل است و هر ستون بعدی ۸۰ پیکسل بزرگ تر از ستون قبل است. پس ستون هایی با عرض های ۶۰ ، ۱۴۰، ۲۲۰، ۳۰۰ ، ۳۸۰ ، ۴۶۰ ، ۵۴۰ ، ۶۲۰ ، ۷۰۰ ، ۷۸۰ ، ۸۶۰ و ۹۴۰ در اختیار شما خواهد بود.
به شکل مشابه در سیستم ۱۶ ستونه عرض ستون ها ۴۰ پیکسل خواهد بود و هر ستون از ستون قبل ۶۰ پیکسل بزرگ تر بوده و عرض های در دسترس ما: ۴۰ ، ۱۰۰ ، ۱۶۰ ، ۲۲۰ ، ۲۸۰ ، ۳۴۰ ، ۴۰۰ ، ۴۶۰ ، ۵۲۰ ، ۵۸۰ ، ۶۴۰ ، ۷۰۰ ، ۷۶۰ ، ۸۲۰ ، ۸۸۰ و ۹۴۰ خواهند بود.
[h=3]کلاس سی اس اس هر یک از باکس های افقی در تصویر زیر یک Class سی اس اس در سیستم ۹۶۰ دارند. برای قرار دادن هر یک از اجزای صفحه که عرضی برابر با این باکس ها را دارد کافیست که Class مربوطه را به Div خود اختصاص دهید. به همین سادگی! کلاس ها بر اساس اندازه باکس ها نام گذاری شده اند یعنی کلاس grid_1 کوچکترین و کلاس grid_12 بزرگترین باکس است. یک بار دیگر به تقسیم بندی صفحات می پردازیم اما این بار از منظر استفاده در فایل سی اس اس نه عرض باکس ها. این شیوه نام گذاری کار شما را برای استفاده از باکس ها در لی اوت بسیار ساده کرده است. به این نکته دقت کنید که مجموع شماره کلاس های شما در سیستم ۱۲ ستونه نباید از ۱۲ بیشتر شده باشد و در سیستم ۱۶ ستونه از شانزده. برا مثال در نظر بگیرید که سه صفحه سه Div دارید که باید در کنار هم قرار بگیرند. از قالب ۱۲ ستونه استفاده می کنید و از کلاس grid_4 برای هر سه Div استفاده می کنید. (۱۲=۴+۴+۴)
و سیستم ۱۶ ستونه برای پیاده سازی طرح های با ۴ ستون مناسب است و می توانید کلاس مربوطه را به ۴ Div اختصاص دهید. برای اطمینان از اینکه از اشتباه جلوگیری کنید بخش هایی از طراحی را که با سیستم ۱۲ ستونه تقسیم بندی کرده اید را در یک Div با کلاس container_12 قرار دهید و بخش های ۱۶ ستونه را در Div با کلاس container_16.
[h=3]بکشید و هول دهیددر گرید سیستم ۹۶۰ برای شما امکان جا به جا کردن افقی باکس ها با استفاده از کلاس های Push , Pull سی اس اس وجود دارد. در شکل زیر یک مثال ساده از این جا به جایی را ملاحظه می کنید.
به یاد داشته باشید که برای جا به جا کردن باکس ها دست شما کاملا باز است. اما این Classها ارتباط مستقیم با فایل اچ تی ام ال شما دارند. برای مثال تصویر زیر را در نظر بگیرید. اسم وب سایت زیر در قالب لوگو به عنوان اولین المان فایل اچ تی ام ال ما قرار گرفته است. شما قصد ندارید جای آن را در فایل اچ تی ام ال تغییر دهید اما دوست دارید که با تغییر در سی اس اس جای آن را تغییر دهید و در وسط صفحه قرارش دهید.
و این نتیجه کار شماست.
[h=3]ایجاد فضای خالیبسیاری اوقاب ایجاد فضای خالی از ضروریات طرح شماست. قبلا در مورد اهمیت فضای سفیدگفته بودیم. برای این کار شما می توانید از کلاس های prefix و suffix برای Divهای خود استفاده کنید. برای ایجاد فضای خالی به اندازه عرض یک باکس می توانید از prefix_1 قبل از المان و یا suffix_1 بعد از المان مورد نظر استفاده کنید.
در مثال بالا از کلاس suffix_3 برای ایجاد فضای خالی استفاده شده است.
آخرین چیزی که باید یاد بگیرید این است که اگر از گرید های کوچکتر به عنوان زیر مجموعه استفاده می کنید استفاده از کلاس های alpha برای اولین زیر مجموعه و omega برای آخرین زیر مجموعه ضرورت دارد. این کلاس ها مارژین فیکس بوده و امکان استفاده باکس های کوچکتر را درون باکس های بزرگتر با گرید متفاوت را به شما می دهد. جمع بندی
۱. از کلاس container_12 برای ورژن ۱۲ ستونه و کلاس container_16 برای ورژن ۱۶ ستونه استفده کنید. ۲. از کلاس های grid_1 ، grid_2 و … برای اختصاص عرض مناسب به باکس ها استفاه کنید و دقت کنید که مجموع اعداد کلاس ها از عدد ورژن پترن شما بزرگتر نشود. ۳. برای تغییر جاگذاری باکس ها از کلاس های push و pull استفاده کنید. ۴. از کلاس های prefix و suffix برای ایجاد فضای خالی در صفحه استفاده کنید. ۵. از کلاس های alpha و omega برای تثبیت مارژين ها و گرید های زیر مجموعه استفاده کنید. برای برخی آیتم ها گاهی مجبورید که از خطوط گرید خارج شوید. با این کار دنیا به پایان نمی رسد. تا وقتی که از کارتان اطمینان دارید و برایش یک دلیل قایل هستید می توانید این کار را بکنید. این مورد به خصوص در طراحی هدر و فوتر سایت پیش می آید.
همانطور که گفتیم لازم نیست چرخ را دوباره اختراع کنید. مگر اینکه نیاز متفاوتی داشته باشید. انواع گریدها به صورت فریم ورک های آماده با فایل قابل استفاده در فتوشاپ، ایلاستریتور و… قابل دسترس هستند. امروز با گرید ها آشنا شدیم و کمی هم در مورد سیستم گرید 960.gs صحبت کردیم. اما چند سیستم و سایت گرید مشهور دیگر هم اینها هستند:
