Этот раздел написан совместно с Мишей Гурьевым, архитектором дизайн-системы из моей команды в Дзене. Выражаю Мише благодарность за помощь.


Системность — важный навык наряду с Придумыванием. Он позволяет вам ограничивать себя, тем самым экономя ресурсы на дизайн и разработку типовых экранов.

Что значит «быть системным». Это переиспользовать оговорённые цвета, шрифты, стили типографики, иконки и иллюстрации, сетку, компоненты и целые паттерны интерфейса. В самом простом виде это будет UI Kit или библиотека компонентов. Сложнее — дизайн-система, когда к ко всему перечисленному добавляется соответствие в коде и правила взаимодействия разработчиков и дизайнеров.

Насколько систематизировать дизайн и когда. Если вы создаёте концепцию — никакая систематизация не нужна. Не парьтесь по компонентам, потому что вы легко можете отказаться от концепции или поменять её. Если это разовый проект в агентстве, можно переиспользовать базовые элементы и собрать UI Kit. Договариваться с разработчиками и готовить дизайн-систему нет смысла, если это не часть задачи от клиента. А вот в долгоиграющем продукте дизайн-система поможет вам экономить время, потому что в продукте, как правило, много элементов повторяются, и соблюдать общий визуальный язык — потому что легче переиспользовать готовое, чем изобретать своё.

Не относитесь к дизайн-системам и библиотекам компонентов как к обязательному шагу в дизайн-процессе. Всё-таки это инструмент, который окупает себя на масштабе.

Материалы

Atomic Design by Brad Frost

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

Образы и модели

Мысли Дани Ковчего про системность и модульность

Как устроены и зачем нужны дизайн-системы

Общая вводная статья от Ильи Михайлова

Книги о дизайн-системах

Набор книг от Юрия Ветрова

Дизайн-система на все случаи жизни. Алексей Зайцев @ Дизайн-выходные 2022

Про дизайн-систему VKUI на примере компонента ячейки

Разработка дизайн-системы. Часть 1 - артефакты, ценность, ключевые шаги - Дизайн на vc.ru

Обширная статья структуру и смысл ДС

DesignSystems.com

Англоязычное издание про дизайн-системы