В умелых руках цвет является сильнейшим оружием воздействия на пользователя. Однако многие дизайнеры подчас допускают досадные ошибки. В нашей статье приведены 10 самых распространенных из них.
Содержание
- 1. Цвета бренда не изменяются
- 2. Излишек акцентных цветов
- 3. «Конфликт» ярких и акцентных оттенков
- 4. Состояния интерфейса обозначаются одним цветом
- 5. Цвета не сочетаются друг с другом
- 6. «Недоступные оттенки»
- 7. Неосторожное обращение с градиентами
- 8. Нехватка цветов
- 9. Оттенок повторяется с разными характеристиками
- 10. Копирование цветов в темную тему из светлой
- 11. Абсолютно черный для текста
- 12. Вес цвета не учитывается
- 13. Не учитывается психология цвета
- Вывод
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 может положительно влиять на поведение пользователей и их эмоции. Неудачное сочетание оттенков, напротив, может оттолкнуть пользователя от использования мобильного приложения или сайта.
Так, красный цвет ассоциируется с опасностью и риском. Вместе с тем красный считается цветом энергии, силы, мужества. Синий цвет успокаивает, а зеленый символизирует чистоту, свежесть, природность, здоровье и рост.
Важную роль играет геолокация пользователей. В разных странах один и тот же оттенок может означать совершенно противоположные вещи. Например, в западной культуре черный цвет считается траурным, а белый – светлым и праздничным. В культуре Востока все ровно наоборот: черный здесь означает процветание, а белый считается цветом скорби.
А как правильно?При разработке сочетаний цветов для сайта необходимо учитывать особенности целевой аудитории и ассоциации, которые вызывает каждый оттенок.
Вывод
Надеемся, что наша статья поможет вам предупредить ошибки, описанные в статье, при подборе сочетаний цветов в дизайне сайта. Если вы хотите, чтобы ваш интерфейс был удобным, эффективным и уникальным, отражая корпоративный стиль, дизайнеры компании «Цифровой Элемент» готовы помочь и подобрать лучшие сочетания цветов для вашего сайта.
Услуга на лучшее сочетание цветов для вашего сайта
Заказать услугу