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

16 советов для построения стабильной системы
https://dribbble.com/shots/4845963-Brand-Guidelines
237

Вы читаете перевод сатьи  “Color in Design Systems”. Над переводом работали: Ольга Жолудова и Ринат Шайхутдинов.

Основная палитра

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

#1. Поскорее определитесь с цветами бренда

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

Вывод: Определитесь с основными цветами бренда как можно скорее, так как они распространяются среди команд очень быстро.


#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 (“морозный синий”). Возможно, пользователь сам может контролировать цвета — вам только нужно проиллюстрировать всю ширину его возможностей.

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

Цвета тем различных отелей Marriott.com, взятые с продуктовых страниц.

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

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

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


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

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

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

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


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

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

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

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

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

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

Tanaguru — один из множества онлайн-инструментов по рассчету степени доступности.

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

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

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

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

Исследование нейтральных и интерактивных цветов на примере разных вариантов из спектра.

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

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

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

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

Таблица рассчет контраста (при помощи функции SASS) между нейтральным фоном и интерактивным синим цветом.

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

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

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



Мобильное приложение «Заметки о психике» | Mental Notes

Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.

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

Скачать приложение в Appstore →
Цвет

Посты в категории Основы дизайна

TOP-10 навыков, чтобы начать работать дизайнером

Ринат Шайхутдинов

9 мая 2019

Посты в категории Основы дизайна

Видео-курс «Основы графического дизайна»

Ринат Шайхутдинов

31 мая 2018

Посты в категории Основы дизайна

Как использовать визуальную иерархию в веб-дизайне

Ольга Жолудова

28 апреля 2018