سیستم شبکه در طراحی؛ چیدمانی که چشم در آن آرام می‌گیرد

شبکه در طراحی یعنی چه

شبکه (Grid)، مجموعه‌ای از خطوطِ نامرئی است که جایِ قرارگرفتنِ عناصر را تعیین می‌کند: ستون‌ها، فاصله‌ها و خطوطِ شروع. چشمِ مخاطب شبکه را نمی‌بیند اما رفتارِ آن را حس می‌کند؛ صفحه‌ای که روی شبکه ساخته شده، «آرام» به‌نظر می‌رسد و صفحهٔ بدون شبکه، شلوغ — حتی وقتی عناصرش کم است. طراحی با شبکه، مثل نوشتنِ روی خطِ کاغذِ خط‌دار است: آزادیِ کمتر، خواناییِ بیشتر.

• اجزای شبکه: ستون‌ها، حاشیه‌ها (Gutter) و خطوطِ افقیِ راهنما.
• نتیجه: سرعتِ تصمیم‌گیریِ بالاتر برای طراح و پردازشِ آسان‌تر برای چشمِ مخاطب.
• برای مبانیِ کلیِ چیدمان، اصول طراحی برای غیرطراحان پیش‌نیازِ خوبی است.

انواع شبکه‌های رایج

• شبکهٔ ستونی: پرکاربردترین نوع؛ دو تا دوازده ستون که عناصر روی آن‌ها می‌نشینند. در وب، صفحه‌های مدرن معمولاً روی شبکهٔ دوازده‌ستونی ساخته می‌شوند.

• شبکهٔ ماژولار: تقسیمِ صفحه به خانه‌های مساوی؛ مناسبِ گالری و فید.

• شبکهٔ نامتقارن: ستون‌های ناهم‌عرض برای صفحاتی که یک نقطهٔ کانونی سنگین دارند؛ روزنامه‌ها سال‌ها با همین کار می‌کنند.

• خطوطِ افقی: ریتمِ عمودیِ صفحه؛ فاصله‌های مساوی میانِ بخش‌ها، حسِ نظم می‌دهد حتی وقتی محتوا متفاوت است.

شبکه در محتوای روزمره

• پستِ شبکه‌های اجتماعی: سه‌ستونه یا دو‌ستونه در پروفایل؛ الگوی نگاهِ مخاطب به صفحهٔ شما، با شبکه ساخته می‌شود.

• کاور و کارت‌های خبری: تیترِ هم‌خط در همهٔ کارت‌ها؛ یکدستیِ خطِ تیترها، از خودِ زیباییِ هر کارت بیشتر به چشم می‌آید.

• متنِ بلند: طول خط و فاصلهٔ سطر، خودشان شبکه‌اند؛ در تایپوگرافی فارسی برای وب حدودِ درستِ آن‌ها آمده است.

چطور شروع کنیم

• روز اول: روی طراحی‌های موردعلاقه‌تان، خطوطِ شبکه را با خودکار بکشید؛ پشتِ هر صفحهٔ خوب، شبکه‌ای پیدا می‌شود. همین تمرین، چشمِ شما را به شبکه‌بین تبدیل می‌کند.

• هفتهٔ اول: اولین صفحهٔ خودتان را با شبکهٔ شش‌ستونی بسازید؛ ستون‌ها را در ابزار طراحی روشن کنید و هیچ عنصری را بیرون از ستون نگذارید.

• ماهِ اول: در ابزارِ اصلیِ کار، شبکه را عادت کنید؛ راه‌اندازیِ درست در آموزش فیگما از صفر توضیح داده شده است — Layout Grid در فیگما برای همین ساخته شده.

• برای صفحه‌های محصول، مسیرِ مرحله‌ایِ طراحی در از وایرفریم تا طرح نهایی با شبکه بهتر جواب می‌دهد؛ وایرفریم، جایِ اولِ دیدنِ خطوط است.

قانون‌شکنی، بعد از قانون

شبکه را که بلد باشید، شکستنِ آگاهانه‌اش، ابزارِ شما می‌شود؛ عنصری که عمداً از شبکه بیرون می‌زند، جلبِ توجه می‌کند چون «قاعده‌شکنی» است:

• قاعدهٔ درست: اول شبکه را کامل اجرا کنید، بعد در یک نقطهٔ کانونی، شکستنِ آن را به‌عنوانِ تأکید به‌کار بگیرید — نه پراکنده و نه هر صفحه.

• نشانهٔ بلد‌بودن: وقتی بدون شبکه، صفحه‌ی شما همچنان منظم به‌نظر می‌رسد، یعنی شبکه به چشمِ شما نشسته است؛ چشمِ تربیت‌شده، شبکه را در نبودش هم می‌سازد.

• هشدارِ آخر: شکستنِ قاعده، ابزارِ تأکید است نه راهِ فرار از نظم؛ روزی که قانون‌شکنیِ شما با قانون شروع شود، مخاطب تفاوت را حس می‌کند، حتی اگر اسمِ چیزی که می‌بیند را نداند.