Всё, что менеджеру проектов нужно знать о дизайн-системе

Давным-давно я работал аналитиком в компании, занимающейся софтом для гитаристов. И там руководитель рассказал мне, что такое «консистанс». Если одним словом, то это «похожесть». Если у нас в одном месте применён какой-то дизайнерский ход, он должен применяться везде, чтобы приложения были последовательными и консистентными.

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

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

В целом, первые дизайн-системы появились с появлением книгопечатания и тиражности. Это были первые гайдлайны печатных текстов, первые сетки и коллекции элементов. Но как самостоятельное явление, они получили распространение в середине двадцатого века. Вот, посмотрите кусок дизайн-системы навигации Нью-Йоркского метро:

Если хотите познакомиться с публичными дизайн-системами, загляните на сайт Website Style Guide Resources, там их собрано несколько сотен.

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

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

Компоненты дизайн-системы

Вот из такой пирамидки состоит дизайн-система:

Визуальный язык

В качестве примера можно привести российские банки. Всё, что связано со Сбером зелёное. Т-Банком — жёлтое. Альфой — красное. ВТБ — синее. Газпромбанком — голубое. Для банков это прямо характерно. В личной практике я встречал этот подход в одной компании — Инвитро. Вот, посмотрите презентацию по ней:

Остальные ограничивались брендбуком, это более узкая штука.

Посмотрите на скриншоты банковских приложений. Я убрал все упоминания банков, но вы всё равно, легко опознаете, каким банкам они принадлежат:

Код визуальных элементов

Предположим, у вас есть кнопка действия. В дизайн-системе может лежать код этой кнопки. Если дизайнеру понадобится задизайнить такую кнопку, он просто берёт её из дизайн-системы, а разработчик берёт оттуда сниппет с кодом, меняя только текст и/или иконку. Это сокращает время дизайна и разработки.

Обычно туда входят такие элементы:

• Цвета.
• Шрифты.
• Пространство.
• Формы объектов.
• Иконки.
• Изображения.
• Взаимодействия.
• Анимации.
• UI-компоненты.
• Звуки.

Выглядеть это может, например, вот так:

Гайдлайн

В гайдлайне описываются графические правила. Например, что все поля ввода должны иметь скругление в x пикселей и внешнюю тень определённого вида.

Можно описать структуру элементов и наборы их параметров.

Назначение дизайн-системы

Дизайн-система способна принести много пользы:

• Ускорение дизайна и разработки.
• Уменьшение затрат на дизайн и разработку.
• Ограничение полёта фантазии внутренних заказчиков.
• Автоматизация. Разработчики могут брать сниппеты графических элементов из дизайн-системы, а не кодить их каждый раз заново.
• Ускорение прототипирования и повышение его качества.
• Ускорение А/Б тестов.
• Автоматическое применение изменений в дизайне сразу ко всем интерфейсам всех продуктов компании. Если банк решил вдруг стать розовым, не придётся вручную везде менять цвет.
• Синхронизация работы дизайнеров и разработчиков.
• Облегчение продуктовых исследований.
• Улучшение пользовательского опыта. Пользователи намного быстрее осваивают новые продукты компании, если они консистентны со старыми. Например, главное меню во всех маковских приложениях всегда в первой строке на экране, а не где угодно, как в виндовых приложениях. Пользователь всегда знает, где искать меню.
• Облегчение и ускорение ввода новых дизайнеров.

Недостатки дизайн-системы

Давайте также рассмотрим минусы дизайн-систем:

• Это дорого. Чаще всего, создание, внедрение и поддержка дизайн-системы потребует отдельного и совсем не маленького бюджета.
• Необходимость тратить время на синхронизацию системы с визуальной политикой бренда. В целом, применение таких инструментов как Figma, всё это дело сильно облегчает.
• Разработчиков, ранее не работавших с этим инструментом, придётся обучить с ним работать и обязать это делать. Требуются усилия менеджмента.

Как сделать дизайн-систему

Это большая работа. Так или иначе задействуется большая часть команды — продакт с прожектом, дизайнеры, ведущие разработчики, возможно арт-директор.

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

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

По мере разработки первых компонентов подключаются разработчики и создают сниппеты кода для этих компонентов.

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

В целом, это всё, что руководителю проектов нужно знать о дизайн-системе.