پث‌وایز

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

فضای خالی و یه سیستم فاصله‌گذاری

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

ایده‌ی اصلی

فضای منفی یا خالی (Whitespace): فضا ابزاره، نه اسراف

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

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

مکث تو حرف زدن

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

یه اسلاید، دو مدل

پُر

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

نفس‌دار

سه تا بولت با ۲۸ پوینت. حاشیه‌ی پهن از همه طرف. یک‌سوم اسلاید خالی. شش نکته‌ی دیگه رفتن تو دو اسلاید بعدی. مخاطب تو پنج ثانیه می‌خونه و دوباره به ارائه‌دهنده نگاه می‌کنه.

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

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

  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)