Зачем нужна дизайн-система

Сергей Гарибян
Дизайн в B2B
3 min readOct 29, 2021

Сегодня мы расскажем о принципах, на которых строится CDS (дизайн-система B2B-Center), и ее влиянии на бизнес, пользователей и сотрудников.

Что же такое дизайн-система

Дизайн-система — единый стандарт для компании, набор компонентов, правил и подходов, используемых для разработки продуктов.

Central Design System
Страница компонентов CDS

Принципы

Каждый день команда принимает решения о доработках, изменениях дизайн-системы, основываясь на принципах, описанных далее. Зачастую происходит так, что изменения не требуются и задачу можно решить уже имеющимися инструментами. Каждый раз это небольшая победа, позволяющая поддерживать чистоту и консистентность системы. Итак, принципы:

  1. согласованность. Интерфейс и сценарии компонентов и шаблонов логически согласуются между собой.
  2. стандарты дизайна. Добавляйте в дизайн-систему специфические компоненты и правила, существующие в наших проектах, только после тщательной проверки: зачем они были созданы? почему необходимо продолжать использовать их в таком же виде?
  3. протестированные решения. Постоянно проверяйте существующие и новые решения в дизайн-системе. Вносите изменения согласованно и последовательно.
  4. консистентность и масштабируемость. Добавляемые сущности не противоречат уже существующим. Если для их добавления нужно изменить существующие — добавлять только после изменений. В основной пакет добавляются абстрактные компоненты, правила и шаблоны; в общий — специфические.
  5. здоровые коммуникации и помощь. Комьюнити, а не обслуживание, коммитеры, а не заказчики. Правильно интерпретированный опыт важнее экспертного мнения.

Что изменилось

Central Design System
Профит от использования дизайн-системы

Внедрение CDS происходит постепенно и затрагивает всех причастных к продукту. В итоге все остаются в плюсе и получают:

Пользователи продукта

Качественный продукт, или семейство продуктов с едиными шаблонами поведения, что позволяет быстрее разобраться в новом продукте и упрощает работу со старыми. Например, при подключении и начале работы с договорным модулем B2B-Center вывод ошибок, работа компонентов интерфейсов будет такой же, как и на основном продукте, реализованном на CDS.

Бизнес

Получает готовую систему, которая ускоряет процесс разработки, за счет чего снижается его стоимость и повышается качество продуктов.

Дополнительная прибыль позволяет расширять количество продуктов, быстрее проверять гипотезы и еще больше увеличивать прибыль.

Дизайнеры

CDS позволяет сосредоточиться на сценариях и решении задач, а не на «вырисовывании кнопочек» и изобретении вывода ошибок с нуля каждый раз при создании нового продукта. Благодаря дизайн-системе стираются границы и становится незаметен «почерк дизайнера» внутри разных модулей. И что самое главное — нет расхождений с макетами (:

Разработчики

Ускоряется процесс разработки и дальнейшей поддержки продукта. При изменении компонента нет необходимости заменять старую версию на каждой странице. Разработчик сосредотачивает свою работу на логике продукта и его тестировании, а не выведении пикселей. Сократилось время онбординга новых разработчиков. Теперь время от выхода на работу до полноценного самостоятельного выполнения боевых задач занимает меньше недели.

Заключение

Уже более двух лет выделенная команда работает над продуктом CDS. В данный момент все дизайнеры B2B-Center работают только на дизайн-системе. Все новые продукты создаются на CDS, а также поэтапно переписывается основная площадка. Работы еще очень много, но выработанные принципы и подход уже влияет на качество в лучшую сторону. В следующей статье мы расскажем историю о жизни с UI-Kit, и вы окончательно убедитесь, что дизайну в сложном бизнесе всегда нужна система.

--

--