پث‌وایز

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

ترکیب‌بندی و نقطه‌ی کانونی (Focal Point)

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

ایده‌ی اصلی

نقطه‌ی کانونی (Focal Point)

نقطه‌ی کانونی (Focal Point) همون یه عنصریه که نگاه اول رو می‌بره. هر صفحه دقیقاً یکی داره. دو تا نقطه‌ی کانونی یعنی هیچی: چشم بینشون بالا پایین می‌شه و رو هیچ‌کدوم نمی‌شینه. انتخاب یکی سخته، چون یعنی بقیه باید عقب بکشن. کار اصلی همون عقب کشیدنه.

یه تبلیغ غذا که هم عکس غذا قاب رو پر کرده، هم اون گوشه یه برچسب «۵۰٪ تخفیف» به همون بزرگی نشسته. دو ثانیه بعد نه غذا یادت مونده نه عدد.

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

دو تا قهرمان

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

یه قهرمان

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

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

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

  1. پشت متن یه کادر رنگی بذاره که از عکس جدا بشه
  2. لوگو رو ببره گوشه‌ی روبه‌رو
  3. عکس رو کوچیک‌تر کنه که برای همه‌چی جا باز بشه
  4. لوگو و «جدید» رو واضح کوچیک کنه تا فقط غذا نگاه اول رو ببره
جواب رو ببین

لوگو و «جدید» رو واضح کوچیک کنه تا فقط غذا نگاه اول رو ببره

آره. سه تا چیز با یه قدرت داشتن رقابت می‌کردن. یه قهرمان و بقیه آروم، و پست دیگه شلوغ نیست بدون اینکه چیزی کم بشه.

کجا بذاریش

قانون یک‌سوم‌ها (Rule of Thirds)

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

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

یه صفحه‌ی ۳ در ۳ روی پوسترت تصور کن.

  [ ۱ ][ ۲ ][ ۳ ]
  [ ۴ ][ ۵ ][ ۶ ]
  [ ۷ ][ ۸ ][ ۹ ]

چهار نقطه‌ی تلاقی، گوشه‌های داخلی
خونه‌های ۱، ۳، ۷ و ۹ هستن؛ جایی که خط‌ها به هم می‌رسن.

پوستر سفالگری (فارسیه، پس خونه‌ی ۱ بالا سمت راسته):
  عنوان         خونه‌های ۱ و ۲، از اولین نقطه‌ی تلاقی
  تاریخ و مکان  خونه‌های ۷ و ۸
  خونه‌های ۳، ۶ و ۹   خالی

خروجی

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

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

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

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

جواب رو ببین

نادرست

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

دو مسیری که چشم می‌ره

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

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

هر صفحه رو به مسیری که خواننده‌ش احتمالاً طی می‌کنه وصل کن

جواب رو ببین
  • پوستری با یه عکس، شش کلمه و یه شماره تلفن → مسیر Z: قهرمان اول مسیر، کار خواسته‌شده آخرش
  • یه مقاله‌ی طولانی با تیتر و پاراگراف → مسیر F: دو سه کلمه‌ی اول هر تیتر کار رو می‌کنه
  • کارت عروسی → وسط‌چین و متقارن: رسمی و ساکن
  • تابلوی یه مغازه‌ی فارسی → همون مسیرها، آینه‌شده: چشم از بالا سمت راست شروع می‌کنه

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

این به نقطه‌ی کانونی کمک می‌کنه یا باهاش می‌جنگه؟

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

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

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

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

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

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

خط ثبت‌نام رو بذاره آخر مسیر خوندن، با قدرت سطح ۲

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

مرور درس

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

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

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

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)