Делаем палитру цветов для дизайн-системы

Привет! Я занимаюсь развитием и поддержкой дизайн-системы, и я хотел бы поделиться своим опытом и поговорить об одной её неотъемлемой части — палитра цветов. Много раз ломал голову и наступал на грабли, когда придумывал разные подходы, комбинации и сочетания при создании или рефакторинге дизайн-системы.

Казалось бы, зачем нужна палитра цветов и почему вам это может быть нужно именно сейчас? Может быть, у компании уже есть какая-то палитра, но её делали не вы, а качество работы оставляет вопросы.

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

Сегодня я расскажу, на что стоит обращать внимание при создании палитры для вашей дизайн-системы. Погнали!

Для начала вам нужно посмотреть на брендбук компании (если он есть) или на цвета логотипа и бренд-материалов (печатка, визитки, листовки, что угодно). В хорошем брендбуке будут указаны пара-тройка основных базовых цветов — они-то нам и нужны. Скорее всего, эти цвета будут указаны по шкале CMYK или Pantone, но эти значения цветов многим не подойдут, так как они не предназначены для цифровых носителей. Для начала нужно будет перевести эти цвета в шкалу RBG. В интернете есть много конвертеров, и вы с лёгкостью получите нужный вам цифровой цвет. Но это не всё. Вам придётся немного подкрутить яркость или контрастность цвета, который получился.

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

При работе над UI какого-нибудь продукта вы чаще всего будете использовать основные цвета, они как раз и получатся из цветов вашего брендбука. На изображении ниже представлены цвета из брендбука АТОЛ и цвета, которые мы подкорректировали для цифровых экранов.

Важно отметить, что в природе не существует чёрного цвета (#000000) и серых цветов из градации от чёрного к белому которые нам предлагает шкала RGB. Рекомендуется подмешать к чёрному цвету какого-то оттенка, но совсем чуть-чуть. По шкале HSL это H (Hue). На экране такой цвет будет казаться приближённым к чёрному, и рядовой юзер вряд ли заметит отклонение. На практике показывается отличное сочетание такого цвета с остальной палитрой цветов. Свой цвет мы уводили в сторону синего, цвета спокойствия. Для остальных оттенков серого достаточно подкрутить значение S (Saturation) по шкале HSL. На примере показаны отличия, если серый оставлять как есть и какой он будет, если подкрутить Saturation. Выглядит чище и приятнее.

Касательно белого цвета, его тоже не существует в природе, но на практике многие оставляют этот цвет как есть со значением HEX #FFFFFF. Но если его подкрутить как и чёрный, то ничего страшного не случиться. Главное — делайте это осознанно и проверяйте на практике.

Дополним базовые цвета их оттенками. Есть множество инструментов для раскладки цветов. Мне понравился https://palettte.app/. Достаточно задать крайние оттенки вашего цвета и получить раскладку из 10 оттенков одного цвета, а ещё можно подкрутить оттенки, если генератор не удовлетворил ваши ожидания.

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

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

Из распространённых техник: kebab case, camel case, snake case. Ознакомиться с примерами можете на Википедии.

Каждая команда придумывает свои названия, основываясь на каких-либо принципах и ценностях компании. У «жёлтого банка» это города (London), а у нас - драгоценные камни (палитру назвали Gemstones). Таким образом, чтобы обозначить жёлтый цвет мы назвали его Topaz, а чтобы понять его насыщенность используем нумерацию от 25 до 900. Так мы поймём, что цвет Topaz 100 будет означать светло-жёлтый, а если нам нужен такой же зелёный оттенок, мы просто обратимся к цвету Emerald 100.

Если переведём всё на язык переменных с техникой наименования kebab case, то получится sapphire-400 или carbonado-600. Удобно будет добавить новый цвет в палитру, разместив его между двумя соседними цветами. Его можно назвать с индексом 150 (между 100 и 200).

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

Последние годы набирает популярность этот термин. Если проецировать токены на палитру цветов, то это выглядит как специально заданные переменные в коде и в стилях UI Kit. Например, возьмём красный цвет ruby-600 — это один цвет по HEX (#FF0000). Он может означать несколько семантических и логических цветов: и цвет опасности, и цвет бренда, и цвет ошибки, и даже цвет контура (border) у промо-блока. В токенах так и запишем: color-dangerous, color-primary-brand, color-text-error. Токенов может получиться нескончаемое количество, и тут важно не переиграть. В идеале название стиля в Figma должно полностью соответствовать переменной в коде у разработчиков, в которой указан ваш цвет. Для оптимизации процессов дизайн-команды синхронизиру.т Figma c кодом и к этому нужно стремиться всем. Рекомендую попробовать плагин Tokens.Studio, который поможет вам организовать все стили и токены цветов. О методологии, как удобно называть токены рассказывает Lukas Oppermann.

Accessibility, A11y, доступность — это всё то, что позволяет понимать и отличать ваши цвета людям с ограниченными возможностями. Например, люди с разной степенью дальтонизма (да, тут есть, что изучить) могут не увидеть, где у вас красный цвет и где зеленый, особенно если эти цвета что-то семантически значат. Люди просто могут не обратить внимание на красную ошибку, а зелёное успешное действие может показаться им опасным.

Есть онлайн-инструменты, которые помогут определить доступность вашего цвета в сочетании в другими цветами. Например, вам нужно убедиться, что текст на вашей кнопке будет всем виден и читаем. С этим поможет WCAG Color Contrast Checker.

Конечно, вы можете взять любую готовую палитру из открытых дизайн-систем и адаптировать её под себя при необходимости. Из них подойдут палитры от Google Material Design или Ant Design Colors.

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

Может случиться ситуация, когда готовой палитры вам не хватает для реализации продуктовых задач. Я столкнулся с этой проблемой, когда нам нужно было показать очень много разных статусов (компонент badge). Мы уперлись в ограничение наших цветов по спектру и решили, что можем расширить палитру. Стоит обратить внимание на соответствие насыщенности (Saturation) и светлоте (Lightness) в уже имеющихся цветах, то есть в нашем случае цвет Ametyst-600 должен быть в одном ряду с Topaz-600, а Ametyst-100 в ряду с Topaz-100.

Из нашего опыта скажу, что мы столкнулись с проблемой выбора основного (Primary) цвета для кнопок и элементов интерфейса. Как я уже упомянул, бренд АТОЛ — красный, а красный — цвет опасности. И нам очень не хотелось, чтобы главная кнопка на экране вызывала ощущение опасности и повышенного внимания (ещё и пульс поднимается, да-да). Мы провели несколько исследований внутри команд и поняли, что синяя кнопка отлично работает в интерфейсе, и не в убыток брендовому красному. Конечно, мы сделали исключение для частных случаев и оставили красный как дополнительный цвет для тех же кнопок. Подробнее о находках и своём опыте я пишу в Телеграм-канале о дизайн-системах.

В итоге цветом Primary может быть и красный и синий цвет. Всё зависит от контекста и пользовательского сценария. В некоторых случаях допустимо использовать брендовый красный цвет, например, в форме авторизации АТОЛ ID с одной основной кнопкой входа. А внутри личного кабинета, при выполнении регулярных задач пользователями, красные кнопки будут сбивать с толку и показывать излишнее внимание (и даже опасность). В таких случаях приходит на помощь альтернативный цвет Primary — синий.

В заключение хочу сказать, что тема эта совсем непростая, так как от разработанной палитры будет зависеть общее впечатление о компании и её продуктах. Ведь, как говорят дизайнеры, «встречают по визуалу UI, а дальше могут не пойти».

Это был исключительно наш опыт и он не заканчивается. А какие вы испытали проблемы с палитрой?