پث‌وایز

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

سلسله‌مراتب بصری (Visual Hierarchy): اول به چی نگاه می‌کنم؟

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

ایده‌ی اصلی

سلسله‌مراتب بصری (Visual Hierarchy)

سلسله‌مراتب بصری (Visual Hierarchy) یعنی ترتیبی که چشم سراغ چیزهای روی صفحه می‌ره. آدم‌ها پوستر رو از کلمه‌ی اول تا آخر نمی‌خونن. یه نگاه می‌ندازن، چشمشون روی پرسروصداترین چیز می‌شینه و تو یکی دو ثانیه تصمیم می‌گیرن ادامه بدن یا نه. هر صفحه‌ای یه سلسله‌مراتب داره. سؤال فقط اینه که تو انتخابش کردی یا نه.

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

یه پوستر کارگاه، دو بار

نسخه‌ی الف: صاف

هشت خط، همه وسط‌چین، همه ۲۰ پوینت، همه بولد. اسم کارگاه، مدرس، تاریخ، مکان، قیمت، تلفن، لوگو و «ظرفیت محدود». هیچی غلط نیست، ولی هیچی هم اول نیست. چشمت از روش سُر می‌خوره.

نسخه‌ی ب: دارای سلسله‌مراتب بصری مشخص (Visual Hierarchy)

«سفالگری تو یه روز» با ۶۰ پوینت یک‌سوم بالای صفحه رو پر کرده. زیرش تاریخ و مکان با ۲۸ پوینت. بقیه با ۱۶ پوینت و رنگ خاکستری رفتن پایین. کلمه‌ها همونن. ولی حالا تو یه ثانیه می‌فهمی چیه و تو سه ثانیه می‌فهمی کجا باید بری.

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

نگار همه‌ی خط‌های پوستر بازارچه‌ی خیریه رو ۱۸ پوینت و بولد کرده که «هیچی از قلم نیفته». دوست‌هاش می‌گن تاریخ رو ندیدن. مشکل اصلی چیه؟

  1. فونتش خیلی ساده‌ست و یه فونت تزئینی‌تر پوستر رو اون‌قدر خاص می‌کنه که آدم بخونتش
  2. همه‌ی خط‌ها یه اندازه قوی‌ان، پس چشم ایستگاه اول نداره
  3. متن پوستر کمه، برای همین تاریخ دور و برش چیزی نداره که بهش وزن بده
  4. متن بولد سخت‌تر خونده می‌شه، پس ۱۸ پوینت بولد تاریخ رو قایم می‌کنه
جواب رو ببین

همه‌ی خط‌ها یه اندازه قوی‌ان، پس چشم ایستگاه اول نداره

آره. وقتی همه‌ی خط‌ها با یه صدا داد می‌زنن، هیچ‌کدوم شنیده نمی‌شه. تاریخ باید واضح از خط‌های دورش قوی‌تر باشه.

چهار اهرم

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

سطح ۲  (دو سه چیز)        ۲۴ پوینت، معمولی، تیره
جمعه ۲۵ خرداد · استودیو گِل

سطح ۳  (بقیه‌ی چیزها)      ۱۴ پوینت، معمولی، خاکستری
همه‌ی وسایل با ماست. تماس: ۰۹۱۲ ۰۰۰ ۰۰۰۰

خروجی

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

سه سطح تقریباً برای هر چیزی که می‌سازی کافیه. اگه سطح چهارم لازم شد، احتمالاً زیادی چیز روی صفحه گذاشتی.

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

داری برای یه شب فیلم رایگان پوستر می‌سازی. هر مورد مال کدوم سطحه؟

  • «شب فیلم رایگان»
  • پنجشنبه، ساعت ۷ عصر
  • سالن دانشگاه، ساختمان ۲
  • برگزارکننده: کانون فیلم دانشجویی
  • خوراکی با خودت بیار
جواب رو ببین

سطح ۱: اول دیده بشه: «شب فیلم رایگان»

سطح ۲: بعدش دیده بشه: پنجشنبه، ساعت ۷ عصر, سالن دانشگاه، ساختمان ۲

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

تست چشم نیمه‌باز

  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)