КОНТЕКСТ ПРОДУКТА
Getintent объединяет работу с рекламными кампаниями, группами, креативами, площадками, сегментами и отчётами. Разные разделы используют одни и те же базовые сценарии: поиск, фильтрацию, выбор, редактирование, контроль статусов
PRODUCT DESIGN · DESIGN SYSTEM
Единая дизайн-система для масштабирования Getintent
Getintent — платформа для закупки и управления рекламным трафиком. Я разработал дизайн-систему с нуля, объединил разрозненные интерфейсные решения и создал основу для последовательного развития продукта
Роль
Product Designer
Зона ответственности
UI, компоненты, паттерны,
документация
Платформа
Web · AdTech
Период
2023 – настоящее время
КОНТЕКСТ И ЗАДАЧА
Как устроен Getintent
МОЯ ЗАДАЧА
Создать единую системную основу для продукта, определить общие правила интерфейса, унифицировать повторяющиеся элементы и сделать новые сценарии продолжением существующей системы, а не отдельными решениями
Задача была не в редизайне одного раздела — система должна была работать во всём продукте
ОСНОВНЫЕ РАЗДЕЛЫ ПЛАТФОРМЫ
Управление рекламой
- Рекламодатели
- Кампании
- Группы кампаний
- Креативы
Аудитории и размещение
- Сайты
- Сегменты
- Списки доменов
- Списки приложений
- Списки устройств
Отчётность и инструменты
- Отчёты
- Баланс
- JS/CSS-сниппеты
Повторяющиеся сценарии: таблицы, поиск, фильтры, формы, массовые действия
АУДИТ ИНТЕРФЕЙСА
Интерфейс не успевал за развитием продукта
ИСХОДНАЯ СИТУАЦИЯ
Первая версия продукта появилась более 10 лет назад. По мере развития добавлялись новые функции, разделы и технологии. В результате в одном интерфейсе сосуществовали решения, созданные в разное время и на разных технических основах
ТЕХНИЧЕСКИЙ КОНТЕКСТ
Часть элементов была реализована локально и с техническими компромиссами. Похожие сценарии приходилось поддерживать в нескольких вариантах, а дальнейшее развитие продукта требовало перехода к единой технологической и интерфейсной основе
Проблема находилась одновременно в интерфейсе и в способе его реализации. Поэтому нужен был не локальный редизайн, а единая система
ТЕХНИЧЕСКИЕ ПРИЧИНЫ
Смешение технологий
Разные части продукта создавались в разное время и использовали разные подходы к реализации интерфейса
Локальные реализации
Похожие элементы создавались отдельно для разных разделов и постепенно расходились по структуре, внешнему виду и поведению
КАК ЭТО ПРОЯВЛЯЛОСЬ В ИНТЕРФЕЙСЕ
Отсутствие единых правил
Компоненты, состояния и повторяющиеся сценарии не были описаны как общая система
Перегруженные экраны
Настройки были распределены между разными зонами, действия не имели ясной иерархии
Аудит показал, что проблема находилась не в отдельных экранах, а в отсутствии общих правил для всего интерфейса
ПОДХОД К РЕШЕНИЮ
От отдельных экранов к единой модели интерфейсов
От экранов к сценариям
Повторяющиеся задачи стали проектироваться как общие паттерны: таблицы, фильтры, формы, статусы и массовые действия
От частных решений — к системе
Элементы получили единые правила, состояния и структуру, пригодную для повторного использования в разных разделах
От макетов к реализации
Компонентная модель формировалась вместе с frontend-разработкой и учитывала постепенный переход продукта на единую технологическую основу
Основа дизайн-системы
Единый фундамент
для продукта
Я собрал систему на основе дизайн-токенов и переменных Figma. Это упростило поддержку интерфейса и передачу решений в разработку
Дизайн-токены — единый язык системы
Цвета, типографика, отступы, радиусы и тени заданы через общие значения и семантические роли
Консистентность
Одинаковые правила
во всех разделах
Управляемость
Изменения через токены
и переменные
Готово к разработке
Единые названия
и понятная структура
Типографика
Vela Sans и единая иерархия текстовых ролей
Ag
Vela Sans
Кириллица и латиница
Display
Заголовок
28 / 32
H0
Заголовок 0
24 / 28
H1
Заголовок 1
21 / 24
Text 1
Основной текст
15 / 18
Text 2
Доп. текст
13 / 16
Code
Technical
13 / 16
Цветовая система
Ключевые шкалы и семантические роли
Нейтральная шкала
Брендовая шкала
Семантические роли
Main
Link
Background
Success
Warning
Error
Отступы и сетка
Базовый шаг — 4 px
4
8
12
16
24
32
48
64
12 колонок Max-width 1440 px Gutter 24 px
Радиусы и тени
Ключевые значения без полного каталога
Радиусы
None
S
M
L
XL
Full
Тени
SM
MD
LG
Токены и переменные
Значения хранятся централизованно
Компоненты используют общие токены, поэтому изменения распространяются на весь продукт
color.background.primary
#FFFFFF
color.text.primary
#181D27
color.brand.primary
#4F7FE8
spacing.medium
16px
radius.medium
8px
Светлый режим
Aa
Тёмный режим
Aa
КОМПОНЕНТНАЯ СИСТЕМА
Компоненты, которые работают в дизайне и коде
Единая библиотека с общими правилами, состояниями и поведением. Компоненты внедрены во весь продукт и используются в коде
Единая библиотека
Компоненты разделены по типам и сценариям
Связь с кодом
Названия совпадают в Figma и во frontend
Токены и переменные
Frontend использует токены системы
Внедрено в продукт
Система работает во всех разделах
Принципы системы
- Единая архитектура компонентов
- Единое поведение и состояния
- Совпадение названий в Figma и коде
- Масштабируемость и поддержка
- Постоянное улучшение библиотеки
Обзор библиотеки компонентов
Библиотека включает базовые элементы интерфейса и сложные продуктовые паттерны для работы с данными
-
Accordion -
Badges -
Breadcrumbs -
Button Group -
Buttons
-
Code Editor -
Date Picker -
Dropdowns -
Forms -
Inputs
-
Links -
Loaders -
Pagination -
Scroll Bar -
Selects
-
Switchers -
Tags -
Text Area -
Tooltips -
Tree
Один компонент — множество вариантов
Компонент управляется через свойства: назначение, состояние, размер, форма и работа с иконками. Все варианты основаны на одном наборе компонентов
БИБЛИОТЕКА КОМПОНЕНТОВ
Компоненты для разных задач
Система охватывает не только базовые элементы интерфейса, но и компоненты для ввода данных, навигации и сложных продуктовых сценариев
Формы и ввод данных
Поля, селекты и текстовые области с едиными состояниями и валидацией
Выбор и переключение
Свитчеры, чекбоксы, радиокнопки и сегментированные контролы
Навигация по данным
Пагинация, хлебные крошки, вкладки и списки
Сложные структуры
Дерево, аккордеон, выбор даты и сложные сценарии
СИСТЕМА В ПРОДУКТЕ
От компонентов к рабочим сценариям
Компоненты дизайн-системы используются не изолированно, а собираются в повторяющиеся сценарии и реальные экраны
Единый паттерн для работы с данными
Экран объединяет повторяющиеся элементы системы: фильтры, основные действия, таблицу, пагинацию и групповые операции
Фильтры
Поиск и статус помогают быстро сузить набор данных
Основные действия
Имеют предсказуемую иерархию
Таблица
Строки, ссылки, меню и пагинация используют единые правила
Групповые операции
Ускоряют работу с большими наборами данных
Одни правила — разные задачи продукта
Компоненты и паттерны системы применяются в ключевых сценариях и разделах
Отчёты
Настройка параметров, группировка и просмотр рекламных данных
Таблицы сущностей
Управление списками сущностей, фильтрами и действиями над записями
Формы сущностей
Просмотр и редактирование данных сущности через единую форму
РЕЗУЛЬТАТ И ВЫВОДЫ
Что изменилось после создания системы
Дизайн-система объединила интерфейс Getintent, снизила фрагментацию и дублирование, упростила работу команды и создала основу для масштабирования продукта
120+
компонентов
Единая библиотека покрывает весь продукт и ключевые сценарии
14
категорий
Логичная структура системы для навигации и масштабирования
Единые правила
Общие состояния, отступы и паттерны для всех разделов продукта
Понятный handoff
Токены, документация и примеры упрощают передачу в разработку
Фрагментированный интерфейс, разные подходы и стили
Единый стиль, выверенные отступы и предсказуемые паттерны
Что это дало
Продукту
Масштабирование новых разделов и сценариев без потери качества интерфейса
Дизайнерам
Меньше рутины и больше фокуса на задачах пользователей и проверке гипотез
Разработчикам
Понятные спецификации и токены упрощают реализацию и поддержку интерфейса
Пользователям
Единый и предсказуемый опыт во всех разделах платформы
Выводы
Система растёт из сценариев
Реальные задачи команды становятся основой компонентов и паттернов
Баланс стандартизации и гибкости
Правила дают консистентность, но не ограничивают развитие продукта
Handoff — часть системы
Документация, примеры и токены делают передачу предсказуемой