ساختن یه پالت
«این رنگ‌ها رو دوست دارم» رو تبدیل می‌کنی به یه مجموعه‌ی کوچیک کارراه‌انداز: یه رنگ برند، دو تا خنثی، یه رنگ تأکید، که با قانون ۶۰-۳۰-۱۰ پخش می‌شن و با نسبت کنتراست خوانا چک می‌شن.
دستور
پالت رنگی (Color Palette): رنگ اصلی، رنگ‌های خنثی و رنگ تأکید
پالت کارراه‌انداز کوچیک‌تر از چیزیه که آدم فکر می‌کنه. دو تا رنگ خنثی (یه تقریباً سفید و یه تقریباً مشکی یا خاکستری تیره) بیشتر صفحه رو می‌برن. یه رنگ برند کار شناسایی رو می‌کنه: تیترها، لوگو، بلوک‌های رنگی. یه رنگ تأکید رو هم نگه می‌داری برای همون یه چیزی که حتماً باید دیده بشه. همین. چهار تا تصمیم، نه شونزده تا.
هر اپ معروفی که ازش استفاده می‌کنی رو تصور کن. عکس‌ها رو که برداری، معمولاً می‌مونه سفید، یه خاکستری تیره برای متن، یه رنگ که باهاش می‌شناسنش، و یه رنگ پررنگ که فقط روی دکمه‌ای میاد که می‌خوان بزنی.
یه پالت رو تو پنج قدم بساز
- ۱. خنثی‌هات رو انتخاب کن
یه تقریباً سفید برای پس‌زمینه و یه تقریباً مشکی یا خاکستری تیره برای متن. بیشتر صفحه همین دوتان. اگه یه ذره به سمت فام برندت ته‌رنگشون بدی حس می‌کنن مال همون خانواده‌ان، ولی خیلی کم.
- ۲. یه رنگ برند انتخاب کن
یه فام که باهاش شناخته می‌شی. اگه لوگو داری، رنگ رو مستقیم از خودش بردار. اگه از صفر شروع می‌کنی، فامی رو بردار که به حس کارت بخوره: سرد برای آروم و جدی، گرم برای زنده و فوری.
- ۳. ازش سه نسخه بساز
همون فام با سه تا تنظیم روشنی، مثل درس ۷: یه کم‌رنگ برای پس‌زمینه، یه متوسط برای بلوک و دکمه، یه تیره برای متن. یه رنگ که سه تا کار می‌کنه.
- ۴. یه رنگ تأکید اضافه کن
واضح متفاوت از رنگ برند، معمولاً از اون سر دایره‌ی رنگ. تنها کارش همون چیزیه که باید دیده بشه: یه قیمت، یه دکمه، یه مهلت. اگه پنج بار بیاد، دیگه رنگ تأکید نیست.
- ۵. هر جفتی رو که واقعاً استفاده می‌کنی چک کن
متن روی پس‌زمینه‌ش، سفید روی دکمه، رنگ تأکید روی سفید. رد‌شده‌ها رو همین حالا درست کن، که چهار تا رنگ داری، نه بعداً که چهل صفحه داری.
خودت رو امتحان کن
سارا برای منوی کافه‌ش شیش تا رنگ که دوست داره انتخاب می‌کنه: دو تا سبز، یه خردلی، یه زرشکی، یه فیروزه‌ای و یه صورتی. منو به‌هم‌ریخته به نظر میاد. چی کار کنه؟
- هر شیش‌تا رو نگه داره و به هر دسته‌ی غذا یه رنگ بده که مشتری از هم تشخیصشون بده
- دوتایی که بیشتر دوست داره رو برداره و صفحه به صفحه بینشون بچرخه
- فقط از سیاه و سفید استفاده کنه که هیچی با هیچی نجنگه
- یکی رو به‌عنوان رنگ برند نگه داره، خنثی اضافه کنه، یه رنگ تأکید اجازه بده
جواب رو ببین
یکی رو به‌عنوان رنگ برند نگه داره، خنثی اضافه کنه، یه رنگ تأکید اجازه بده
آره. شیش تا رنگ یعنی هیچ رنگی مال اون نیست. یکی از سبزها می‌شه رنگ کافه، خنثی‌ها بار اصلی رو می‌برن، و یکی از بقیه می‌تونه به‌عنوان رنگ تأکید «پیشنهاد امروز» زنده بمونه.
از هر کدوم چقدر
۶۰-۳۰-۱۰
داشتن رنگ‌های درست کافی نیست؛ مقدارشون تعیین می‌کنه صفحه چه حسی می‌ده. یه قاعده‌ی سرانگشتی به‌دردبخور که از طراحی داخلی اومده: حدود ۶۰٪ سطح مال رنگ خنثی غالبه، حدود ۳۰٪ مال رنگ دوم، و حدود ۱۰٪ مال رنگ تأکید. کسی این‌ها رو اندازه نمی‌گیره. فقط یادآوریه که رنگ تأکید یه قاشق چای‌خوریه، نه یه لیوان.
یه اتاق با دیوار سفید، مبل سبز و دو تا کوسن نارنجی. حالا مقدارها رو جابه‌جا کن: دیوار نارنجی و یه کوسن سفید. همون سه رنگ، ولی حالا خسته‌کننده‌ست.
پالت یه منوی کافه
نقش رنگ کجا می‌ره سهم
خنثی تقریباً سفید خود صفحه ۶۰
خنثی تقریباً مشکی اسم غذاها و قیمت‌ها -
برند سبز تیره اسم بخش‌ها، لوگو ۳۰
تأکید نارنجی گرم پیشنهاد امروز، یه برچسب ۱۰
چک کنتراست (یه چکر آنلاین رایگان عدد رو بهت می‌ده)
تقریباً مشکی روی تقریباً سفید حدود ۱۶ به ۱ قبول
سبز تیره روی تقریباً سفید حدود ۷ به ۱ قبول
نارنجی گرم روی تقریباً سفید حدود ۲ به ۱ رد، به‌عنوان متن
← به‌جاش یه شکل توپر
بساز و متن سفید
روش بذارچهار تا رنگ. هر جفتی که کلمه حمل می‌کنه چک شده.
نارنجی هیچ‌وقت روی سفید متن نمی‌شه؛ برچسب می‌شه.مشکی خالص روی سفید خالص می‌شه ۲۱ به ۱، بالاترین عدد ممکن. ۱ به ۱ یعنی دو تا رنگ دقیقاً یکی‌ان.
خودت رو امتحان کن
تو یه پالت ۶۰-۳۰-۱۰، هر کدوم از این‌ها مال کدوم سهمه؟
- پس‌زمینه‌ی تقریباً سفید همه‌ی اسلایدها
- متن خاکستری تیره‌ای که بیشتر صفحه رو پر کرده
- یه نوار به رنگ برند پشت عنوان هر اسلاید
- تیتر بخش‌ها با رنگ برند
- یه دکمه‌ی نارنجی «رزرو کن»
- تنها قیمتی که تو منو هایلایت شده
جواب رو ببین
۶۰: غالب: پس‌زمینه‌ی تقریباً سفید همه‌ی اسلایدها, متن خاکستری تیره‌ای که بیشتر صفحه رو پر کرده
۳۰: دوم: یه نوار به رنگ برند پشت عنوان هر اسلاید, تیتر بخش‌ها با رنگ برند
۱۰: تأکید: یه دکمه‌ی نارنجی «رزرو کن», تنها قیمتی که تو منو هایلایت شده
نسبت کنتراست (Contrast Ratio)
یه عدد که روشنی دو تا رنگ رو مقایسه می‌کنه، از ۱ به ۱ (کاملاً یکی) تا ۲۱ به ۱ (مشکی خالص روی سفید خالص). راهنماهای دسترس‌پذیری رایج می‌خوان بین متن معمولی و پس‌زمینه‌ش حداقل ۴٫۵ به ۱ باشه، و برای متن درشت ۳ به ۱؛ متن درشت یعنی تقریباً ۱۸ پوینت به بالا، یا ۱۴ پوینت بولد به بالا. چکرهای آنلاین رایگان تو چند ثانیه عدد رو بهت می‌دن.
مشکی روی سفید می‌شه ۲۱ به ۱. یه خاکستری متوسط روی سفید حدود ۴٫۵ به ۱ در میاد، درست لب مرز. هر چی کم‌رنگ‌تر از اون باشه به‌عنوان متن اصلی رد می‌شه، هر چقدر هم رو لپ‌تاپ پرنور تو، توی اتاق، قشنگ به نظر بیاد.
خودت رو امتحان کن
متن خاکستری روشن روی پس‌زمینه‌ی سفید شیک به نظر میاد، پس برای متن اصلی یه مقاله‌ی طولانی انتخاب خوبیه.
جواب رو ببین
نادرست
متن ریز همیشه حدود ۴٫۵ به ۱ با پس‌زمینه‌ش لازم داره، هر کاری هم که بکنه. خاکستری روشن روی سفید معمولاً حدود ۲ به ۱ در میاد، که زیر نور زیاد و برای هر کسی که چشمش عالی نیست محو می‌شه. اگه می‌خوای متن سبک‌تر حس بشه، کوچیک‌ترش کن یا دورش فضای بیشتری بذار، ولی رنگ رو تیره نگه دار.
رنگی که همه بتونن ازش استفاده کنن
- تقریباً از هر دوازده مرد یکی و نسبت خیلی کمتری از زن‌ها رنگ‌ها رو جور دیگه‌ای می‌بینن؛ قرمز و سبز جفتی‌ان که بیشتر از همه با هم قاطی می‌شن.
- پس هیچ‌وقت نذار رنگ تنها نشونه باشه. یه کلمه، یه آیکون، یه تیک و ضربدر، یه جایگاه یا یه بافت هم اضافه کن.
- قرمز برای خطا و سبز برای موفقیت مشکلی نداره، به شرطی که پیام هم بگه «خطا» یا «انجام شد».
- تو نمودار، تفاوت رنگ‌ها رو فقط به فام نسپار. کاری کن برش‌ها یا خط‌ها تو روشنی هم فرق داشته باشن تا تو حالت خاکستری هم از هم جدا بشن.
- هر طرحی رو مثل درس ۷ خاکستری چک کن. اگه از این تست رد شد، از پس بیشتر چشم‌ها و بیشتر پرینترها هم برمیاد.
خودت رو امتحان کن
هر مشکل پالت رو به راه‌حلش وصل کن
جواب رو ببین
- تنها نشونه‌ی قبولی و ردی، نقطه‌های قرمز و سبزه → یه کلمه یا یه تیک و ضربدر اضافه کن
- متن اصلی با پس‌زمینه‌ش ۳ به ۱ در میاد → متن رو تیره‌تر کن تا به ۴٫۵ به ۱ برسه
- شیش تا رنگ تو یه صفحه با هم رقابت می‌کنن → یه رنگ برند، خنثی‌ها، یه رنگ تأکید
- رنگ تأکید روی یکی در میون عنصرها اومده → نگهش دار برای همون یه چیزی که باید دیده بشه
خودت رو امتحان کن
نیما یه اسلاید رو چک می‌کنه: متن سفید روی آبی روشن برندش. چکر می‌گه ۲٫۱ به ۱. باید آبی برند یه جای اسلاید بمونه. بهترین اصلاح چیه؟
- ولش کنه، چون ویدئوپروژکتور همه‌چی رو روشن‌تر می‌کنه و سالن هم که تاریکه
- متن رو بولد و یه کم بزرگ‌تر کنه، که دیگه شرط کنتراست لازم نباشه
- آبی رو تیره کنه تا متن سفید به ۴٫۵ به ۱ برسه، یا روی آبی روشن متن تیره بذاره
- پشت هر حرف یه سایه‌ی نازک بندازه
جواب رو ببین
آبی رو تیره کنه تا متن سفید به ۴٫۵ به ۱ برسه، یا روی آبی روشن متن تیره بذاره
درسته. کنتراست یه رابطه بین دو تا رنگه، پس با جابه‌جا کردن یکیشون روی پیچ روشنی درستش می‌کنی. همون فام برند، اسلاید خوانا.
مرور درس
- پالت یعنی دو تا خنثی، یه رنگ برند تو سه روشنی مختلف، و یه رنگ تأکید. چهار تا تصمیم.
- ۶۰-۳۰-۱۰ سهم تقریبیه: خنثی غالب، رنگ دوم، و یه قاشق‌چای‌خوری رنگ تأکید.
- متن معمولی حدود ۴٫۵ به ۱ با پس‌زمینه‌ش لازم داره؛ متن درشت ۳ به ۱. با یه چکر رایگان چک کن.
- خاکستری کم‌رنگ روی سفید رایج‌ترین اشتباه خواناییه. به‌جای اعتماد به صفحه‌نمایشت، عدد رو چک کن.
- هیچ‌وقت نذار رنگ تنها نشونه باشه: تقریباً از هر دوازده مرد یکی رنگ‌ها رو جور دیگه‌ای می‌بینه و قرمز و سبز جفت رایجشه.