Червоний, білий, синій короткий гайд по підбору палітри для початківців
Колір не додає якості дизайну – він його посилює.
При розробці нового продукту часто буває складно визначити колірну схему через нескінченну кількість можливих комбінацій кольорів. У цій статті ми розглянемо вісім основних правил, які допоможуть вам вибрати правильну палітру кольорів.
Обмежте кількість кольорів
Застосування кольору завжди має ґрунтуватися на балансі. Чим більше кольорів ви використовуєте, тим важче досягти його. Ви отримаєте найкращий результат, якщо дотримуватися максимум трьох основних кольорів у вашій палітрі кольорів. Згідно з дослідженням Університету Торонто, присвяченому тому, як люди використовували Adobe Color CC, більшість заявляють, що віддають перевагу простим кольоровим комбінаціям, які покладаються тільки на два або три кольори.
Якщо вам потрібні додаткові кольори, крім тих, які ви визначили у своїй палітрі, використовуйте відтінки.
Як створити схему
Отже, як вибрати ці два чи три кольори?
Існує ряд визначених стандартів колірної схеми:
Монохромніе. Монохроматичні схеми найпростіші, оскільки вони створені з одного кольору, але включають зміни відтінків і тонів. Монохроматичні кольори добре поєднуються, створюючи заспокійливий ефект.
Аналогові. Аналогові колірні схеми створюються із суміжних кольорів; один колір використовується як домінуючий, інші використовуються для збагачення схеми.
Додаткові. У їхній основній формі ці схеми складаються лише з двох кольорів, які сильно контрастують. Ця схема використовується для привернення уваги. При використанніДодаткову схему важливо вибрати домінуючий колір, другий використовувати для акценту. Наприклад, коли людське око бачить об'єкт, повний різних видів зелені, трохи червоного кольору виділяється дуже добре.
Настроюваніе. Створення користувальницької колірної схеми не так складно, як багато хто думає. Існує простий трюк, який можна використовувати для створення чудової палітри кольорів: просто додайте яскравий акцент в нейтральну палітру (наприклад, традиційну монохроматичну). Така схема візуально яскравою.
Беріть натхнення від природи
Найкращі колірні комбінації можна побачити у природі. Навіщо? Тому що ці схеми здаються природними для очей. Щоб надихнутися, нам потрібно лише озирнутися. Якщо ви бачите особливо красивий або яскравий колір у повсякденному житті, спробуйте створити схему навколо нього. Просто зробіть знімок гарного моменту та створіть свою колірну схему.
Спробуйте дотримуватися правила 60-30-10
Це вічне правило, яке допоможе вам легко встановити колірну схему. Частка 60% + 30% + 10% призначена для забезпечення балансу кольорів у будь-якому просторі.
Ця концепція неймовірно проста у використанні: 60% – ваш домінуючий відтінок, 30% – вторинний колір, а 10% – колір акценту. Ідея полягає в тому, що вторинний колір підтримує основний колір, але досить відрізняється, щоб поділити їх. 10% – ваш колір акценту. Це може бути колір для іконки або іншого елемента, який ви хочете виділити.
Починайте з дизайну у градаціях сірого
Гра з кольором – це весело. Ось чому вибір колірної схеми – одна з перших речей, які ми робимо у нових проектах. Цедійсно цікаво, але рекомендується натомість змусити себе спочатку проектувати у відтінках сірого.
Створіть прототип своєї програми в градації сірого та використовуйте його як базову лінію. Проектування у відтінках сірого перед додаванням кольору змушує вас зосередитись на відстані та укладання елементів.
Додати колір в останню чергу.
Уникайте використання чисто чорного
У реальному житті чиста чорна майже ніколи не існує. Всі «чорні» об'єкти навколо нас мають деяку кількість світла, що відбивається від них, а це означає, що вони не зовсім чорні, вони темно-сірі. Дороги не чорні. Тіні не чорні.
Коли ви поміщаєте чистий чорний поруч із набором ретельно підібраних кольорів, чорний пересилує все інше. Він виділяється, тому що це не природно. У більшості програм, які ми використовуємо щодня, є чорні елементи, які насправді не чорні, а темно-сірі. Наприклад, найтемніший колір на верхній панелі Asos не # 000000, це # 242424. Тому не забудьте завжди додати трохи відтінку у свій колір.
Робіть акценти за допомогою контрасту
Колір – інструмент, який може привернути увагу. Чим більше ви хочете щось виділити, тим більше ви повинні покладатися на контрастні кольори. Як правило, високий контраст - найкращий вибір для важливого контенту або ключових елементів. Якщо ви бажаєте, щоб користувачі бачили або натискали на щось, виділіть це!
Використання кольору для впливу на емоції користувачів
Відомо, кожен колір має значення і може викликати емоції. Ці значення матимуть прямий вплив на те, як ваші користувачі сприймають ваш продукт.
Коли ви вибираєте колірну палітру для своєї програми / сайту, ви не можете просто думати про те, як все виглядає - ви повинні думати про те, які емоції це викликає. Кольори, що ви вибираєте, можуть працювати або за, або проти ідентичності бренду, яку ви намагаєтеся створити.
Червоний, оранжевий, жовтий
Червоний (пристрасний, потужний, небезпечний, важливий) надзвичайно стимулюючий колір. Це створює враження швидкості та сили. Він відомий як колір енергії. Він впливає на збільшення циркуляції крові та підвищення метаболізму. Використання червоного – це спосіб привернути увагу користувачів або виділити окремий елемент, який потребує уваги.
Помаранчевий (грайливий, енергійний, привабливий, дешевий) теплий та яскравий колір. Він має енергійну ауру і здатний створити теплий прийом для ваших користувачів. Деякі дослідники вважають, що помаранчевий означає дешевизну.
Жовтий (веселий, доброзичливий, стимулюючий, уважний) універсальний колір, залежно від вибраного відтінку. Світло-жовтий пов'язаний із сонцем і, отже, повідомляє про позитивність та теплоту. Темні відтінки жовтого (як золото) створюють враження давнини та віку. Ці темніші відтінки часто пов'язані з безчасністю і мудрістю.
Зелений, синій, фіолетовий
Зелений (природний, безпечний, свіжий) відображає почуття довкілля та близькість до природи. Це також означає зростання, і саме тому воно часто пов'язане з бізнесом. Зелений означає почуття правильного чи неправильного.
Фіолетовий (розкішний, таємничий, романтичний) історично пов'язаний із королівською родиною, фіолетовий натякає на продукт високого класу.
Рожевий, Чорний, Білий, Сірий
Рожевий (жіночий, невинність, молодість) найбільш відомий своїми асоціаціями з жіночністю.
Чорний (потужний, складний, таємничий) привертає увагу швидше, ніж інші кольори, зокрема червоний. Ось чому він найчастіше використовується лише для тексту та акцентів.
Білий (чистота, здоров'я, чистота, невинність) - популярний вибір для вторинного кольору.
Сірий (нейтральний, формальний) уособлює нейтралітет, він може набувати характеристик чорного або білого. При використанні як основний колір створює враження формальності.
Важливо відзначити, що значення кольорів може змінюватись в залежності від культури та обставин.
Зробіть свій дизайн доступним
Доступність є ключовою міркою під час проектування за допомогою кольору. Сьогоднішні продукти мають бути доступними для всіх — незалежно від здібностей людини.
Уникайте використання кольору як індикатора
Приблизно 8% чоловіків та 0,5% жінок страждають від дальтонізму. Це 1 із 12 чоловіків та 1 із 200 жінок. Хоча існує кілька форм стану, найчастіше зустрічається червоно-зелена кольорова сліпота. У людини, яка страждає від цієї форми кольорової сліпоти, зазвичай виникають проблеми з відмінностями як червоної, так і зеленої.
Оскільки колірна сліпота набуває різних форм (включаючи червоно-зелений, синьо-жовтий та монохроматичний), важливо використовувати кілька візуальних сигналів для передачі важливих станів у вашому продукті. На додаток до кольору використовуйте такі елементи, як штрихи, індикатори, шаблони, текстури або текст для опису дій та контенту.
Уникайте низької контрастності тексту
Колірна контрастність - це одна з областей, де теорія кольорумає вирішальне значення для зручності використання дизайну. Коли ви використовуєте кольори в тексті, майте на увазі, що розміщення двох кольорів з низьким значенням контрасту поруч один з одним може зробити текст важким для читання.
Перевірте контрасти, щоб кольори фону та переднього плану відображалися з достатнім контрастом для сліпої людини або людини з поганим зором. Це справді не так складно – все, що вам потрібно зробити, це перевірити коефіцієнт контрастності. Коефіцієнти контрастності показують, як колір відрізняється від іншого кольору (зазвичай це 1: 1 або 21: 1). Чим вище різниця між двома числами у співвідношенні, тим більша різниця у відносній яскравості між кольорами. W3C рекомендує використовувати наступні коефіцієнти контрастності для тексту основного тексту та зображення:
Маленький текст повинен мати коефіцієнт контрастності щонайменше 4,5: 1 тлі.
Великий текст (при 14 pt жирний / 18 pt регулярний і верхній) повинен мати коефіцієнт контрастності не менше ніж 3: 1 на фоні.
Хороші новини: вам не потрібно перевіряти їх вручну. Використовуючи інструмент Color Contrast Checker, ви можете перевірити свої комбінації кольорів всього за кілька кліків.