Please enable JavaScript.
Coggle requires JavaScript to display documents.
Ошибки при работе с цветом - Coggle Diagram
Ошибки при работе с цветом
Использование бренд-цвета без изменений
Бренд-бук создается для печатной продукции, а цвета в интерфейсе совсем другие по насыщенности.
Cконвертированные из CMYK в RGB цвета выглядят приглушенными
Проверить контраст цветов и то, как они выглядят в интерфейсе
Злоупотребление акцентным цветом
Все элементы раскрашиваются акцентным цветом
Правило 60-30-10
Вопрос: можно ли обойтись без использования акцентного цвета и заменить его второстепенным?
В поле зрения пользователя видимым должен быть только один главный элемент с целевым действием
Много ярких цветов, которые "спорят" с акцентным
Цвета не образуют единую систему. Теряются важные элементы с целевым действием. У пользователя увеличивается когнетивная нагрузка
Менее насыщенные цвета для второстепенных элементов
Отказаться от сплошных заливок, где это возможно
Новый цвет помещать в группу Experimental (показать на других макетах)
Акцентный цвет для обозначения различных состояний интерфейса
Все сообщения (ошибка или информация) обозначаются акцентным цветом. Это усложняет понимание, т.к. визуально они неразличимы.
Прорабатывать цвета для всех состояний и следить за тем, чтобы они отличались от акцентного.
Использовать другой оттенок или цветов для ошибок, информации и т.д.
Пример: у продукта акцентный цвет - красный или зеленый. Это создает трудности при дизайне сообщений об ошибках или успешных действиях.
Неудачное сочетание цветов
Забывают о том, что в будущем цвета могут размещаться не только на основном фоне, но и комбинироваться.
Проверять различные сочетания цветов и их контраст на этапе проработки цветовой палитры
"Недоступность" цветов
Этот пункт не всегда учитывается для пользователей с нарушениями зрения. Доступность - это контраст между фоном и текстом.
Следовать стандартам WCAG 2.0
Проверять цвета на юзабилити-тестировании
Проверять контраст и симулировать нарушения зрения с помощью различных программ (Stark, Who can use, Color.Review)
Неосторожное обращение с градиентами
Часть градиента недоступна с точки зрения контраста (переход в светлый цвет и текст белого цвета)
Проверять контраст каждой области цвета, где расположен текст по стандартам WCAG 2.0
Недостаточное количество оттенков
Один оттенок для акцентного цвета и мб еще для состояния hover. В процессе работы приходится докидывать еще цвета, из-за чего не образуется единая цветовая система.
Предположить, как проект будет развиваться в будущем, как он будет расти.
Определиться с оптимальным количеством оттенков.
Инструменты: Color Box, Lch and Lab colour gradient picker, Leonardo, HCL Easy
Дубли одного и того же цвета с разными параметрами
Начинающие дизайнеры вводят новые цвета и не добавляют их в основной UI kit. Появляется 23 оттенка черного цвета непонятно откуда появившиеся
Добавлять в стили все цвета, которые вводятся в макет. Вводить новые цвет, в котором не уверен, через Experimental
Копирование цветов из светлой темы в темную.
Цветные элементы после переноса со светлого фона на темный с большой вероятностью будут образовывать «плохой» контраст с фоном.
Прорабатывать достаточное количество как темных, так и светлых оттенков (Material Design).
Используйте менее насыщенные оттенки для темной темы.
Не забывайте про цвет текста. Например, на кнопках.