Корпоративная дизайн-система

О проекте

В компании не было единой дизайн-системы – каждая продуктовая команда использовала свой собственный UI-kit, что приводило к несогласованности дизайна, замедляло запуск новых проектов.

 

Я проявил инициативу и помог создать масштабируемую корпоративную дизайн-систему, которая используется во всех внутренних продуктах компании.

Роль

UI/UX

Команда

2 человека

Стадия

Проект с нуля

Процесс

/ Анализ существующих дизайн-паттернов:

Первым шагом в создании дизайн-системы стал детальный UX/UI анализ существующих дизайн-паттернов, используемых в продуктах. Он включал:

  • Инвентаризацию существующих компонентов: я провёл всесторонний аудит текущих UI-компонентов и паттернов, зафиксировал их функции, вариации;
  • Сбор обратной связи: я собрал ОС от дизайнеров и разработчиков, чтобы выявить проблемные точки и области, требующие улучшения.

/ Архитектура

Для создания гибкой и масштабируемой системы я выстроил архитектуру дизайна на основе многоуровневой структуры:

Primitives → Icons library → Inner product style guide → Base components → Inner product design file

Каждый уровень хранится в отдельном файле Figma и связан с другими с помощью функции Create alias. Это позволяет сохранить модульность системы и упростить её поддержку.

/ Атомарный подход и дизайн-токены:

Для создания масштабируемой и удобной в поддержке дизайн-системы я использовал методологию Atomic design. 

/ Корпоративный стиль:

Приведение дизайн-системы в соответствие с корпоративным стилем компании было важным условием для сохранения целостности бренда. Для этого я использовал Бренд-гайд.

Результат

Новая дизайн-система помогла унифицировать UI во множестве внутренних продуктов, снизив визуальную несогласованность и дублирование работы.

 

Командам больше не приходится начинать с нуля – они могут переиспользовать базовые компоненты и токены, что ускорило процесс дизайна и релиза.

Previous
Next