От атомов до готовых интерфейсов
Проектирую дизайн-системы
Создаю дизайн-системы, которые масштабируются и экономят время команды.
Люблю, когда в интерфейсе есть логика, а не просто красота.
Здравствуйте, я
Максим Борисюк
UI/UX & web designer
Специализируюсь на интерфейсах для веба и мобильных приложений. Моя задача — делать не просто красиво, а так, чтобы интерфейс решал конкретную проблему пользователя и был удобен для команды разработки.
Люблю работать в команде профессионалов: для меня важно, чтобы дизайн был не «вещью в себе», а рабочим инструментом, который экономит время всей команды.
Эту страницу я позиционирую как своё портфолио. Здесь собрал свою дизайн-систему с нуля: покажу, как проектирую компоненты, продумываю все возможные состояния и собираю из них полноценные экраны. Такой метод позволяет минимизировать правки на этапе разработки и масштабировать продукт без потери качества.
20+
лет в UI/UX
дизайне
Для чего нужна
дизайн-система
Дизайн-система — это не про «красиво и единообразно», а про управляемость продукта и экономию ресурсов. Без неё каждое решение — какой отступ использовать, какой цвет кнопки взять, как вести себя компоненту в состоянии ошибки — принимается заново, вручную, каждый раз.
Я исхожу из простого принципа: такие решения должны быть зафиксированы один раз, до того как начнётся сборка экранов. Компоненты и правила их использования становятся общим языком для дизайнера и разработчика. Это не гарантия, что всё пройдёт гладко — реальные продукты почти всегда несут legacy и инерцию, с которыми приходится считаться. Но чем раньше зафиксирована логика, тем меньше цена изменений в будущем.
Эту дизайн-систему я спроектировал именно по такому принципу — от токенов до готовых паттернов — как демонстрацию того, как я работаю с задачей.
Атомарный дизайн
Метод проектирования интерфейсов через поэтапную сборку. Определяются базовые стили — атомы; из них создаются компоненты — молекулы и клетки; далее они объединяются в блоки — организмы и шаблоны страниц — виды. Это ускоряет разработку и поддерживает единую логику дизайна.
Атом
(токены)Базовый стиль в виде дизайн-токена. Нельзя разделить на более мелкие части.
Молекула
(компоненты)Простейший функциональный UI-элемент. Собирается из атомов, или молекул.
Клетка
(паттерны)Комбинация из двух и более молекул. Формирует повторяемый паттерн взаимодействия.
Организм
(блоки)Завершённый раздел интерфейса или экрана. Объединяет атомы, молекулы и клетки.
Вид
(шаблоны страниц)Структурный макет целой страницы. Построен из организмов, содержит placeholder-контент.
Цвета
Дизайн-система использует цветовые решения как основу для построения гармоничного пользовательского интерфейса. Контраст критически важен для обеспечения читаемости текста. Поэтому в цветовую систему интегрирован коэффициент контрастности WCAG 2.2 — чтобы проектировать с учётом требований доступности.
Главные цвета
Главные цвета задают тональность бренда. Используется для ключевых интерактивных элементов: кнопок действия, активных ссылок, полей ввода. Обеспечивает визуальную связность интерфейса.
Palantinate Blue
01.
Dark Gunmetal
02.
Light Grey
03.
Синий — фирменный цвет бренда
Используется как основной для всех интерактивных элементов, включая кнопки, ссылки и поля ввода. Это помогает задать общий тон приложения.
Оттенки серого
Серый — нейтральный цвет, который составляет основу цветовой системы. В дизайне интерфейсов текст, поля форм, фоны и разделители обычно выполняются в серых оттенках.
Зелёный — статус «успех»
Цвета этой группы сигнализируют о позитивных действиях, благоприятных тенденциях или подтверждают успешное выполнение операции.
Красный — статус «ошибка»
Цвета этой группы сигнализируют об ошибках и деструктивных действиях — например, удалении файла из проекта или участника из команды.
Жёлтый — статус «информация/предупреждение»
Цвета этой группы применяются для привлечения внимания пользователя в диалоговых окнах подтверждения. Также они обозначают информационно-пояснительные разделы интерфейса — подсказки, примечания, важные уведомления, требующие осознания, но не срочного действия.
Бирюзовый — вспомагательный цвет
Вспомогательный цвет для служебных элементов макета. Применяется при работе с дизайн-макетами — например, для аннотаций, пометок, пояснений и прочих вспомогательных графических элементов.
Фиолетовый — вспомагательный цвет
Вспомогательный цвет для служебных элементов макета. Применяется при работе с дизайн-макетами — например, для аннотаций, пометок, пояснений и других вспомогательных графических элементов.
Розовый — вспомагательный цвет
Вспомогательный цвет для служебных элементов макета. Применяется при работе с дизайн-макетами — например, для аннотаций, пометок, пояснений и других вспомогательных графических элементов.
Типографика
Типографика в дизайн-системе — это ключевой элемент визуального языка коммуникации с пользователем: она выстраивает чёткую иерархию контента, позволяет быстро сканировать страницу, интуитивно выделять главные элементы, ускоряет восприятие информации и снижает вероятность ошибок при взаимодействии с интерфейсом.
Шрифты
для заголовков
Rubik
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
0123456789!@#$%^&*()
для основного текста
Nunito
АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ
абвгдеёжзийклмнопрстуфхцчшщъыьэюя
0123456789!@#$%^&*()
Иерархия
| Назначение | Гарнитура | Насыщенность (варианты) | Кегль, px | Интерлиньяж, px | Межбуквенное расстояние, % |
|---|---|---|---|---|---|
| display 2xl | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 72 | 90 | -2 |
| display xl | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 60 | 72 | -2 |
| display lg | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 48 | 60 | -2 |
| display md | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 30 | 38 | -1 |
| display sm | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 24 | 32 | 0 |
| display xs | Rubik | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 20 | 30 | 0 |
| text xl | Nunito | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 18 | 28 | 0 |
| text lg | Nunito | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 16 | 24 | 0 |
| text sm | Nunito | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 14 | 20 | 0 |
| text xs | Nunito | 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold) | 12 | 18 | 0 |
Пример шрифтовой иерархии
Инновации сегодня
display / 2xl / semiboldКак технологии меняют нашу повседневную жизнь и открывают новые возможности
display / md / regularСовременный мир стремительно развивается благодаря технологическим прорывам. Каждый день появляются решения, которые ещё вчера казались фантастикой: искусственный интеллект, квантовые вычисления, биотехнологии. Эти инновации не просто упрощают рутинные задачи — они трансформируют целые отрасли и создают новые форматы взаимодействия между людьми.
text / lg / regularЧтобы оставаться в тренде, важно не просто следить за новинками, а учиться применять их на практике. Даже небольшие технологические инструменты способны кратно повысить продуктивность и открыть неожиданные перспективы. Главное — не бояться экспериментировать и быть открытым к изменениям…
Иконки
Иконки изначально отрисовываются в размере 24×24 px с толщиной линии 2 px. Благодаря векторному формату их можно масштабировать для большинства интерфейсных задач без потери чёткости. Однако при увеличении до 64×64 px и более базовые версии могут выглядеть упрощённо — в таких случаях рекомендуется использовать адаптированные иконки с дополнительной деталировкой. При уменьшении менее 12 px качество отображения значительно снижается, иконки становятся нечитаемыми.
Стрелки
Специальные возможности
Профиль и доступ
Программирование и разработка
Животные
Платформы и сервисы
Мультимедиа
Дизайн-система содержит 2000 иконок в 45 тематических группах
Такая структура позволяет быстро находить нужные элементы для интерфейсных задач. В презентации — выборочные примеры, демонстрирующие основные стили и категории. Полный набор иконок охватывает весь спектр сценариев использования.
Отступы
Иерархия отступов — ключевой элемент дизайна: она структурирует информацию и задаёт ритм композиции. Грамотно выстроенные отступы обеспечивают логику и визуальную иерархию интерфейса.
Пример иерархии отступов
Инновации сегодня
Как технологии меняют нашу повседневную жизнь и открывают новые возможности
Современный мир стремительно развивается благодаря технологическим прорывам. Каждый день появляются решения, которые ещё вчера казались фантастикой: искусственный интеллект, квантовые вычисления, биотехнологии. Эти инновации не просто упрощают рутинные задачи — они трансформируют целые отрасли и создают новые форматы взаимодействия между людьми.
Чтобы оставаться в тренде, важно не просто следить за новинками, а учиться применять их на практике. Даже небольшие технологические инструменты способны кратно повысить продуктивность и открыть неожиданные перспективы. Главное — не бояться экспериментировать и быть открытым к изменениям…
Радиусы
В дизайн-системе используются фиксированные значения радиуса скругления для краёв блоков, кнопок и других элементов — это гарантирует визуальную согласованность интерфейса.
Пример использования разных радиусов
Bluetooth-колонка
Дизайн колонки вдохновлён классическими виниловыми проигрывателями — отличный вариант для любителей ретро-эстетики и чистого звука.
Высоты элементов
В дизайне тени выполняют двойную функцию. Во-первых, они придают интерфейсу объём и реалистичность, имитируя расположение элементов в трёхмерном пространстве (по оси Z). Во-вторых, в системе возвышения тень становится главным визуальным маркером высоты: её размер динамически изменяется в зависимости от уровня элемента — от минимальной для низко расположенных компонентов до крупной для высоко поднятых.
Размытие фона
Размытие фона — стилистический приём в современном UI-дизайне. Как и тени, оно создаёт эффект глубины, позиционируя элементы по оси Z.
Текстовые поля
Текстовые поля — базовые элементы интерфейса для ввода текста пользователем. Они широко применяются в формах, диалоговых окнах, поисковых панелях и других интерактивных блоках.
Главная задача текстового поля — обеспечить удобный, понятный и доступный ввод информации. Для этого все его компоненты должны работать как единая система, минимизируя усилия пользователя при взаимодействии.
Однострочные поля (Input)
Состояния
Результаты валидации
Размещение иконок и кнопок
Максим Борисюк 
Максим Борисюк 
Максим Борисюк Многострочные поля (Textarea)
Выпадающие списки (Dropdown)
Элементы выбора
Элементы управления выбором упрощают взаимодействие с интерфейсом: позволяют быстро выделять нужные значения, настраивать диапазоны и выбирать даты. Благодаря этому пользователь тратит меньше времени, реже ошибается и не перегружает внимание.
Радиокнопка (Radio Button)
Чекбокс (Checkbox)
Переключатель (Toggle Switch)
Одиночный слайдер
Слайдер диапазона
Календарь
Навигационная цепочка (Breadcrumbs)
Тэги (Tags)
Аватары
Аватары выполняют несколько ключевых функций в интерфейсе: обеспечивают визуальную идентификацию пользователей, позволяют персонализировать профили, упрощают процессы коммуникации и навигации.
При разработке дизайн‑системы критически важно создать единую систему аватаров — как в визуальном, так и в логическом плане. Это позволит добиться консистентности интерфейса и обеспечить комфортное взаимодействие пользователей с продуктом.
Размеры и типы
Группировка
Уведомления
Нотификации нужны, чтобы оперативно информировать пользователя об изменениях, обновлениях и событиях в интерфейсе — от срочных задач до справочных данных. Они предупреждают о критических ситуациях, сообщают о фоновых процессах и дают подсказки (как тултипы) для освоения функционала.
При проектировании дизайн-системы важно обеспечить консистентность нотификаций: выбрать сценарии, форматы (всплывающие окна, баннеры, бейджи) и способы закрытия, чтобы интерфейс был удобным и понятным.
Уведомления в шапке (Header notifications)
Уведомления
Анна Королёва
Алексей Морозов
Михаил Павлов
Ольга Никулина
Андрей Продан
Сообщения
Анна Королёва
Ольга Смирнова
Михаил Павлов
Алексей Морозов
Елена Кузнецова
Интерактивные уведомления (Snackbars)
Нейтральное
Заказ оформлен
Заказ оформлен
Информационное
Обновление доступно
Обновление доступно
Подсказки (Tooltips)
Тёмный
Светлый
Брэндовый
Текст
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Текст с иконкой
Текст с заголовком
Совет: Используйте фильтры
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Совет: Используйте фильтры
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Совет: Используйте фильтры
Применяйте фильтры по категории и дате, чтобы быстрее находить нужные записи.
Текст, заголовок, иконка
Варианты появления
Выровнено по вертикали по центру — справа от элемента.
Выровнено по верхнему краю — справа от элемента.
Выровнено по вертикали по центру — слева от элемента.
Выровнено по верхнему краю — слева от элемента.
Выровнено по горизонтали по центру — снизу под элементом.
Выровнено по правому краю — снизу под элементом.
Выровнено по левому краю — снизу под элементом.
Выровнено по горизонтали по центру — сверху над элементом.
Выровнено по правому краю — сверху над элементом.
Выровнено по левому краю — сверху над элементом.
Всплывающие сообщения (Toasts)
С обводкой (light/outline)
С заливкой (filled/solid)
Нейтральное
Обработка
Файл находится в очереди на проверку.
Обработка
Файл находится в очереди на проверку.
Информационное
Новое событие
В календаре добавлена встреча «Обсуждение проекта».
Новое событие
В календаре добавлена встреча «Обсуждение проекта».
Позитивное (успех)
Сохранено
Изменения в профиле применены.
Сохранено
Изменения в профиле применены.
Предупреждение (warning)
Срок подписки
Доступ закончится через 24 часа. Продлите, чтобы не потерять функции.
Срок подписки
Доступ закончится через 24 часа. Продлите, чтобы не потерять функции.
Негативное (ошибка)
Не сохранено
Возникла ошибка записи. Данные остались без изменений.
Не сохранено
Возникла ошибка записи. Данные остались без изменений.
Фоновые процессы (Progress Indicators)
Полная версия
Компактная версия
Нейтральное
Копирование
Скопировано: 7 из 17
43%
Копирование
Позитивное (успех), скрытие по тайм-ауту
Скопировано
Скопировано: 17 из 17
100%
Скопировано
Негативное (ошибка)
Копирование
Ошибка копирования!
43%
Копирование
Статусные индикаторы в боковом меню (Status Indicators)
Низкий уровень (Low Attention) — рекомендательный, стратегический.
Средний уровень (Medium Attention) — требует внимания, но не срочного действия.
Высокий уровень (High Attention) — требует немедленного действия.
Таблицы
Таблицы в дизайн‑системе обеспечивают базовые операции с данными и позволяют эффективно работать с большими объёмами сведений. Компонент поддерживает ключевые интерактивные функции — сортировку, фильтрацию, управление столбцами, пагинацию — и включает набор типовых ячеек для разных типов данных и действий: текстовые и числовые поля, чекбоксы, тоглы, кнопки действий, раскрывающиеся элементы и др.
Ячейки таблицы: базовые состояния
Ячейка шапки — базовая
Ячейка шапки — сортировка
Шапка для чисел — выравнивание вправо
ячейка Ячейка шапки — закрепление
Ячейка шапки — свойства
Шапка с селектором строк
Ячейка таблицы — текстовая
Ячейка
Ячейка таблицы — цифровая
1 280,05
Ячейка таблицы — раскрывающаяся
Ячейка
Ячейка таблицы — dropdown
Склад
Ячейка таблицы — чекбокс
оплачено
Ячейка таблицы — тоггл
включено
Ячейка таблицы — пользователь
Ваня Ли
v.li@name.ru
Ячейка таблицы — рейтинг
Ячейка таблицы — группа кнопок
Ячейка таблицы — лейбл
Выполнен
Ячейка таблицы — категория
В пути
Ячейка таблицы — кнопка действий
Пример реализации таблицы
Мониторинг сессий
Начало Конец SES-1137
Елена С.
e.nova@mail.ru
16.04.2025 16:10
16.04.2025 16:25
Активна
manager
Ошибка авторизации
SES-2024
Андрей П.
a.petrov@mail.ru
18.04.2025 13:20
18.04.2025 14:00
Истекла
member
Завершена досрочно
SES-3005
Мария В.
m.volk@mail.ru
17.04.2025 11:00
17.04.2025 11:30
Блок
admin
Заблокирована администратором за нарушение политики безопасности
SES-4051
Дмитрий И.
d.ivanov@mail.ru
20.04.2025 15:10
20.04.2025 15:40
Таймаут
member
Таймаут (без действий 30 минут, автоматическое завершение)
SES-4448
Ольга К.
o.kuzova@mail.ru
14.04.2025 14:30
—
Таймаут
member
Ожидает подтверждения
SES-5583
Сергей С.
s.sokolov@mail.ru
21.04.2025 10:25
21.04.2025 11:10
Заверш.
guest
Успешно завершена
SES-6735
Анастасия М.
a.moroz@mail.ru
12.04.2025 10:15
12.04.2025 11:45
Заверш.
admin
Сессия завершена штатно
SES-7771
Игорь Ф.
i.fedorod@mail.ru
19.04.2025 09:50
—
Синхрон.
manager
В процессе синхронизации данных с сервером
SES-8219
Виктория Н.
v.novik@mail.ru
13.04.2025 09:20
13.04.2025 10:05
Прервана
manager
Прервана пользователем
SES-9902
Максим Л.
m.list@mail.ru
15.04.2025 08:45
—
Активна
guest
Активна (фоновый процесс мониторинга)
Показано 1–10 из 1 247
Показывать:
10
Фильтрация в таблице
Мужская одежда
размер Цена, ₽ Mossmore, утепленные
Белый
52
TR — Турция
Хлопок
2 599
ACK Regular Fit
Голубой
52
TR — Турция
Хлопок
4 170
DAVID Regular Fit
Голубой
52
RO — Румыния
Полиэстер
3 055
Just Denim, Джинсы
Серый
54
IT — Италия
Хлопок
4 598
Befree, джинсы Skater
Серый
52
IT — Италия
Хлопок
2 999
Muzzo, джинсы
Синий
52
MX — Мексика
Хлопок
5 450
Colin's, JACK Regular Fit
Синий
52
CN — Китай
Хлопок
1 750
Zarina Man
Синий
54
CN — Китай
Хлопок
1 750
Sawil, Online Exclusive
Синий
52
CN — Китай
Хлопок
1 750
Nezevai, Джинсы Baggy
Чёрный
54
RU — Россия
Хлопок
2 090
Показано 1–10 из 2088
Показывать:
10
Управление столбцами
Мужская одежда
размер Цена, ₽ Mossmore, утепленные
Белый
52
TR — Турция
Хлопок
2 599
ACK Regular Fit
Голубой
52
TR — Турция
Хлопок
4 170
DAVID Regular Fit
Голубой
52
RO — Румыния
Полиэстер
3 055
Just Denim, Джинсы
Серый
54
IT — Италия
Хлопок
4 598
Befree, джинсы Skater
Серый
52
IT — Италия
Хлопок
2 999
Muzzo, джинсы
Синий
52
MX — Мексика
Хлопок
5 450
Colin's, JACK Regular Fit
Синий
52
CN — Китай
Хлопок
1 750
Zarina Man
Синий
54
CN — Китай
Хлопок
1 750
Sawil, Online Exclusive
Синий
52
CN — Китай
Хлопок
1 750
Nezevai, Джинсы Baggy
Чёрный
54
RU — Россия
Хлопок
2 090
Показано 1–10 из 2088
Показывать:
10
Изменение ширины столбцов
размер Цена, ₽ Mossmore, утепленные
Белый
52
TR — Турция
Хлопок
2 599
ACK Regular Fit
Голубой
52
TR — Турция
Хлопок
4 170
DAVID Regular Fit
Голубой
52
RO — Румыния
Полиэстер
3 055
Just Denim, Джинсы
Серый
54
IT — Италия
Хлопок
4 598
Befree, джинсы Skater
Серый
52
IT — Италия
Хлопок
2 999
размер Цена, ₽ Mossmore, утепленные
Белый
52
TR — Турция
Хлопок
2 599
ACK Regular Fit
Голубой
52
TR — Турция
Хлопок
4 170
DAVID Regular Fit
Голубой
52
RO — Румыния
Полиэстер
3 055
Just Denim, Джинсы
Серый
54
IT — Италия
Хлопок
4 598
Befree, джинсы Skater
Серый
52
IT — Италия
Хлопок
2 999
Графики
Графики в дизайн‑системе обеспечивают наглядное представление данных — визуализируют тренды, динамику и соотношения показателей, помогая пользователям быстро анализировать информацию и принимать решения. Единый стиль графиков (согласованные цвета, шрифты, подписи, легенды и интерактивные элементы) гарантирует консистентность интерфейса, ускоряет разработку за счёт готовых компонентов и повышает удобство взаимодействия с продуктом.
Линейный график (Line chart)
Столбчатая диаграмма (Bar chart)
Накопительная столбчатая диаграмма (Clustered bar chart)
Кольцевая диаграмма (CircleStack)
Кольцевая диаграмма (DonutCore)
Дуговая диаграмма (ArcSegment)
Свечной график (Candlestick chart)
Древовидная диаграмма (Treemap)
Карта долей рынка по товарным группам
Электроника
Бытовая техника
Книги
Товары для дома
Косметика
Одежда
Спорттовары
Аксессуары
Детские товары
Радарная диаграмма (Radar chart)
Воронка (Funnel)
Компоненты в реальных интерфейсах
Здесь собраны экраны с разной плотностью и логикой: от спокойного контента до сложных дашбордов. Обратите внимание на консистентность компонентов — одни и те же элементы работают в разных сценариях и сохраняют узнаваемый стиль.
Статья блога
Типографика и читаемость.
Scrum‑доска
Плотный интерфейс и состояния.
Чат с командой
Динамичные состояния сообщений.
Дашборд с графиками
Визуализация данных и плотность.
Интернет‑магазин
E‑commerce флоу и карточки.
Страница регистрации
Компоненты форм и онбординг.
Таблица со статистикой
Структурированные данные и действия.
Видеочат
Медиа‑интерфейс и элементы управления.
Спасибо, что уделили время!
Здесь я показал не просто набор экранов, а систему целиком: как компоненты складываются в интерфейсы.
Если это откликается — контакты ниже, буду рад пообщаться.
Максим Борисюк
UI/UX & web designer