Design system
Product design
Web
Дизайн-система для сервиса защиты от DDoS
Систематизировал интерфейс продукта: foundations, 30+ компонентов и единые правила их использования.
Саммари
Спроектировал и внедрил дизайн-систему для сервиса защиты от DDoS: сформировал foundations, унифицировал 30+ компонентов и описал правила их использования. Система стала общей основой для проектирования новых интерфейсов и реализации компонентов в продукте.
30+
Компонентов объединено в единую систему
2–3x
Быстрее сборка типовых интерфейсов
Контекст и проблема
По мере роста продукта старый UI-kit перестал покрывать новые сценарии. Для отдельных задач появлялись локальные компоненты, а одинаковые элементы интерфейса постепенно расходились по внешнему виду, состояниям и поведению.
Дизайнеры повторно собирали одни и те же паттерны, а разработчики реализовывали похожие компоненты независимо друг от друга.
Я провёл аудит продукта: собрал повторяющиеся элементы, сравнил их реализации, состояния и вариации и определил основные точки для унификации.
Архитектура дизайн-системы
После аудита я выстроил систему от базовых визуальных правил к переиспользуемым компонентам. Foundations зафиксировали единые значения цветов, типографики, отступов, скруглений и теней, а компоненты строились на их основе и покрывали необходимые состояния и вариации.
Компоненты проектировались как единые продуктовые паттерны, чтобы одинаковые сущности сохраняли структуру, состояния и поведение в разных разделах продукта.
Система в продукте
Система использовалась в реальных продуктовых сценариях: одни и те же компоненты и паттерны применялись в разных типах интерфейсов — от таблиц и конфигурации защиты до аналитических дашбордов.
Результат
Запущено в productionДизайн-система стала рабочей основой продукта: новые интерфейсы собирались из переиспользуемых компонентов и единых паттернов вместо локальных решений. Сборка типовых интерфейсов стала в 2–3 раза быстрее, а единые состояния и правила использования снизили риск появления новых UI-расхождений.
30+
Единые состояния и поведение компонентов
2–3x
Быстрее сборка типовых интерфейсов