Ошибки в сочетании цветов для UI сайта

Оглавление

В умелых руках цвет является сильнейшим оружием воздействия на пользователя. Однако многие дизайнеры подчас допускают досадные ошибки. В нашей статье приведены 10 самых распространенных из них.



1. Цвета бренда не изменяются

При работе с цветом в дизайне печатная продукция получает больший приоритет. Графические дизайнеры щепетильно подбирают оттенки в CMYK и Pantone. Мало кто из них задумывается, как эти оттенки будут отображаться в интерфейсе.

А как правильно?

• Насыщенность цвета говорит о конвертации из цветовой модели CMYK в RGB. На экранах этот оттенок будет смотреться приглушенно. Необходимо отдельное цветовое решение для экрана, достаточно насыщенную и контрастную, с минимальным различием от цветов бренда.
• Даже если в разработанном бренд-буке присутствует версия оттенков для экрана, их все же стоит проверить на контрастность и отображение в интерфейсе.

2. Излишек акцентных цветов

Подбирая сочетания цветов для сайта, дизайнер может использовать для интерфейса слишком много акцентных оттенков. Причин тому множество: как просьба клиента или менеджера, так и простая  некомпетентность дизайнера.

А как правильно?

• Для UI интерфейса можно пользоваться правилом сочетания цветов в дизайне интерьеров под названием «60-30-10». Согласно этому правилу, при оформлении интерьера доминирующий цвет используется на 60%, второй цвет – на 30%, а остальные 10% оформляются акцентными цветами.
• Если вы внедряете в макет акцентный оттенок, задайте себе вопрос, возможно ли обойтись без него или взять второстепенный цвет в качестве замены.
• В поле зрения пользователя должен быть один элемент с целевым действием.

3. «Конфликт» ярких и акцентных оттенков

Больше не значит лучше. Обилие ярких цветов порождает отсутствие системы и увеличивают когнитивную нагрузку на пользователя, а важные элементы с целевым действием остаются без внимания.

А как правильно?

• Второстепенные элементы должны быть менее насыщенного оттенка.
• Если возможно, не используйте сплошные заливки.
• При необходимости добавления нового оттенка, определите его в экспериментальную категорию и дайте ему показать себя на других макетах. Не забывайте время от времени «чистить» эту категорию, удаляя ненужные цвета. Хорошо показавшие себя оттенки можно добавлять в систему.

4. Состояния интерфейса обозначаются акцентным оттенком

Нередко дизайнеры упускают из фокуса детали. В результате все состояния интерфейса обозначаются акцентным цветом. Визуальные различия между ошибочными и информационными сообщениями стираются, и пользователю тяжело их воспринимать.

Если в качестве акцентных цветов выбраны красный и зеленый, это вызовет визуальный конфликт между элементами и сообщениями о верных и неверных действиях.

А как правильно?

• Состояния интерфейса не должны совпадать с акцентным.
• Ошибки и сообщения информационного характера должны обозначаться другим оттенком для визуального различия.

5. Цвета не сочетаются друг с другом

Подбирая оттенки, дизайнеры склонны забывать о том, что впоследствии они будут сочетаться и наслаиваться друг на друга на основном фоне. При неудачном сочетании цветов для сайта получается неприятный визуальный контраст.

А как правильно?

Проверяйте цветовые комбинации и их контрастность друг с другом в начале определения цветовой палитры интерфейса.

Подобрать лучшие сочетания цветов для сайта помогут следующие сервисы:

• Happy Hues – цветовая палитра оттенков для вдохновения и реальный пример применения этого оттенка для фонов, заголовков, рисунков.
• Color Hunt – палитра оттенков для дизайнеров и художников.
• Colors and Fonts – цвета и шрифты для веб-дизайнеров.
• Coolors – быстрый генератор цветовых сочетаний.

6. «Недоступные» оттенки

Под доступностью цветов часто подразумевают контраст фона и текста в соответствии со стандартом WCAG 2.0. Стандарт WCAG 2.0 содержит рекомендации, как сделать контент доступнее для пользователей с ограниченными возможностями. Цветовые сочетания в дизайне сайта, проработанные этим способом, легче воспринимаются при работе с интерфейсом при солнечном свете, а также людьми с нарушениями функций органов зрения.

К сожалению, дизайнеры часто пренебрегают принципами доступности.

А как правильно?

• Соблюдайте принципы доступности по WCAG 2.0.
• Проводите юзабилити-тестирование оттенков.
• Настройте контрастность.

Специальные плагины помогут симулировать возможные зрительные дисфункции:

• Stark – сервис оптимизации с учетом восприятия людей с нарушениями зрительных функций.
• Who Can Use – сервис, который обращает внимание на то, как контрастность может повлиять на пользователей с нарушениями зрения.
• Color.review – оптимизирует контрастность цветов согласно принципам WCAG 2.0.

7. Неосторожное обращение с градиентами

Уже несколько лет градиенты остаются в топах трендов веб-дизайна. Часто некоторые оттенки градиента оказываются недоступными и тяжело воспринимаются.

А как правильно?

Проверяйте контрастность каждой области на соответствие стандартам WCAG 2.0.

8. Нехватка цветов

Начиная проект, многие дизайнеры определяют 2-3 оттенка: один становится акцентным, еще 2 обозначают состояния интерфейса.  Потом оказывается, что их недостаточно, и дизайнер в спешке подбирает дополнительные сочетания цветов для сайта. Рандомный подбор цветов не способствует построению четкой системы.

А как правильно?

• Прогнозируйте развитие проекта в будущем.
• Определите оптимальное число цветов.

Эти сервисы помогут подобрать цвета:

• ColorBox – генератор цветовых схем.
• Lch and Lab colour and gradient picker – создает градиенты с учетом цветового восприятия глазами человека.
• Leonardo –создает цвета с учетом восприятия цветовой контрастности.
• HCL Easy – плагин для Figma и веб-сервисов для создания палитр для всех областей цветовой системы с учетом контрастности и особенностей зрения.

9. Оттенок повторяется с разными характеристиками

Дублированием оттенков при работе с цветом в дизайне нередко грешат новички. Вводя новые оттенки, они не описывают их в системе. Затем оттенок меняется, а элементы, им обозначенные, остаются в системе. Как результат, оттенок дублируется. Даже если различие между дублями минимально, это серьезно тормозит работу команды.

А как правильно?

Все оттенки, добавляемые в макет, должны быть в стилях, и обновляться только через стили. Если вы вводите новый цвет, создайте для него экспериментальный стиль. Если он окажется эффективным, обновите его как основной.

10. Копирование цветов в темную тему из светлой

Проработка цветов для темной темы заслуживает отдельной статьи.

Перенос на темный фон со светлого требует непосредственной модификации самих оттенков. В противном случае цветные элементы будут плохо «контрастировать» с темной темой.

А как правильно?

• Светлые и темные оттенки должны быть проработаны еще на старте.
• Для темного фона используйте оттенки с меньшей насыщенностью.
• Кое-где цвет текста также придется инвертировать.

11. Абсолютно черный для текста

Абсолютно черный цвет текста (#000000) на белом фоне – далеко не лучшее сочетание цветов для сайта. Наоборот, это смотрится грязно и небрежно.

А как правильно?

Сделайте текст светлее, например, (#1A1A1A). Кстати, абсолютно белый текст на черном фоне тоже выглядит грязно и уменьшает читабельность. В этом случае подберите для него оттенки потемнее.

12. Вес цвета не учитывается

Если в композиции встречаются два равнозначных элемента одинаковой формы и размера, но с разными цветами, то элемент более яркого цвета будет привлекать больше внимания.

А как правильно?

Соблюдайте баланс цвета у равнозначных объектов. Следите, чтобы внимание пользователя не слишком цеплялось к одному из них. Как правило, опытный дизайнер может определить это на глаз. Однако юзабилити тестирование после запуска проекта никогда не будет лишним.

13. Не учитывается психология цвета

Правильное сочетание цветов в дизайне UI может положительно влиять на поведение пользователей и их эмоции. Неудачное сочетание оттенков, напротив, может оттолкнуть пользователя от использования мобильного приложения или сайта.

Так, красный цвет ассоциируется с опасностью и риском. Вместе с тем красный считается цветом энергии, силы, мужества. Синий цвет успокаивает, а зеленый символизирует чистоту, свежесть, природность, здоровье и рост.

Важную роль играет геолокация пользователей. В разных странах один и тот же оттенок может означать совершенно противоположные вещи. Например, в западной культуре черный цвет считается траурным, а белый – светлым и праздничным. В культуре Востока все ровно наоборот: черный здесь означает процветание, а белый считается цветом скорби.

А как правильно?

При разработке сочетаний цветов для сайта необходимо учитывать особенности целевой аудитории и ассоциации, которые вызывает каждый оттенок.

Вывод

Надеемся, что наша статья поможет вам предупредить ошибки, описанные в статье, при подборе сочетаний цветов в дизайне сайта. Если вы хотите, чтобы ваш интерфейс был удобным, эффективным и уникальным, отражая корпоративный стиль, дизайнеры компании «Цифровой Элемент» готовы помочь и подобрать лучшие сочетания цветов для вашего сайта.

Услуга на лучшее сочетание цветов для вашего сайта

Заказать услугу