что это такое и где применяется

Когда появились дизайн-системы

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

Термин «дизайн-система» появился в середине ХХ века и означал систему визуальной идентификации бренда. Правда, в то время речь шла только о физических продуктах на полках магазинов или о самой сети магазинов.

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

Одним из первых в России о дизайн-системах заговорил Артём Геллер, партнер компании «Смена» (центр компетенций на базе объединения госпрактик AIC и «Лаборатория Артема Геллера»). Сейчас в рамках «Смены» мы разрабатываем дизайн-системы для государственных сайтов.

На сегодняшний день в мире зафиксировано более 500 дизайн-систем. Все они собраны на сайте Website Style Guide Resources. Это первый и самый полный каталог со множеством категорий и полезных образовательных материалов.

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

Понятие «дизайн-система» часто путают с более мелкими явлениями: гайдлайн, UI-кит, брендбук. На деле у этого определения более широкое значение.

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

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

Александра Ермоленко, директор департамента дизайна Rambler&Co, рассказывает, какие компоненты входят в дизайн-систему Rambler:

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

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

Обычно дизайн-системы нужны крупным продуктам, которые регулярно обновляют и запускают новые сервисы: банкам, холдингам, международным корпорациям. Самый яркий пример в России — «Яндекс» с его огромным количеством проектов: музыка, блоги, афиша, почта и другие.

Пример дизайн-системы, на которую можно ориентироваться, недавно представил «Альфа-Банк». Приветливый тон, яркие иллюстрации и понятная навигация уже располагают к продукту.

Кроме этого, дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие. Большинство компаний публикуют часть своих наработок. Их на своём сайте собирает Юрий Ветров, директор по дизайну в Mail.Ru Group.

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

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

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

Саша Окунев, автор проекта /designer

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

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

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

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

Как дизайн-системы помогают в работе

Польза дизайн-системы проявляется на внутреннем и внешнем уровнях.

Польза для команды

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

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

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

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

Польза для потребителей

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

Как понять, нужна ли вам дизайн-система

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

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

Несколько отделов вашей компании одновременно работают над одним проектом

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

Например, вы разрабатываете CRM-систему. Если у вас есть дизайн-система, не нужно шлифовать прототип до идеала, чтобы протестировать новый сервис. Достаточно собрать первый прототип и дать доступ к ограниченному кругу пользователей, которые укажут на недостатки продукта. А дизайн-система поможет доработать его и быстро внедрить новые функции.

Есть потребность масштабировать дизайн на сотни макетов

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

У компании есть ресурсы на создание дизайн-системы

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

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

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

Что надо запомнить

Вместо вывода мы составили список основных тезисов.

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

Статья была опубликована на Cossa.ru. Автор — Сергей Попков, шеф-дизайнер в AIC.