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

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

Из чего состоит настоящая дизайн-система?

Чтобы называться таковой, дизайн-система должна включать в себя четыре необходимых элемента:

Визуальный язык
Библиотека компонентов в коде
Шаблоны для дизайнерских инструментов
Команда дизайн-системы

Визуальный язык — это парадигма, определяющая то, как мы создаём интерфейсы продуктов, основа-основ.

Целостный визуальный язык включает в себя:

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

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

Очевидным плюсом использования библиотеки является то, что она существенно упрощает поддержание консистентности продуктов и стабильный уровень качества дизайна.

Хорошая библиотека включает в себя:

набор переменных-токенов, отражающих стили (в идеале, эти токены должны быть отчуждаемыми для использования командами с разной технологической базой);
полный комплект базовых компонентов (кнопки, инпуты и т.п.);
готовые встраиваемые блоки (попапы, формы, шапки и т.п.);

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

Важно помнить, что дизайнерские шаблоны — это лишь часть дизайн-системы и сами по себе, без привязки к библиотеке компонентов, они являются лишь статичными артефактами.

Критически важно, чтобы существовал (и поддерживался в актуальном состоянии) ресурс, где будет всецело отражёна дизайн-система со всеми её составляющими. Этот ресурс будет являться вашим единым источником правды о системе — местом, с которым можно будет регулярно сверяться в процессе работы.
Существование такого ресурса кардинально упрощает взаимодействие вокруг дизайн-системы, т.к. все участники процесса имеют под рукой единую точку, куда можно обратиться за ответами на все распространённые вопросы.

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


Не понимаю: чем дизайн-система отличается от гайдлайна?

Гайдлайн в традиционном понимании — статичный документ, в котором фиксируются правила работы с визуальным стилем компании. Дизайн-система может включать в себя эту информацию, но она гораздо шире. Гайдлайн — лишь один из элементов системы.

Просьба добавить материал в свой блог:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *