پث‌وایز

اصول طراحی بصری (Visual Design Fundamentals) · درس ۵ از ۱۲ · ۱۲ دقیقه

گرید و تعادل

گرید قبل از اینکه بپرسی «اینو کجا بذارم؟» جوابت رو داده. یاد می‌گیری ستون، حاشیه و فاصله‌ی ستون‌ها رو بچینی و صفحه رو یا متقارن یا با یه وزنه‌ی مقابل متعادل کنی.

ایده‌ی اصلی

سیستم شبکه‌بندی یا گرید (Grid System)

صفحه رو به چندتا ستون برابر تقسیم کن. دورتادورش یه حاشیه بذار و بین ستون‌ها یه فاصله‌ی ثابت. بعد فقط یه قانون: هر عنصر روی خط یه ستون شروع و روی خط یه ستون تموم می‌شه. یه عکس یک، دو یا سه ستون پهنا داره، نه دو ستون و یه خرده. این همون هم‌ترازی درس ۳ـه که از قبل براش نقشه کشیدی.

یه صفحه‌ی روزنامه با ده‌ها خبر باز هم منظم به نظر میاد، چون هر خبر، عکس و آگهی دقیقاً به اندازه‌ی چندتا ستون کامل پهنا داره.

گرید پوستر: ۴ ستون، حاشیه ۳۲، فاصله‌ی ستون‌ها ۱۶

ردیف ۱   عنوان                  ستون ۱ تا ۴
ردیف ۲   عکس                    ستون ۱ تا ۲
         متن                    ستون ۳ تا ۴
ردیف ۳   چهار کادر کوچیک        هر کدوم یه ستون
ردیف ۴   خط ثبت‌نام             ستون ۱ تا ۴

خروجی

همه‌ی لبه‌های راست و چپ روی یکی از پنج تا خط می‌افتن.
هیچی «همین حدودا» نیست.

حاشیه و فاصله‌ی ستون‌ها از همون نردبون درس ۴ میان. برای پوستر و اسلاید دو، سه یا چهار ستون کاملاً کافیه. صفحه‌ی موبایل معمولاً یه ستونه با یه حاشیه‌ی کناری. تو فارسی ستون ۱ سمت راسته.

خودت رو امتحان کن

تو ارائه‌ی ۱۲ اسلایدی نگار، متن تو هر اسلاید از یه جای متفاوت شروع می‌شه و موقع ورق زدن عنوان‌ها بالا و پایین می‌پرن. بهترین راه درست کردنش چیه؟

  1. هر اسلاید رو چشمی جابه‌جا کنه تا خوب به نظر بیاد، چون بالأخره محتوای هر اسلاید یه کم فرق داره
  2. روی اسلاید قالب یه گرید بذاره و همه‌چی رو روی همون بچینه
  3. متن همه‌ی اسلایدها رو وسط‌چین کنه، که حداقل نقطه‌ی شروع هر بار یکی باشه
  4. بالای هر اسلاید یه نوار رنگی بذاره که پریدن‌ها معلوم نشه
جواب رو ببین

روی اسلاید قالب یه گرید بذاره و همه‌چی رو روی همون بچینه

آره. یه گرید که یه بار تنظیم شده همه‌ی اسلایدها رو تو یه اسکلت نگه می‌ده. پریدن تموم می‌شه و ارائه یه‌تیکه به نظر میاد.

دستورهای گرید

  • ۲، ۳ یا ۴ ستون انتخاب کن. ستون بیشتر یعنی انتخاب بیشتر، و راه بیشتر برای خراب کردن.
  • حاشیه‌ی دو طرف برابر باشه و فاصله‌ی ستون‌ها رو از نردبون فاصله‌هات بردار: ۱۶ یا ۲۴.
  • پهنای هر عنصر چندتا ستون کامل باشه.
  • تو همه‌ی صفحه‌های یه ارائه، منو یا گزارش از یه گرید استفاده کن.
  • گرید رو یه بار و عمدی بشکن، برای همون یه چیزی که باید به چشم بیاد: عکسی که از لبه بیرون می‌زنه، عنوانی که از روی همه‌ی ستون‌ها رد می‌شه.

خودت رو امتحان کن

  1. صفحه‌ی الف: سه تا عکس با پهنای ۳۷٪، ۵۲٪ و ۴۵٪ صفحه. به‌هم‌ریخته به نظر میاد.
  2. صفحه‌ی ب: سه تا عکس با پهنای ۱، ۲ و ۳ ستون. منظم به نظر میاد.

چی این تفاوت رو توضیح می‌ده؟

  1. همه‌ی عکس‌ها باید هم‌اندازه باشن
  2. پهناهایی که از چندتا اندازه‌ی مشترک میان منظم دیده می‌شن؛ پهناهای چشمی تصادفی دیده می‌شن
  3. عکس کوچیک‌تر همیشه مرتب‌تره
  4. هر صفحه باید دقیقاً سه تا عکس داشته باشه
جواب رو ببین

پهناهایی که از چندتا اندازه‌ی مشترک میان منظم دیده می‌شن؛ پهناهای چشمی تصادفی دیده می‌شن

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

فکر دوم

تعادل و وزن بصری

هر عنصر یه وزن بصری داره: یعنی چقدر چشم رو به خودش می‌کشه. چیزهای بزرگ، تیره، پررنگ، فشرده یا پرجزئیات سنگینن. چیزهای کوچیک، کم‌رنگ و ساده سبکن. صفحه وقتی متعادله که وزن یه طرف با وزن طرف دیگه جواب داده بشه. اگه نشه، صفحه انگار داره چپه می‌شه.

یه عکس بزرگ تیره و یه لوگوی تیره هر دو یه طرف، و اون طرف فقط دو خط نازک خاکستری: صفحه به یه سمت کج شده و نصف دیگه‌ش انگار فراموش شده.

دو راه برای تعادل

متقارن

دو نیمه دور یه خط وسط آینه‌ی همن. عنوان وسط، متن وسط، مُهر وسط. حس رسمی، آروم و محکم می‌ده. برای کارت دعوت، گواهی و اسلاید عنوان خوبه. خطرش اینه که بی‌حرکت بشه.

نامتقارن

دو نیمه فرق دارن ولی هم‌وزنن. یه عکس بزرگ یه طرف، و طرف دیگه یه عنوان بولد با یه بلوک متن، یا یه لکه‌ی کوچیک پررنگ با فاصله‌ی زیاد، جوابش رو می‌ده. حس زنده و امروزی می‌ده. برای پوستر، پست و بیشتر اسلایدها خوبه.

الاکلنگ

دو تا بچه‌ی هم‌وزن با فاصله‌ی برابر از وسط متعادل می‌شن: این تقارنه. یه بچه‌ی سنگین نزدیک وسط با یه بچه‌ی سبک که ته الاکلنگ نشسته متعادل می‌شه: این عدم تقارنه. روی صفحه هم یه دکمه‌ی کوچیک پررنگ که از یه عکس بزرگ خاکستری دوره، همین‌جوری از پسش برمیاد. جایی که این تشبیه جواب نمی‌ده: صفحه جاذبه‌ی واقعی نداره. وزن رو چشم قضاوت می‌کنه، و بالا و پایین هم مثل چپ و راست حسابه.

خودت رو امتحان کن

تعادل متقارن یا نامتقارن؟

  • کارت عروسی‌ای که همه‌ی خط‌هاش وسط‌چینه
  • پوستری که یه طرفش یه عکس بزرگه و طرف دیگه‌ش یه بلوک متن
  • گواهی‌ای که مُهرش پایین، وسط صفحه‌ست
  • اسلایدی با یه عدد خیلی بزرگ یه طرف و یه برچسب کوتاه اون سر صفحه
  • صفحه‌ی ورود: لوگو، دو تا فیلد و یه دکمه که زیر هم وسط صفحه چیده شدن
  • صفحه‌ی مجله‌ای که دوسومش عکسه و یک‌سومش یه ستون متن
جواب رو ببین

متقارن: کارت عروسی‌ای که همه‌ی خط‌هاش وسط‌چینه, گواهی‌ای که مُهرش پایین، وسط صفحه‌ست, صفحه‌ی ورود: لوگو، دو تا فیلد و یه دکمه که زیر هم وسط صفحه چیده شدن

نامتقارن: پوستری که یه طرفش یه عکس بزرگه و طرف دیگه‌ش یه بلوک متن, اسلایدی با یه عدد خیلی بزرگ یه طرف و یه برچسب کوتاه اون سر صفحه, صفحه‌ی مجله‌ای که دوسومش عکسه و یک‌سومش یه ستون متن

خودت رو امتحان کن

پوستر نگار عکس رو روی دو ستون چپ گذاشته و همه‌ی متن رو تو ستون راست، هیچی هم وسط‌چین نیست. این چیدمان بیشتر از یه چیدمان وسط‌چین به گرید تکیه داره.

جواب رو ببین

درست

درسته. چیدمان وسط‌چین خط وسط رو داره که همه‌چی رو کنار هم نگه می‌داره. اون رو که برداری، تنها چیزی که نمی‌ذاره یه چیدمان زنده پخش‌وپلا به نظر بیاد خط‌های مشترک ستون‌هاست که هر دو طرف ازشون شروع می‌شن. دو طرف متفاوت، یه اسکلت.

خودت رو امتحان کن

پوستر امید یه عکس بزرگ تیره بالای یه طرفش داره و یه لوگوی تیره هم زیرش، همون طرف. طرف دیگه فقط دو خط نازک خاکستریه. انگار پوستر داره چپه می‌شه. بهترین اصلاح چیه؟

  1. یه عنصر سنگین، مثلاً یه عنوان بزرگ بولد، ببره طرف سبک
  2. متن خاکستری رو ریزتر کنه که با عکس رقابت نکنه
  3. یه عکس تیره‌ی دیگه هم زیر اولی بذاره که اون طرف عمدی به نظر بیاد
  4. دور کل پوستر یه کادر بکشه که دو طرف رو کنار هم نگه داره
جواب رو ببین

یه عنصر سنگین، مثلاً یه عنوان بزرگ بولد، ببره طرف سبک

آره. همه‌ی وزن یه طرف تلنبار شده بود. یه عنوان بولد اون طرف جواب عکس رو می‌ده؛ پوستر صاف وامیسته و زنده هم می‌مونه.

مرور درس

  • گرید یعنی چندتا ستون برابر با حاشیه و فاصله‌ی ثابت. هر عنصر روی خط ستون شروع و تموم می‌شه.
  • ۲ تا ۴ ستون بذار، تو همه‌ی صفحه‌ها همون گرید رو نگه بده، و فقط یه بار عمدی بشکنش.
  • وزن بصری از اندازه، تیرگی، پررنگی و فشردگی میاد.
  • تعادل متقارن رسمی و آرومه؛ تعادل نامتقارن با وزنه‌ی مقابل کار می‌کنه و زنده‌ست. نامتقارن بیشتر از همه گرید لازم داره.
  • تو چیدمان راست‌به‌چپ گرید آینه می‌شه: ستون ۱ سمت راسته.

فقط نخونش، نگهش دار

پث‌وایز هر ایده رو درست قبل از اینکه فراموشش کنی با یه سؤال کوتاه برمی‌گردونه. رایگان روی اندروید و وب، به فارسی و انگلیسی.

Cafe Bazaar Myket باز کردن نسخه‌ی وب

همه‌ی درس‌های این دوره

  1. سلسله‌مراتب بصری (Visual Hierarchy): اول به چی نگاه می‌کنم؟
  2. کنتراست: چیزهای متفاوت رو واقعاً متفاوت کن
  3. هم‌ترازی و نزدیکی
  4. فضای خالی و یه سیستم فاصله‌گذاری
  5. گرید و تعادل
  6. ترکیب‌بندی و نقطه‌ی کانونی (Focal Point)
  7. تئوری رنگ: فام، اشباع و روشنایی (Color Theory: HSL)
  8. ساختن یه پالت
  9. تایپوگرافی‌ای که خوب خونده می‌شه
  10. چطور یه طرح رو نقد کنی
  11. یه پوستر بساز، قدم به قدم
  12. ده اشتباه رایج طراحی و چک‌لیست بازبینی (Design Mistakes & Audit Checklist)