Цифровой элемент
10 на чтение Отправь статью на почту?

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

Подписаться
1528

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12 (1).jpg
Вес цвета не учитывается

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

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

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

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

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

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

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

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

Вывод

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


Мне не нравится
Россия, Челябинская область, Челябинск, ул. Энтузиастов, 2, оф. 200 Телефон: +7 (351) 220-45-35

Блог

Микроразметка schema.org
Микроразметка schema.org

Schema.org – микроразметка, позволяющая структурировать данные на сайте для поисковых систем. С ее помощью поисковые системы понимают, какие данные...

28 мая 2019
96660
TОП-40 плагинов Figma
TОП-40 плагинов Figma

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

11 марта 2021
95846
Как попасть на Яндекс.Карты, Google.Карты, 2GIS
Как попасть на Яндекс.Карты, Google.Карты, 2GIS

Если ваша компания ведет бизнес офлайн, размещение на Яндекс.Картах и Google и 2GIS поможет рассказать об этом потенциальным клиентам. Присутствие...

17 июля 2019
92082
404 ошибка – страница не найдена
404 ошибка – страница не найдена

404 ошибка (страница не найдена) – это ответ сервера, который возникает, когда сервер не может отобразить запрашиваемую страницу по указанному адре...

13 августа 2019
40173
Семантика сайта
Семантика сайта

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

21 октября 2019
17815
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords
Как предоставить гостевой доступ к Яндекс Директ и Google Adwords

Контекстная реклама — один из самых простых и быстрых способов увеличения посещений веб-сайта. Особенностью этого инструмента является понятность р...

19 января 2021
13792
Как составить ТЗ на разработку сайта
Как составить ТЗ на разработку сайта

ТЗ (техническое задание) – очень полезный документ, в котором описаны все разделы сайта, все элементы страницы и функциональность всех модулей. Пол...

14 мая 2021
12868
Микроразметка Open Graph
Микроразметка Open Graph

Open Graph – стандарт микроразметки, который позволяет формировать превью сайта при публикации в социальных сетях. Стандарт Open Graph был р...

5 ноября 2019
10623
Сброс кеша DNS в Google Chrome
Сброс кеша DNS в Google Chrome

Для сброса кеша DNS в Google Chrome: Введите в адресной строке браузера chrome://net-internals/#dns и нажмите кнопку Clear host cache; Зат...

31 января 2020
9676
Анализ сайта с помощью Яндекс.Метрики
Анализ сайта с помощью Яндекс.Метрики

Яндекс.Метрика – инструмент анализа аудитории сайта. Метрика позволяет сегментировать данные, определять целевую аудиторию сайта, достигать целей и...

20 декабря 2019
8959
Золотой партнер<br>1С-Битрикс
Золотой партнер
1С-Битрикс
Сертифицированное агентство <br>Яндекс.Директ
Сертифицированное агентство
Яндекс.Директ
Сертифицированное агентство <br>Google.AdWords
Сертифицированное агентство
Google.AdWords
Региональный партнер <br>Ru-center
Региональный партнер
Ru-center
Золотой партнер  <br>Битрикс24
Золотой партнер
Битрикс24
Отправьте нам сообщение