سیستم گرید در طراحی لوگو: تراز، تعادل و ساختار

گرید، اسکلت نامرئی لوگو

بهترین لوگوها «اتفاقی» به نظر نمی‌رسند. پشت سادگی ظاهری، سیستم گرید و نسبت‌های هندسی قرار دارد.

«گرید، ابزار آزادی است — نه زندان.» — جوزف مولر-برکمان

اصول استفاده از گرید

1. شروع با گرید، پایان با چشم — گرید راهنماست
2. تقارن و عدم تقارن — هر دو معتبر
3. optical alignment — تراز بصری گاهی مهم‌تر از ریاضی
4. فضای حفاظتی — حاشیه اطراف لوگو

گرید در فارسی

در طراحی لوگوی فارسی، baseline حروف و ارتفاع سطر با لاتین متفاوت است. گرید باید RTL-aware باشد.

نمونه SVG با viewBox

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <!-- گرید ۱۰×۱۰ -->
  <line x1="50" y1="0" x2="50" y2="100" stroke="#e4e4e7" stroke-width="0.5"/>
  <line x1="0" y1="50" x2="100" y2="50" stroke="#e4e4e7" stroke-width="0.5"/>
  <circle cx="50" cy="50" r="30" fill="#2563eb"/>
</svg>

تمرین

لوگوی ساده‌ای در گرید ۸×۸ طراحی کنید. آیا در ۳۲px هم متعادل است؟

جمع‌بندی

گرید به اصول طراحی ساختار می‌دهد. در Figma از Layout Grid استفاده کنید.