Что такое дизайн-системы и где они применяются

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

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

Корни

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

Пользователь то и дело находил что-то новое, удивлялся: «вау, как они хитро замаскировали меню!». Владельцы заводов показывали сайты друг другу за кружкой пива, восторженно тыкая пальцем на крутящийся и сверкающий flash-логотип. Сайты предваряли специальные странички, на которых пользователю рассказывали, как всем этим пользоваться. Такого понятия, как юзабили, в принципе не существовало — его и не могло быть при том уровне интернет-грамотности.

Со временем произошли три логичные вещи:

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

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

Первой осмысленной попыткой масштабной веб-унификации можно назвать Material Design от Google. Над идеей начали работать в 2011 году, а в 2014 представили готовую дизайн-систему.

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

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

1. Облегчает жизнь пользователю за счет стандартизации UI и логики работы.
2. Повышает узнаваемость бренда — этому способствует единый визуальный стиль всех проектов.
3. Экономит время дизайнеров — создавать макеты и прототипы с готовой библиотекой под рукой получается гораздо быстрее. А готовые паттерны ускоряют тестирование.
4. Упрощает передачу проекта другой команде дизайнеров в случае чего.
5. Дает конкурентное преимущество — если о создании дизайн-системы рассказать в СМИ, бренд будет на слуху, его станут обсуждать в дизайн-сообществе, а все остальные будут завидовать и кусать локти друг другу.

Сегодня

Явление вызывает интерес у дизайн-сообщества: появляются сайты-агрегаторы с лучшими примерами дизайн-систем. Самые известные из зарубежных — styleguides.io и designerlynx.co.

Самый популярный агрегатор в России, Design Systems Club, появился в конце прошлого года. Инициатива принадлежит Андрею Сундиеву и Юрию Ветрову из Mail.Ru Group. Они собрали на сайте статьи, презентации и выступления, посвященные дизайн-системам, а также живые библиотеки компонентов.

Так в каталоге доступны гайдлайны Альфа-Банка, Дизайна Государственных систем, Mail.Ru Group, Рамблера, Контура и Яндекса.

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

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

Альфа-Банк

Новая дизайн-система Альфа-Банка на библиотеке React появилась в октябре 2017 года.

В принципах расписана методология, единство UX во всех продуктах, а также UI — для iOS и Android. И обозначена приоритетность мобильного интерфейса.

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

На сайте можно посмотреть примеры использования компонентов с кодом, а полная версия для фронтенд-разработчиков находится в репозиториях GitHub. 

Сценарии основных действий: ввод паролей, верстка сумм, названия и номера счетов, номера телефонов.

Инструкция есть для разработчиков и дизайнеров. Причем для последних — весьма лаконичная.

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

Дизайн-системы государственных сайтов

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

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

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

В большинстве развитых зарубежных стран дизайн-системы существуют уже довольно давно. Посмотрите, например, какие стандарты ввели Великобритания, Австралия и Италия.

Дизайн государственных систем России

История наших дизайн-систем началась в 2016 году. Тогда AIC, Лаборатория Артема Геллера и СТМ с одной стороны и Минкомсвязь с Институтом Развития Интернета с другой решили унифицировать государственные сайты.

В копилке команды уже есть цифровой герб РФ, несколько государственных сайтов и дизайн-система, которая помогает работать дальше.

Следить за развитием дизайна государственных систем можно в блоге команды и на Фейсбуке.

Итого: что входит в дизайн-систему

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

Проектная разработка

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

А именно — ощутимо экономят время.

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

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

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