Резюме: Для створення успішного User Experience, необхідно поєднювати кольори таким чином, щоб вони ефективно працювали разом, не перевантажували дизайн і однаково використовувалися в інтерфейсі.
Колір - один з найважливіших та найефективніших інструментів у розпорядженні дизайнера. Він може передати загальний характер бренду та визначити його імідж, привернути увагу користувачів, вплинути на їхні емоції та підвищити юзабіліті. Однак підібрати вдале поєднання кольорів буває важко. Крім того, це потребує певних базових знань та практики.
Колірне коло: що це і як його використовувати
Колір це те, яким чином наші очі сприймають світлові хвилі різної довжини. У 1666 році сер Ісаак Ньютон виділив три групи кольорів:
• Первинні: жовтий, червоний, синій;
• Вторинні: помаранчевий, фіолетовий, зелений (виходять, якщо змішати первинні кольори)(
• Третинні: жовто-жовтогарячий, червоно-жовтогарячий, червоно-фіолетовий і т.д. (виходять, якщо змішати первинні та вторинні кольори).
Ньютон розмістив ці кольорному на колі, щоб показати відносини між ними.
Колірне коло показує 3 групи кольорів. Первинні кольори розташовані у найменшому центральному колі. Вторинні - в середньому кільці, а найбільше зовнішнє коло складається з третинних (а також всіх основних і вторинних) кольорів.
Теорія кольору Теорія кольору є спроби пояснити, які кольори поєднюються один з одним. Хоча ми не докладно розглядатимемо теорію кольору в цій статті, центральне місце в ній займає поняття колірної гармонії: поєднання кольорів, які добре працюють разом. Ви можете сприймати колірні гармонії як будівельні блоки або базовий шаблон палітри кольорів. Найбільш поширені колірні гармонії це: • Аналогова: кольори розташовуються на колі поруч один з одним; така колірна гармонія створює низький колірний контраст • Комплементарна: включає протилежні кольори на колірному колі; має високий контраст. • Роздільно-комплементарна: включає три кольори - основний і два кольори, розташованих по обидва боки від протилежного; ця гармонія трохи пом'якшує контраст, що створюється комплементарними кольорами. • Тріадна: три рівновіддалені кольори на колірному колі (розташовані з кроком 120 градусів) • Монохроматична: тони та відтінки одного кольору.
Колірні гармонії можуть бути використані для пошуку вдалих поєднань кольорів. Аналогова, комплементарна, тріадна, роздільно-комплементарна та монохроматична – це основні схеми, для створення яких не потрібно надто багато кольорів.
Існують також види колірних гармоній, у яких використовується чотири кольори. Однак, чим більше кольорів ви виберете, тим складніше їх збалансувати і створити чітку візуальну ієрархію. Звичайно, якщо у вас є досвід роботи з кольором, ви можете експериментувати зі складнішими гармоніями, але почати варто з двох або трьох кольорів. Значення кольорів Хоча в мережі можна знайти безліч популярних статей, в яких докладно розглядається значення кольорів, існує мало реальних досліджень, що доводять, що той чи інший колір може однаково впливати на емоції всіх людей. Загалом, хоча з початком глобалізації деякі кольори набули стандартних значень (наприклад, червоний означає зупинку, зелений — сигнал для продовження руху), найбезпечніше припустити, що інтерпретація кольору може змінюватись від культури до культури. Наприклад, який колір символізує гроші, червоний (як у Китаї) чи зелений (як у США)? Також не слід забувати, що деякі люди не можуть розрізняти низку кольорів через дальтонізм. Якщо ви хочете, щоб кольори у вашому дизайні викликали певні асоціації, то (а) майте на увазі, що, швидше за все, ваша ідея не буде працювати однаково добре у всьому світі, і (б) проведіть додаткове тестування користувача, щоб переконатися, що ці ж користувачі інтерпретують кольори так само, як і ви. Використання кольору в дизайні Палітри кольорів — це набір кольорів, вибраних для конкретного проєкту або бренду. Кожен новий колір додається з певною метою, а палітра загалом дає уявлення про візуальну естетику продукту чи інтерфейсу. Створюємо колірну палітру Створити ефективну палітру кольорів буває важко. Ось деякі рекомендації, які допоможуть вам у цьому: • Виберіть одну з наведених вище колірних гармоній і почніть перебирати варіанти для кожного з кольорів, що входять до неї. Зазвичай найпростіше створити і застосувати монохроматичну схему, тому якщо у вас зовсім немає досвіду роботи з кольором, можна почати саме з цієї колірної гармонії. Після того, як ви визначилися з гармонією, почніть перебирати різні кольори, щоб побачити, наскільки добре вони працюють і як виглядають разом, поки не знайдете найбільш виграшну комбінацію, яка вам сподобається і відмінно підійде для вашого дизайну. Не намагайтеся з першого разу зробити все правильно. Якщо ви відчуваєте, що застрягли або просто не знаєте, з чого почати, спробуйте знайти натхнення в існуючих палітрах (наприклад, використовуйте Adobe Color або пошукайте веб-сайти, які здадуться вам красивими). Намагайтеся зрозуміти, чому вам подобається те чи інше поєднання кольорів. Які це кольори: насичені чи пастельні? Теплі чи холодні? • Обмежте колірну палітру трьома кольорами. Коли в дизайні використовується невелика кількість кольорів, це дозволяє створити сильнішу візуальну ієрархію та контраст, оскільки користувачам потрібно менше аналізувати значення кольорів та відволікатися на них. Наприклад, чи було вам колись важко знайти на полиці в магазині певні пластівці? Причина у великій кількості кольорів, які змагаються за вашу увагу! Це справедливо і для дизайн-проектів. Меньше - більше. • Виконуйте положення стайлгайду (посібники зі стилю) про кольори. При створенні палітри кольорів для свого проєкту, завжди враховуйте рекомендації зі стайлгайду. Це не тільки спростить ваше завдання, оскільки кількість варіантів буде обмежена, а й дозволить створити сильний, одноманітний досвід взаємодії споживачів із брендом. Якщо у вас немає посібника зі стилю, зверніть увагу на те, які кольори використовуються у вже існуючих дизайнах та продуктах, і спробуйте включити їх у свою палітру кольорів.
На веб-сайті Nike використовується мінімалістична монохромна палітра кольорів: чорний, білий і сірий кольори. Такий вибір кольорів дозволяє користувачам сфокусуватися на товарах та їхніх зображеннях.
Застосовуємо колірну палітру Після того, як ви створили колірну палітру, настав час використовувати вибрані кольори у вашому дизайні та подивитися, наскільки добре вони працюють. Ось кілька рекомендацій: • Зверніться до правила 60-30-10. Воно говорить, що кольори у вашому дизайні повинні використовуватися в наступних пропорціях: 60% - основний колір, 30% - другорядний і 10% - акцентний. Таке співвідношення допомагає зробити дизайн збалансованим і запобігти використанню надмірної кількості кольорів, що перетворюють проект на хаотичний безлад. Як правило, основний і другорядний кольори мають бути нейтральними. Використовуйте акцентний колір лише для тих елементів, які необхідно виділити на сторінці, наприклад, кнопка заклику до дії. • Застосуйте та доопрацюйте. Після того, як ви використовували правило 60-30-10, почніть налаштовувати кольори, щоб зробити дизайн естетичнішим, а також виділити важливі елементи інтерфейсу. Зверніть увагу, чи дотримуються у вашому проекті принципи візуального дизайну. Чи допомагають вибрані кольори створити правильну візуальну ієрархію, тобто привертають вони увагу користувачів до тих дизайн-елементів, які необхідно виділити? Чи забезпечує колірна палітра збалансованість дизайну та необхідний контраст? Переконайтеся, що кольори та їх поєднання у вашому проєкті працюють ефективно. • Одностайно використовуйте кольори в інтерфейсі. Якщо ви вибрали яскраво-синій колір для позначення закликів до дії на одному екрані, цей же колір слід використовувати для них усюди (крім випадків, коли у вас є досить вагомі підстави, щоб застосувати інший колір). Якщо червоний на одному з екранів виступає як колір попередження, не варто надалі змінювати його значення. Одноманітність допомагає користувачам краще розуміти, навіщо використовується той чи інший колір на сайті.
У Apple News ефективно застосовується правило 60-30-10. Білий і світло-сірий кольори є основними, синій – другорядним, а рожевий – акцентним. Вони займають близько 60, 30 та 10% інтерфейсу відповідно. Рожевий акцентний колір привертає увагу користувачів і послідовно використовується для всіх закликів до дії, таких як Грай або Спробуй 1 місяць безкоштовно, а також будь-яких інших важливих посилань, наприклад, Прочитати історію.
Тестуємо колірну палітру. • Протестуйте свій дизайн. Після того, як ви застосували палітру кольорів у своєму дизайні, проведіть юзабіліті-тестування. Кольори впливають на зручність використання кнопок, посилань та інших компонентів. Наприклад, сірі кнопки можуть сприйматися користувачами як заблоковані, вимкнені, навіть якщо це не так. Крім того, перевірте, чи не виникло проблем із читабельністю та доступністю контенту, на що може вплинути як недолік контрасту, так і використання кольорів, які важко сприймати людям із дальтонізмом. Нам подобається використовувати сайт accessible-colors.com для перевірки доступності різних поєднань кольору тексту та фону. Якщо юзабіліті-тестування показало, що деякі кольори погано працюють в інтерфейсі, поверніться до першого кроку і спробуйте ще раз створити ефективну колірну палітру.
Хоча UberEats і використовує належним чином правило 60-30-10, зелений колір у логотипі виглядає надто яскравим та насиченим на помаранчевому фоні, тому текст дуже важко прочитати. Це той випадок, коли палітра кольору вимагає доопрацювання для підвищення читабельності.
Висновок Вдалий вибір палітри кольорів і її ефективне використання в дизайні - це не просто щасливі випадковості. Потрібно довго перебирати кольори та уважно застосовувати їх, щоб отримати відмінний інтерфейс. Правильне використання кольорів може покращити сприйняття бренду, привернути увагу та підштовхнути користувачів до взаємодії, вплинути на їх емоції та підвищити юзабіліті. Джерело: nngroup.com