پث‌وایز

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

کنتراست: چیزهای متفاوت رو واقعاً متفاوت کن

سلسله‌مراتب با کنتراست کار می‌کنه و کنتراست ترسو شبیه اشتباه به نظر میاد. چهار نوع کنتراست رو می‌شناسی و می‌فهمی یه تفاوت چقدر باید بزرگ باشه تا عمدی دیده بشه.

ایده‌ی اصلی

کنتراست و تضاد بصری (Contrast)

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

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

یه صفحه گزارش، دو مدل تیتر

ترسو

متن ۱۲ پوینت معمولیه. تیتر ۱۳ پوینته با یه خاکستری کمی تیره‌تر. باید دو بار نگاه کنی تا مطمئن بشی تیتره. بعضی‌ها فکر می‌کنن پرینتر خراب بوده.

مطمئن

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

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

  1. تیتر ۱۳ پوینت، متن ۱۲ پوینت: خواننده می‌پرسه این اختلاف اشتباه تایپیه؟
  2. تیتر ۲۴ پوینت، متن ۱۲ پوینت: خواننده فوری می‌فهمه تیتره.

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

  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)