Дизайн-система позволяет быстро взаимодействовать с компонентами, легко вносить изменения во все макеты и в целом прививает дизайнеру навык организации больших объемов информации.
Зачастую, дизайнер начинает делать дизайн-систему аккуратно, придавая ей должное внимание. Но в по мере увеличения экранов становится, как мне кажется, морально труднее вносить новые компоненты и корректировки. Но помните одну вещь - чем больше времени уделить дизайн-системе, тем больше времени она сэкономит в будущем.
Основное правило дизайн-систем: чем меньше компонентов — тем лучше и вам, разработчику и конечному юзеру. Это касается количества цветов, шрифтов, иконок и так далее. Дизайн будет выглядеть более консистентным и единым.
Цвета
Цвета нужны не только для того, чтобы показать как выглядит ваш дизайн, но они также вызывают эмоции от использования продукта или сервиса, показывают персонализацию вашего бренда и буквально «разговаривают» с пользователем.
Определите цветовую палитру
Определение цветовой палитры очень важный этап в построении дизайн-системы, но часто этот процесс вызывает трудности. Настроение, эмоции, запоминаемость — все это цвета.
Базовая цветовая палитра должна содержать в себе следующие оттенки: нейтральный (Neutral) , главный (Primary) , акцентный (Secondary) и «обратная связь» (Feedback).
Вам не нужно делать по 50 оттенков каждого цвета. Это даст только путаницу, но никак не пользу. Вместо этого постарайтесь сделать около 6-12 и используйте один цвет в одном и том же месте на всех макетах.
Например, обводка инпута в дефолтном состоянии на первом экране «Neutral / 300». Тогда на следующих экранах она должна быть точно такая же.
Нейтральный (Neutral) в основном применяется в дефолтных или выключенных состояниях элементов. Обычно, это оттенки серого или синего.
![Палитра "Neutral" Палитра "Neutral"](https://webcf.waybackmachine.org/web/20220705184742/https://habrastorage.org/getpro/habr/upload_files/01b/19f/768/01b19f76845c7ec4e9246e1e4905a9b2.png)
Базовый (Primary) используется для интерактивных элементов, где требуется максимальный фокус юзера. В основном используется для элементов активном состоянии. Вы можете иметь больше чем один базовый цвет, но лучше начинать с одного.
![Палитра "Primary" Палитра "Primary"](https://webcf.waybackmachine.org/web/20220705184742/https://habrastorage.org/getpro/habr/upload_files/0f1/a8c/bfe/0f1a8cbfe9588ca0c26f9905b987e374.png)
Акцентные (Secondary) используются для поддержки базового цвета. Могут использоваться для бейджей или лейблов.
Цвета обратной связи (Feedback) нужны для того, чтобы визуально сообщать пользователю о результатах его возможных действий. Ошибку или критическое действие (Error) показывают красным цветом. Например, удаление строки данных из таблицы. Предупреждение (Warning) — оранжевым. Успех (Success) — зелёным.
![Палитра "Error" Палитра "Error"](https://webcf.waybackmachine.org/web/20220705184742/https://habrastorage.org/getpro/habr/upload_files/589/f91/81b/589f9181bbf3a50f76e4f5d33dd45f45.png)
![Палитра "Warning" Палитра "Warning"](https://webcf.waybackmachine.org/web/20220705184742/https://habrastorage.org/getpro/habr/upload_files/17f/77d/2fe/17f77d2fea84c62b5b140c75c55caae2.png)
![Палитра "Success" Палитра "Success"](https://webcf.waybackmachine.org/web/20220705184742/https://habrastorage.org/getpro/habr/upload_files/b4a/6a9/98f/b4a6a998f0b60935235c1c96c7a614d9.png)
Определите цветовую палитру перед тем, как начнёте делать следующие экраны
Большое количество дизайнеров попадают в неудобную ситуацию, в процессе создания UI без стилей цветов. Когда экранов становится больше — возникнет «пипеточная» ситуация. Придётся прыгать от одного макета к другому, чтобы взять такой же цвет.
Чтобы этого не возникло представим, что вы сделали первый экран, на котором есть модальное окно календаря (взял в пример его так как там обширное количество цветов).
![](https://webcf.waybackmachine.org/web/20220705184742im_/https://habrastorage.org/getpro/habr/upload_files/437/309/4e1/4373094e15067d6f5cbf50cf363dcf21.webp)
Затем вы последовательно начинаете создавать стили для каждого цвета помня об иерархии о которой рассказывалось выше и применяете на следующих макетах.
![](https://webcf.waybackmachine.org/web/20220705184742im_/https://habrastorage.org/getpro/habr/upload_files/936/60b/68c/93660b68c4424999f3314e435ab70209.webp)
Нейминг: "Neutral / 300".
С «Neutral» все понятно, но кто такой этот «300»? Эти цифры созданы исключительно для ориентации и коннекта с между дизайнером и
. Обычно названия начинаются со 100 и заканчиваются на 900. Шаг зависит от того, сколько у вас цветов. 100 — самый светлый оттенок цвета. 900 — самый тёмный. В шрифтах такая же ситуация, только 100 — самое тонкое начертание, а 900 — толстое.
Figma позволяет удобно разделять стили по папкам с помощью слэша «/». Пользуйтесь этим, чтобы создать правильную иерархию.
![](https://webcf.waybackmachine.org/web/20220705184742im_/https://habrastorage.org/getpro/habr/upload_files/1d7/963/ca5/1d7963ca515a33e6afe111598c868a1b.webp)
Контраст
При выборе цветовой палитры нужно всегда держать в голове доступность для пользователей вашего интерфейса. Не каждый юзер имеет хорошее зрение или монитор 4К. Хороший UI должен быть хорошим для всех.
Одним из главных пунктов в доступности является контраст.
Хорошим способом проверять насколько ваш текст контрастен на том или ином фоне является сравнение с помощью рекомендаций Web Content Accessibility Guidelines (WCAG) 2.1.
В Figma Community вы можете найти большое количество плагинов для анализа контраста. Я предпочитаю плагин, который изображен ниже.
![](https://webcf.waybackmachine.org/web/20220705184742im_/https://habrastorage.org/getpro/habr/upload_files/a41/1ac/831/a411ac831fd302259bd742cb8a81274e.webp)
Как понять какой контраст мне подходит?
Лучше всего когда ваш контраст соответствует уровню AA для большинства элементов в UI.
![](https://webcf.waybackmachine.org/web/20220705184742im_/https://habrastorage.org/getpro/habr/upload_files/5da/a39/aaf/5daa39aaf1cdb92ead0debfdc9fb0a80.webp)
Итог
Выбор цветов влияет на восприятие продукта, его доступность и запоминаемость.
Главное, уделить должное внимание этим вещам, так как если этого не сделать, вы обретете себе проблем в будущем, когда количество экранов будет тяжело сосчитать.
***