Цвет в дизайн-системах

#2. Если вносите изменения в цвет бренда, согласуйте это заранее

Брендовый синий кажется вам скучным? Так и хочется его немного оживить? Запомните: ничто так не отравляет атмосферу сотрудничества с командой брендинга, как ваше “Мы сделали брендовый оранжевый понасыщеннее для веб”. “Что вы сделали?! Это же кощунство!”

Вывод: Брендовые цвета — это зона ответственности команды брендинга. Поэтому обсуждайте все правки с ними, и если нужно — уступайте.

#3. Избавьтесь от нейтральных-нейтральных цветов

От черного как ночь угольного и до пушистого светло-серого, нейтральные цвета формируют каркас интерфейса. Однако, если перегрузить систему нейтральными цветами — пусть даже их будет лишь несколько — внешний вид интерфейса будет грязным. Кроме того, такой интерфейс будет напоминать вайрфрейм. Ну и наконец, нейтральные цвета (ни темные, ни светлые) не обеспечивают достаточного контраста с умеренным серым фоном.

Вывод: Можно использовать несколько светлых оттенков серого и несколько темных. Это позволит добиться нужного контраста, и не сделать интерфейс “застиранным” или напоминающим вайфрейм. Стоит избегать умеренных серых цветов, которые находятся между светлыми и темными.

#4. Пользуйтесь “цифровым синим”. Все так делают.

В пяти своих последних дизайн-системах я по умолчанию использовал насыщенный синий цвет для кнопок и ссылок. Ссылки всегда были синими — наверное, с момента появления первого браузера. Такой “цифровой” синий цвет — который ассоциируется со ссылками и кликабельными элементами — обязательный элемент любой палитры.

Вывод: Когда будете пользоваться цифровым синим (заметьте, не “если”, а “когда”!), отдавайте предпочтение оттенкам, которые хорошо различимы. Кроме того, убедитесь, что синий не “спорит” с основными брендовыми цветами: синим, красным, оранжевым, фиолетовым или зеленым.

Тона и оттенки каждого цвета

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

#5. Подготовьте линейку тонов и оттенков для каждого цвета

Паттерны отображения цветовых палитр появились задолго до веб. И все же я люблю эти компактно сгруппированные оттенки. Они выглядят просто … божественно. Наиболее удачно выглядят линейки оттенков, в которых отображены не только сами оттенки, но и их HEX коды, переменные кода и другие индикаторы (например, запрет на наложение цветов). Достаточно быстрого взгляда на такую линейку, чтобы получить всю нужную информацию.

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

#6. Называйте тона и оттенки по степени яркости

Все мы это проходили. Системе примерно 1 месяц, и вы определились с нейтральными цветами $color-gray-1, $color-gray-2,…, $color-gray-7. И вот вдруг понадобился еще один оттенок — что-то среднее между серыми под номером 1 и 2. И ваша система имен сразу провалилась.

Вывод: Присваивайте оттенкам имена по шкале от 0 до 100, в зависимости от уровня яркости: например, $color-gray-05 и $color-gray-92. Такая шкала отражает привычный нам диапазон от темных оттенков к светлым, что позволяет добавлять промежуточные варианты.

#7. Используйте ограниченное количество тонов и оттенков

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

Вывод: Предложите определенное количество вариантов, но избегайте монотонного разнообразия.

#8. Определите способ трансформации цветов: вручную или автоматически

В современных инструментах — вроде SASS и Stylus — есть функции трансформации цветов: например, можно сделать цвет темнее или светлее, задав определенный процент яркости. Такая трансформация позволяет создавать оттенки, немного отличающиеся по контрасту: их можно использовать для наведенного состояния кнопок или для многоуровневой навигации.

Но с подобными трансформациями могут возникнуть проблемы: тщательно подобранные базовые цвета могут превратиться в неразличимые (см.пример ниже), а общий вид страницы станет “грязным”. Шаг в 5% хорошо подходит для цветов умеренной яркости, а вот слишком светлые или темные цвета не будут достаточно контрастными.

Вывод: Сразу определитесь, разрешать ли трансформацию цветов в вашей системе. Если вы намерены применять трансформацию, подготовьте инструкции и примеры по ее использованию. Например, уточните, что шаг в 5–10% допустим для цветов средней яркости, а в остальных случаях требуется изменение яркости на 10–20%. Если решили отказаться от трансформации, задокументируйте это решение.

Второстепенные палитры

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

#9. Подберите набор цветов для обеспечения обратной связи

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

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

#10. Проиллюстрируйте разнообразие цветовых тем

В некоторых системах использование цвета определяется продуктом, секцией или брендом. Зачастую это происходит в результате согласования цветов основного бренда (например, Marriott International) и его дочерних брендов (например, Countyard Hotels, Ritz Carlton и Moxy Hotels). Иногда существует заданная тема: например, Ambient Warmth (“обтекающая теплота”) или Frozen Blue (“морозный синий”). Возможно, пользователь сам может контролировать цвета — вам только нужно проиллюстрировать всю ширину его возможностей.

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

#11. Определите, как работает тема

Недостаточно просто сказать: “Давайте, применяйте тему!” Область применения некоторых цветов темы в интерфейсе определена заранее: например, фон кнопки, фон активной вкладки или цвет верхней границы навигации. Кроме того, некоторые цвета не подлежат изменению — как, например, цвет ссылок.

Вывод: Определите, как работает тема в отношении конкретного интерфейса. И самое главное, оговорите ограничения, распространяющиеся на определенные элементы.

#12. Не давайте рекомендаций по комбинированию цветов (по крайней мере в начале)

Один из моих любимых инструментов для дизайн-систем — это MDL Color Customizer от Google. Он позволяет пользователям эффективно комбинировать основные и второстепенные цвета в интерфейсе. Инструмент очень прост и полезен. И все же команды по проектированию систем, с которыми я работаю, видимо не хотят предоставить пользователям такой свободы действий или экономят время и считают нужным самим скомбинировать все нужные цвета.

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

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

Контрастность и доступность

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

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

#13. Тестируйте контрастность на ранних стадиях и регулярно повторяйте эту практику

Это случается довольно часто: за несколько недель, а то и дней, до запуска продукта (или дизайн-системы) кто-то наконец-то замечает. Команда по дизайну не позаботилась о том, чтобы согласовать основные и второстепенные цвета с руководством по обеспечению доступности web контента (WCAG). Поэтому дизайнеры — а потом и разработчики — начинают впопыхах вносить изменения в код.

Вывод: Каждый дизайнер, ответственный за подбор цветов системы, должен ознакомиться с рекомендациями WCAG и пользоваться специальными инструментами (например, Tanaguru) для проверки цветовых пар. Доступность должна быть одним из критериев при подборе цветов.

#14. Исследуйте спектры доступных цветов

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

Разговор пойдет быстрее, если мы определим спектр доступных цветов, которые явно “проходят тест” WCAG. В итоге, вместо постоянных проб и ошибок будет процесс легкой настройки. Раньше было: “Эта пара не работает, попробуем еще”. А теперь: “Так вот насколько темнее должен быть этот синий!” и дальшейшее обсуждение о том, как сбалансировать визуальный тон, сохранить индивидуальность бренда и увеличить доступность.

Вывод: При исследовании степени контрастности доступных цветов, обозначьте ряд вариантов, которые “проходят тест” WCAG, чтобы помочь команде с выбором.

#15. Подумайте об инверсии цветов

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

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

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

#16. Повысьте доступность системы при помощи цвета

Цвет — это основа системы, а “доступный” контраст — это основа цвета. Посредством цвета вы повышаете доступность всей системы. Понимающие люди обращают на это внимание: бренд-менеджеры, руководители дизайнерских команд, разработчики и другие специалисты. Какая отличная возможность: посредством цвета повысить доступность всей системы!

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