اگر در یک دوره طراحی گرافیک شرکت کنید، یکی از اولین مفاهیمی که یاد می‌گیرید، کاربرد شبکه بندی یا گرید در طراحی گرافیک است. اما گریدها می‌توانند پیچیده‌تر از آن چیزی باشند که در ابتدا به نظر می‌رسد—آنها انواع مختلفی دارند، در طول قرن‌ها تکامل یافته‌اند و نقش اساسی در طراحی چاپی و دیجیتالی ایفا می‌کنند.
راهنمای مقدماتی گریدها در طراحی گرافیک
در این راهنما، به بررسی موارد زیر می‌پردازیم:
- گرید چیست و چرا اهمیت دارد؟
- انواع مختلف گرید در طراحی گرافیک
- تاریخچه‌ای مختصر از گریدها، از نسخه‌های خطی قدیمی تا طراحی وب مدرن
- چگونه گریدها در قرن بیستم تکامل یافتند (و چگونه برخی طراحان علیه آنها شورش کردند)
در ادامه، ۵ نکته مهم برای شروع کار با گریدها را با شما به اشتراک خواهیم گذاشت!
۱. گرید چیست؟ و انواع گرید در طراحی گرافیک
در طراحی، گرید یک سیستم برای سازماندهی چیدمان (Layout) است. این چیدمان‌ها می‌توانند برای چاپ (مانند کتاب، مجله یا پوستر) یا صفحه نمایش (مانند وب‌سایت، اپلیکیشن یا رابط‌های کاربری) استفاده شوند.
انواع مختلفی از گرید وجود دارد که هر کدام کاربردهای متفاوتی دارند. در ادامه، برخی از مهم‌ترین انواع گرید را معرفی خواهیم کرد.
گرید خط پایه (Baseline Grid)
گرید خط پایه یک شبکه متراکم از خطوط افقی با فاصله‌های مساوی است که محل قرارگیری متن را مشخص می‌کند. این نوع گرید معمولاً همراه با گرید ستونی (Column Grid) استفاده می‌شود تا اطمینان حاصل شود که خطوط متن در هر ستون به‌طور یکنواخت و هماهنگ در سراسر صفحه تنظیم می‌شوند.
یک نمونه ساده از گرید خط پایه همان کاغذهای خط‌دار مدرسه است که احتمالاً در دوران تحصیل از آنها استفاده کرده‌اید!
گرید ستونی (Column Grid)
گرید ستونی رایج‌ترین نوع گرید در طراحی گرافیک و وب است. در این روش، صفحه به تعدادی بخش عمودی تقسیم می‌شود و عناصر طراحی بر اساس این بخش‌ها تراز می‌شوند.
روزنامه‌ها و مجلات از گرید ستونی به‌طور گسترده‌ای استفاده می‌کنند تا محتوا را به شکلی منظم و خوانا ارائه دهند.
گرید مدولار (Modular Grid)
گرید مدولار نوعی گرید توسعه‌یافته از گرید ستونی است. در این روش، علاوه بر تقسیم‌بندی صفحه به ستون‌های عمودی، سطرهایی نیز اضافه می‌شود. نقاط تلاقی این سطرها و ستون‌ها، “ماژول‌هایی” را ایجاد می‌کنند که می‌توان از آنها برای تنظیم چیدمان استفاده کرد.
مجلات و گزارش‌های شرکتی معمولاً از گرید مدولار بهره می‌برند تا ساختاری منظم، خوانا و انعطاف‌پذیر برای محتوای خود ایجاد کنند.
گرید نسخه خطی
گرید نسخه خطی (Manuscript Grid)
گرید نسخه خطی یک گرید تک‌ستونه است که تنها موقعیت متن را در یک صفحه تعیین می‌کند. این نوع گرید معمولاً در کتاب‌های کلاسیک و سنتی استفاده می‌شود، جایی که صفحات روبه‌روی هم دارای طرح‌بندی آینه‌ای هستند تا هماهنگی و خوانایی بهتری ایجاد شود.
گرید پیکسلی (Pixel Grid)
اگر تا به حال در یک سند فتوشاپ (Photoshop) زیاد زوم کرده باشید، احتمالاً یک گرید پیکسلی را دیده‌اید. صفحات نمایش دیجیتال از میلیون‌ها پیکسل تشکیل شده‌اند که در یک گرید میکروسکوپی قرار گرفته‌اند. گاهی اوقات طراحان برای ویرایش تصاویر به‌صورت پیکسل به پیکسل، به این گرید نزدیک می‌شوند تا تغییرات دقیقی ایجاد کنند.
گرید سلسله‌مراتبی (Hierarchical Grid)
این نوع گرید به هر گرید نامنظمی اشاره دارد که مطابق با نیازهای خاص محتوا طراحی می‌شود. یک گرید سلسله‌مراتبی می‌تواند کاملاً آزاد و بدون ساختار مشخص باشد، یا ممکن است از دو گرید روی‌هم‌افتاده یا ترکیبی از عناصر مختلف گرید تشکیل شود. این نوع گرید معمولاً در طراحی‌هایی که انعطاف‌پذیری بیشتری نیاز دارند، مانند وب‌سایت‌های مدرن و رابط‌های کاربری، استفاده می‌شود.
2. تاریخچه اولیه گریدها
احتمالاً قدیمی‌ترین سیستم گرید چیزی شبیه به گرید خط پایه بوده است: خطوط راهنما یا “خطوط کمکی” که بر روی مخطوطات باستانی رسم شده بودند و به نویسندگان کمک می‌کردند تا متنی با ترتیب و فاصله یکنواخت ایجاد کنند. گریدهای ساده ستونی در طومارهای دریای مرده یافت می‌شوند، جایی که برای سازماندهی متن به بلوک‌های خوانا در یک سند طولانی و رول‌شده استفاده می‌شدند.
حدود 1500 سال بعد، این اصل مشابه به چاپخانه‌های اولیه غربی منتقل شد. این دستگاه‌ها نیاز به مهره‌های فلزی داشتند که نوع متحرک نامیده می‌شدند و باید به صورت تک تک حروف در یک سری خطوط بارگذاری می‌شدند، سپس با جوهر دستی پوشانده می‌شدند و روی کاغذ فشار داده می‌شدند. به عنوان مثال، انجیل گوتنبرگ – اولین کتاب غربی که با نوع متحرک چاپ شد – از یک گرید دو ستونی استفاده می‌کند.
روزنامه‌ها از اواخر قرن نوزدهم و اوایل قرن بیستم استفاده گسترده‌تری از گریدهای ستونی بزرگ داشتند، زیرا این گریدها بیشترین مقدار اطلاعات ممکن را در یک صفحه از کاغذ اخبار جای می‌دادند.
در یک صفحه بزرگ مانند کاغذ بروادشیت (که حدود ۳۰ اینچ در ۲۳ اینچ است)، استفاده از ستون‌ها باعث می‌شد که اندازه قلم کوچکتری (معمولاً ۸pt) استفاده شود و طول خط کوتاه‌تری در هر ستون حفظ شود که خوانایی را حفظ می‌کرد. بدون استفاده از ستون‌ها، خطوط خیلی بلند می‌شدند و پیگیری متن دشوار می‌گردید.
۳. گریدها در قرن بیستم
سیستم گرید یک ابزار کمکی است، نه یک تضمین. این سیستم استفاده‌های مختلفی را ممکن می‌سازد و هر طراح می‌تواند به دنبال راه‌حل‌های مناسب با سبک شخصی خود باشد. اما باید آموخت که چگونه از گرید استفاده کنیم؛ این یک هنر است که نیاز به تمرین دارد.
— جوزف مولر-بروکنمان
گریدها در اوایل قرن بیستم جذاب‌تر شدند، زمانی که طراحان پیشرو که تحت تأثیر جنبش‌هایی مانند باوهاوس و دی استایل کار می‌کردند یا از این جنبش‌ها تأثیر گرفته بودند، شروع به آزمایش بیشتر با طراحی چیدمان‌ها کردند. به عنوان مثال، طراحان میانه قرن یان چیشولد و جوزف مولر-بروکنمان سیستم‌های جدید گریدی را در قالب چیدمان‌های تایپوگرافی ساده و طراحی پوسترها توسعه دادند.
به‌ویژه مولر-بروکنمان — یکی از نمایندگان اصلی “سبک سوئیسی” — مرزهای استفاده از گریدها را با ایجاد سیستم‌های گریدی مدولار و چرخان گسترش داد. او یک کتاب راهنمای دقیق منتشر کرد (که برای هر طراح گرافیک ضروری است) به نام “سیستم‌های گرید در طراحی گرافیک” که مجموعه‌ای از بینش‌های به‌دست‌آمده از دوران حرفه‌ای برجسته او را شامل می‌شود.
علاوه بر توضیح تاریخچه بسیاری از اصطلاحات تایپوگرافی، او به‌طور عمیق به چگونگی انتخاب عرض‌های حاشیه‌ای که هم بصری جالب و هم کاربردی باشند پرداخته و جزئیات پیچیده‌ای مانند نحوه قرار دادن شماره صفحات نسبت به گرید را نیز بررسی کرده است.
یکی از مهم‌ترین بینش‌های مولر-بروکنمان این است که موفقیت یک گرید نه تنها به چگونگی قرار گرفتن عناصر در آن بستگی دارد، بلکه به نحوه قرار گرفتن خود گرید نسبت به ظرف (container) آن نیز وابسته است. امروزه در طراحی چاپ، ظرف معمولاً صفحه است و در طراحی وب یا UI، معمولاً پنجره مرورگر است.
عنوان کتاب او حتی برای خوانندگان مدرن کمی گمراه‌کننده است، زیرا مولر-بروکنمان به اندازه‌ای که به استفاده از گریدهای طرح توجه دارد، همانطور که به انتخاب و مدیریت تایپ نیز توجه می‌کند. در چشم‌انداز تاریخی، این موضوع بازتاب‌دهنده این است که چگونه سیستم‌های گرید انتزاعی از نوشتن و چاپ متن ظهور کردند؛ برای مولر-بروکنمان، گریدها و متن جدا نشدنی بودند. در اصل، گریدها به عنوان یک سیستم برای سازماندهی متن آغاز شدند و همچنان امروز هم باقی‌مانده‌اند.
در واقع، توصیه‌های مولر-بروکنمان برای چیدمان‌های چاپی، تمام تصمیمات مدولار در مورد ردیف‌ها و فواصل عمودی گرید را از گرید متن پایه‌ای استخراج می‌کند. او هرکدام از این ماژول‌ها را “میدان‌ها” (fields) می‌نامد.
مولر-بروکنمان حتی به بررسی کاربرد سیستم‌های شبکه‌ای در فضاهای سه‌بعدی پرداخته است و سیستم‌های شبکه‌ای تأثیر چشمگیری بر طراحی فضاهای نمایشگاهی و طراحی داخلی شرکت‌ها داشته‌اند.
به عنوان نوعی پس‌نوشت برای کتاب، مولر-بروکنمان به سیستم‌های قدیمی “ترتیب‌دهی” اشاره می‌کند که از طبیعت و تمدن‌های اولیه انسان استخراج شده‌اند. به عنوان مثال، او ساختارهای لانه زنبوری ساخته شده توسط زنبورها، و نقشه‌های اولیه نسبت‌های بدن انسان را شناسایی می‌کند. او همچنین به پیکتوگرام‌های مصری، انجیل گوتنبرگ، و دست‌نوشته‌های موسیقی (که در واقع یک نوع سیستم شبکه‌ای دقیق است، اگر به آن فکر کنید) می‌پردازد. او همچنین هندسه معماری سنتی ژاپنی و حتی ساختار پشتیبانی سقف کاخ کریستال لندن را بررسی می‌کند.
با اتصال این تاریخ به شیوه عمل طراحان مدرن، او کتاب را با این عبارت به پایان می‌رساند:
“هر روز بیشتر، مشتریان از طراحان انتظار دارند که کار آنها منطقی و سیستماتیک باشد، نه تنها به دلایل اقتصادی بلکه به‌منظور خلق و پرورش تصویر، زیرا یک مفهوم متحد برای هویت شرکتی نمی‌تواند تنها با خلاقیتی که منبع آن فقط احساسی باشد، تولید شود. طراحی به میزان بسیار زیادی نه تنها به ظرفیت احساسی بلکه به ظرفیت فکری نیز برای دستیابی به خلاقیت نیاز دارد.”
—جوزف مولر-بروکنمان
در نیمه دوم قرن بیستم، بسیاری از طراحان دیگر به عنوان نمایندگان برجسته سیستم‌های شبکه‌ای شناخته شدند. به عنوان مثال، ماسیمو وینیلی و ویم کروول. وینیلی سیستم‌های شبکه‌ای مدولاری سخت را برای طراحی کتاب‌های بی‌شمار خود، همچنین در کارش بر روی مواد اطلاعاتی عمومی برای مشتریانی مانند خدمات پارک ملی ایالات متحده و متروی نیویورک ترجیح می‌داد. کروول به‌ویژه برای تایپوگرافی مبتنی بر سیستم شبکه‌ای خود شناخته شده است.
دوره جامع و تخصصی آموزش طراحی لوگو
دوره جامع و تخصصی آموزش طراحی لوگو تمامی مراحل لازم برای تبدیل شدن به یک طراح حرفه‌ای را از دریافت بریف دقیق تا آماده‌سازی فایل نهایی پوشش می‌دهد. این دوره با تمرکز بر تقویت مهارت‌های خلاقانه و فنی، آموزش نرم‌افزار Adobe Illustrator و درک اصول طراحی لوگو مانند سادگی، مقیاس‌پذیری و ماندگاری، فرآیند طراحی را گام‌به‌گام پیش می‌برد. مراحل شامل دریافت اطلاعات از کارفرما، ایده‌پردازی و اتود زدن، اجرای طرح در Illustrator، انتخاب رنگ و تایپوگرافی اختصاصی، و در نهایت آماده‌سازی فایل برای ارائه حرفه‌ای به مشتری است.
در دوره جامع و تخصصی آموزش طراحی لوگو به طور مفصل به گرید ها و انواع مختلف تکنیکهای کاربردی دیگر برای طراحی یک لوگوی حرفه ای پرداخته ایم.
برای مشاهده سرفصلهای این دوره آموزش طراحی لوگو به اینجا مراجعه فرمایید.
۴. انقلاب علیه شبکه
انقلاب در رایانه و نرم‌افزارهای طراحی در دهه ۱۹۷۰ آغاز شد، در دهه‌های ۸۰ و ۹۰ گسترش یافت و همچنان ادامه دارد. این انقلاب علاوه بر تغییرات سریع در ابزارها و تکنیک‌هایی که توسط صفحه‌آرایی‌ها و چاپگران استفاده می‌شد، فرصت‌های جدیدی برای آزمایش و تجربه‌گری در بین طراحان ایجاد کرد.
در دوران چاپ‌های آنالوگ و نوع‌های قابل جابجایی، گریدها ابزاری حیاتی برای سازماندهی متن و سایر عناصر گرافیکی به شیوه‌ای سازگار و قابل تکرار بودند. در این دوران، امکان شکستن شبکه و دستکاری نوع‌ها وجود داشت، همانطور که ولفگانگ وینگارت در زمان آموزش چاپگری خود این کار را انجام می‌داد. با این حال، دستیابی به چنین اثراتی به معنی سرپیچی از نحوه عملکرد معمولی ماشین‌های چاپ بود. در ادامه، شما را به مطالعه مقاله نقش تکرار، الگو و ریتم در طراحی دعوت می کنیم.
با ورود نشر رومیزی، ناگهان این محدودیت‌های فنی و شکلی که هم در استفاده از گرید در طراحی گرافیک تأثیر می‌گذاشتند و هم بازتاب‌دهنده آن بودند، از بین رفتند.
استفاده از نرم‌افزارهای اولیه طراحی گرافیک مانند Pagemaker و Photoshop در اواخر دهه ۸۰ و اوایل دهه ۹۰، امکان تغییر شبکه‌ها با یک کلیک موس را فراهم می‌کرد. یک بلوک متن می‌توانست تغییر اندازه داده و دوباره در صفحه بچیند. تصاویر می‌توانستند بچرخند، تحریف شوند و لایه‌بندی شوند. کل انتشارات می‌توانستند سریع و ارزان بر روی صفحه نمایش شبیه‌سازی شوند، بدون اینکه نیاز باشد هر آزمایش به یک فرآیند چاپ پرهزینه اختصاص یابد.
این، دوران جدیدی از آزمایش و تجربه در طراحی گرافیک را آغاز کرد- یکی از واضح‌ترین نمونه‌های تاریخی از این که چگونه ابزارهای فنی جدید و محدودیت‌ها می‌توانند منجر به خلق آثار نوآورانه شوند.
یکی از شناخته‌شده‌ترین چهره‌هایی که از آزمایش‌های دهه ۸۰ و ۹۰ به وجود آمد، دیوید کارسون بود، یک موج‌سوار حرفه‌ای که علاقه‌ای به طراحی گرافیک پیدا کرد و ابتدا از طریق یک دوره دو هفته‌ای طراحی گرافیک در دانشگاه آریزونا، یک دوره کوتاه دیگر در اورگان و یک کارگاه سه هفته‌ای در سوئیس این حرفه را آموخت. کارسون یکی از بهترین مثال‌هاست که نشان می‌دهد چگونه می‌توان بدون رفتن به مدرسه طراحی، به یک طراح تبدیل شد.
کارسون در ابتدای حرفه‌اش روی تعدادی از مجلات اسکیت‌بورد و اسنوبورد کار کرد، اما واقعاً زمانی که برای طراحی مجله Ray Gun استخدام شد، به شهرت رسید. این طراحی‌ها به خاطر تعدادی از هنجارشگنی ها در طراحی گرافیک، از جمله استفاده از گریدهای استاندارد، قابل توجه هستند. با این حال، مهم است که توجه کنیم که دلیل اثربخشی بصری طراحی‌های کارسون این است که آنها همچنان به اصول مهم سازماندهی بصری مانند کنتراست، تعادل و نزدیکی وفادار هستند.
همچنین معمولاً عناصر شبکه‌ای کافی باقی می‌مانند تا هدف اساسی طراحی – ارتباط معنی – حفظ شود. برای مثال، در مقالاتی که در زیر آمده‌اند، اگرچه ستون‌های متن عرض‌های متفاوتی دارند و توسط یک جداکننده (گاتر) از هم جدا نشده‌اند، هر بلوک متن هنوز به یک شبکه پایه‌ای (baseline grid) و مرزهای چپ و راست واضح پایبند است، به این معنا که متن در نهایت قابل خواندن باقی می‌ماند. (اگرچه این مورد برای مقاله‌ای در مورد برایان فری اتفاق نمی‌افتد که کارسون آن را دوست نداشت و به همین دلیل کاملاً با فونت Zapf Dingbats طراحی کرده بود.)
۵. گریدها در طراحی وب و رابط کاربری امروز
سیستم‌های گرید در طراحی گرافیک قرن‌ها (اگر نگوییم هزاره‌ها) دوام آورده‌اند و به آغاز اولین دست‌نوشته‌های زینت‌شده برمی‌گردند. و با وجود آزمایشات ضد طراحی هیجان‌انگیز اواخر قرن بیستم، به‌طور قابل‌ملاحظه‌ای شبکه‌ها هیچ‌گاه به اندازه امروز مورد استفاده نبوده‌اند.
این به دلیل سلطه اینترنت و دستگاه‌های دیجیتال است و به‌ویژه به دلیل نیاز فزاینده برای اینکه وب‌سایت‌ها و اپلیکیشن‌ها خود را با توجه به دستگاهی که در حال استفاده از آن هستند (از تلویزیون‌های بزرگ تا گوشی‌های هوشمند و حتی ساعت‌های کوچک) تغییر اندازه دهند و مجدداً فرم‌دهی کنند. برای طراحان بصری و رابط کاربری امروز، گریدهای ستونی ابزاری ضروری در ایجاد طراحی‌هایی هستند که ساختار کافی برای انعطاف‌پذیری در چندین دستگاه را فراهم می‌کنند.
تداوم طراحی مبتنی بر شبکه در طراحی وب و اپلیکیشن‌ها همچنین چالشی برای توسعه‌دهندگان در شکل‌دهی به استانداردهای وب بوده است. در روزهای اولیه وب، توسعه‌دهندگان معمولاً از جداول برای سازماندهی طرح استفاده می‌کردند. از آن زمان، استانداردها تکامل یافته‌اند و اکنون سیستم‌هایی مانند Flexbox و CSS Grid داریم که یک چارچوب پایه‌ای برای پیاده‌سازی صحیح سیستم‌های شبکه در وب‌سایت‌ها و اپلیکیشن‌ها ارائه می‌دهند.
پیشنهاد مطالعه : نقش طراحی گرافیک بر تجربه کاربری وب سایت
۶. درس گریدها—محدودیت‌ها خلاقیت را تقویت می‌کنند
ما گاهی اوقات محدودیت‌ها را به عنوان چیزی منفی می‌بینیم—به‌ویژه زمانی که صحبت از خلاقیت می‌شود. می‌خواهیم آزاد باشیم تا خود را ثابت کنیم و تخیلات خلاقانه‌ی خود را کشف کنیم.
با این حال، تجربه به ما می‌آموزد که مسائل این‌طور ساده نیستند. همه ما تجربه نشستن مقابل یک صفحه خالی و نداشتن ایده برای شروع را داریم. و وقتی شروع می‌کنیم، احساس می‌کنیم بی‌هدف هستیم و به سرعت دوباره گیر می‌کنیم. اغلب، هیچ پیشرفتی نداریم و در نهایت از ادامه دادن منصرف می‌شویم.
در چنین وضعیتی است که محدودیت‌های خلاقانه به شدت ارزشمند می‌شوند. به جای اینکه خلاقیت ما را محدود کنند، محدودیت‌ها نقطه شروعی به ما می‌دهند و آزادی برای کشف راه‌حل‌های ممکن را فراهم می‌کنند. ارزش محدودیت‌های خلاقانه به همین دلیل است که بهترین طراحان همیشه بر اساس یک دستور طراحی محکم کار می‌کنند که نیازهای پروژه را تعریف می‌کند.
سیستم‌های شبکه‌ای محدودیت‌هایی برای چینش و سازماندهی بصری فراهم می‌کنند که به طور همزمان تعداد گزینه‌های موجود برای طراح را کاهش می‌دهند، اما در عین حال مجموعه وسیعی از احتمالات محدود را نیز می‌گشایند. حتی یک شبکه مدولار ساده می‌تواند هزاران گزینه چینش را در بر داشته باشد.
و حتی برای شورشیان ضد‌طراحی مانند دیوید کارسون، وجود شبکه‌ها و دیگر کنوانسیون‌های طراحی گرافیک در واقع نقطه شروع مهمی در قالب داشتن چیزی برای رد کردن ایجاد کرد.
