Daria Tsukali
Product Designer · UX/UI
С 2019 года проектирую интерфейсы, с 2023-го — в продуктовом дизайне: веду задачи от интервью и гипотез до макетов и дизайн-системы. Открыта к предложениям из разных индустрий. Работаю удалённо из Бишкека, английский B2.
Дизайн-система витрин
- Роль
- Design Systems Engineer
- Состав
- 5 коллекций токенов, 17 компонентов
- Проект
- Конструктор витрин, Click2Money
- Дата
- 2024
- Стек
Результат
Новый шаблон собирается из готовых частей, а правка токена меняет все шаблоны сразу
Контекст
Дизайн-система нужна была для шаблонов витрин в конструкторе. Пользователь конструктора должен был менять вид витрины на ходу, от размера карточек, радиусов и отступов до палитры и акцентного цвета, поэтому главная сложность была в архитектуре системы, а не в отдельных компонентах. Мы заложили фундамент на токенах, а дальше систему оставалось расширять новыми типами карточек, заголовков и баннеров.
Токен это именованное значение стиля, например цвет или отступ, на которое ссылаются компоненты. Новый шаблон собирается из готовых частей, а правка одного токена меняет все шаблоны сразу. Токены разложены по пяти коллекциям (тема, акцент, палитра, размер и контрольные точки), и у каждой есть режимы, которые переключают все её значения разом.
Темы
Коллекция theme собирает итоговый вид витрины: 13 токенов для текста, фона, акцентов и границ, и ни один не хранит цвет сам, а ссылается на палитру или акцент. Светлая и тёмная тема это два режима одной коллекции, поэтому переключение темы не трогает ни один компонент.
Акцентный цвет
Акцент это цвет кнопок, выделенного текста и подложек. Каждый из четырёх акцентов, синий, зелёный, голубой и бирюзовый, это режим коллекции accent, а внутри него один цвет в трёх вариантах: основной, 60% для наведения и 12% для лёгких подложек. Новый акцент добавляется одним режимом.
Палитра
Базовые цвета, на которые ссылается тема. Вторичный текст, разделители и границы карточек это один цвет в трёх прозрачностях: 60, 12 и 4%.
Размеры
Коллекция size задаёт отступы и радиусы в трёх режимах, L, M и S, по умолчанию M. Размер меняет плотность карточки, а не её устройство.
Контрольные точки
Три брейкпоинта, 1440, 870 и 320 px, тоже режимы: при переключении меняются поля, шаг сетки, минимальная ширина карточек и число колонок, 3, 2 и 1 для широких карточек и 6, 5 и 2 для узких. Кроме токенов адаптируется только заголовок h1, остальная вёрстка одна на все экраны.
Компоненты
17 компонентов, от кнопки и вкладки до шапки и подвала страницы. Отдельно проектировала для витрин баннеры и модальные окна. Карточка предложения одна: поля в ней включаются флагами, а тема, акцент, размер и брейкпоинт переключаются режимами прямо на ней, и в плейграунде всё это видно на одной карточке.
Типы карточек
Два расположения: широкие карточки идут столбцом, узкие в ряд, и в каждом показатели подписаны либо текстом, либо иконками. Итого четыре типа карточки на все шаблоны.
Типографика
Roboto для текста и Inter для сумм и показателей: оба шрифта с большим набором начертаний и языков, с запасом под витрины для других стран.
Карточка предложения в светлой и тёмной теме, ниже палитра и токены theme в двух режимах
Одна карточка в четырёх акцентах, ниже токены accent: один цвет в трёх прозрачностях
Карточка в трёх размерах с разметкой отступов, ниже отступы и радиусы по режимам, px
Значения токенов по брейкпоинтам
Локальные компоненты и четыре типа карточки: textWide, iconWide, textNarrow, iconNarrow
Карточка предложения в плейграунде: флаги полей и режимы токенов
Стили текста