Все мы знаем, что один из основных компонентов дизайн-системы – это цвет, но мало кто из начинающих дизайнеров понимает, сколько цветов нужно для готового проекта и как их правильнее организовать в UI ките, чтобы и самому было удобно и разработчикам понятно.
Помни одну вещь - чем больше времени уделить дизайн-системе, тем больше времени она сэкономит в будущем.
Палитра: с чего начать?
Определение палитры – важный этап в построении дизайн-системы, ведь цвет будет передавать настроение, эмоции, а также отвечает за узнаваемость бренда.
Базовая цветовая палитра должна содержать в себе следующие оттенки: нейтральный (Neutral) , главный (Primary) , акцентный (Secondary) и системный (Feedback). Также необходимо учесть оттенки черного для текста (Text).
Важно помнить, что дизайн-система должна быть масштабируемой, а значит, стоит предусмотреть сразу несколько оттенков каждого цвета.
Нейтральный цвет (Neutral) – цвет для дефолтных или выключенных состояний элементов. Обычно, это оттенки серого, коричневого, синего.
Базовый (Primary) используй для целевых элементов, чтобы получить максимальный фокус юзера.
Акцентные (Secondary) используются для поддержки базового цвета. Могут использоваться для бейджей или лейблов, таббаров, ссылок.
Системные цвета (Feedback) нужны для того, чтобы визуально сообщать пользователю о результатах его возможных действий. Это цвета ошибок, предупреждений и успеха.
Цвет для текста (Text) добавляют в систему для того, чтобы передать важность каждого текстового элемента (основной текст – темный, второстепенный – светлее).
Как подобрать удачную палитру?
У Figma есть удобные плагины. Вот ряд из них:
Color Compass – позволяет выбрать базовый цвет и автоматически сгенерировать для него все остальные цвета.
Color palettes – огромный выбор потрясающих трендовых палитр, который можно сразу интегрировать в свой проект.
Из полезных сайтов отмечу несколько:
Рандомайзер палитр – рулетка, которая выдает интересные сочетания в зависимости от указанного количества цветов и их яркости.
https://color.romanuke.com/ – помню, как сама когда-то искала палитры именно там, вдохновляющие сочетания, составленные по фотографиям.
Как организовать все цвета в UI ките?
Что я часто вижу в проектах у новичков:
Во-первых, стоит определиться, какой цвет будет базовым, какой – второстепенным, какие оттенки будут служить системными, а также не забыть про цвета для текстовых элементов.
Вот как следует организовать палитру с минимальными затратами:
Что важно:
1. Проследите за консистентностью системной палитры по отношению к другим цветам: цвета ошибок, предупреждения и успеха должны быть той же яркости и насыщенности, что и цвета из основной палитры:
2. Создайте сразу несколько оттенков каждого цвета, где значения 100 / 300 / 500 / 700 будут показывать примесь белого цвета к основному. Этот способ понадобится вам при проектировании больших дизайн-систем, где много компонентов и каждый оттенок будет отвечать за дополнительные функции.
3. При выборе оттенков для текста нужно всегда держать в голове доступность для пользователей вашего интерфейса. Не каждый юзер имеет хорошее зрение или монитор 4К. Поэтому любой текстовый элемент должен быть контрастным к фону. Для проверки контрастности текста воспользуйся этим сервисом: https://colourcontrast.cc/
Итог
Выбор палитры оказывает большое влияние на восприятие и запоминаемость бренда.
Для команды разработки одним из важных этапов является организация цветовых решений. Это упростит работу в будущем, тк не нужно будет гадать каждый раз, когда в проекте появляется новый компонент.