Как создать, внедрить и развивать дизайн-систему

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

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

Она создает общий язык и визуальное единообразие на страницах сайта и разных каналах коммуникации бренда в целом.

Специалисты выделяют два вида дизайн-систем — с открытым и закрытым кодом:

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

UI-кит

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

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

Фреймворк

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

Гайдлайны

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

Например, дизайнеру требуется сделать карточку товара. Чтобы дизайнер не продумывал каждый раз, какого цвета сделать кнопку «Добавить в корзину» и где ее расположить, в гайдлайне прописывают все параметры. Такие как отступы, расположение и величину элементов, место для кнопки, как будет выглядеть карточка при большом и малом количестве текста.

Можно бесконечно рассказывать, зачем нужна дизайн-система, но так или иначе все будет сводиться к двум основным задачам, которые она решает:

1. Упрощает жизнь дизайнерам и разработчикам

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

2. Упрощает жизнь пользователям

Органичная система пользовательского интерфейса учит пользователя интуитивно ориентироваться по всему продукту.

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

Преимущества

Автоматизация работы

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

Согласованность элементов

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

Синхронизация работы

Больше не нужно сотый раз объяснять дизайнеру ошибку в построении кнопки или писать развернутое ТЗ, достаточно просто сослаться на конкретный пункт из гайдлайна. Очень удобно, когда в компанию приходят новые сотрудники.

Больше внимания к UX

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

Недостатки

Отдельная команда специалистов

Над созданием и поддержанием дизайн-системы часто работает целая команда из разработчиков, дизайнеров, product-менеджеров, маркетологов. Это большие финансовые и кадровые затраты, которые может позволить себе не каждая компания.

Сложности внедрения

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

Трудность ребрендинга

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

Работа по стандарту

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

Одна из самых эффективных методологий в UI-дизайне для создания дизайн-системы — атомарный дизайн. Концепция сформулирована разработчиком интерфейсов Брэдом Фростом под лозунгом «Создавайте системы, а не страницы». Она включает в себя пять уровней проектирования элементов.

1. Атомы

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

2. Молекулы

Простейшие группы атомов, функционирующие вместе: две кнопки, заголовок и строка ввода, плашка уведомления, чекбокс и текст. Молекулы служат основой дизайн-систем, так как предназначены для многократного применения в едином интерфейсе. Тут мы создаем базовые элементы интерфейса.

3. Организмы

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

4. Шаблоны

Шаблоны состоят в основном из групп организмов, скомпонованных вместе для формирования образца страниц. Создаем макеты страниц без контента: меню, внешний вид сайта. Также на этом этапе оформляем список элементов вместе с правилами.

5. Страницы

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

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

Существует два подхода к интеграции дизайн-системы в готовый продукт: масштабный редизайн и постепенное внедрение дизайн-системы.

Масштабный редизайн

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

При таком подходе сначала протекает долгая фаза проектирования и только потом полномасштабное применение. В проектирование входит визуальный рефреш или объединение компонентов.

В книге “From Design Systems: Pilots & Scorecards” Дэн Молл описал критерии для поиска пилотных проектов, подходящих для внедрения дизайн-систем:

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

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

Схема постепенного внедрения дизайн-системы

Масштабный редизайн — это очень энергозатратно. Не все группы разработчиков дизайн-систем могут найти время для детальной проработки отдельного продукта. Многим компаниям приходится постепенно внедрять отдельные части.

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

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

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

Создайте концепцию бренда

Концепция — это ваш компас земной. Укажите, чего ваша команда, продукт или компания пытается достичь и почему это важно.

Например, команда Starbucks поставила задачу прояснить для самих себя и компании в целом — зачем они существуют. Для крупного бренда жизненно необходимо ясно и лаконично выразить цель и ценности команды. Компания Starbucks придумала концепцию, которая основывалась на принятии решений для достижения не только бизнес-целей, но и для улучшения опыта клиентов и партнеров: «Мы создаем цифровые продукты, которые делают наших клиентов счастливыми и наполняют гордостью наших партнеров». Это заявление стало лозунгом, которое их всех сплотило.

Опишите дизайн-принципы команды

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

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

Составьте процесс работы команды

Четкий процесс создания дизайн-решения поможет достичь согласованности в команде и повысить скорость разработки.

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

Голос и тон вашего бренда

Разработайте гайдлайны по написанию текста. Это обеспечит гладкое взаимодействие, доверие и единообразие — независимо от того, кто сочиняет контент.

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

Создание дизайн-системы требует больших временных, кадровых и финансовых затрат. Однако она способна значительно повысить продуктивность и ускорить рабочий процесс.

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