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

Систематизация дизайна появилась вместе с тиражностью. Так, например, первые рукописные книги для удобства и оперативности копирования приводили к единым правилам, сеткам и повторяющимся элементам. Термин «дизайн-система» появился в середине ХХ века и означал систему визуальной идентификации бренда. Правда, в то время речь шла только о физических продуктах на полках магазинов или о самой сети магазинов. С появлением интернета дизайнерам пришлось осваивать новое направление — веб-дизайн. О термине «дизайн-система» надолго забыли. Примерно в двухтысячных о нём вспомнили вновь — дизайнеры заметили, что многие вещи можно систематизировать, упростить и автоматизировать. Одним из первых в России о дизайн-системах заговорил Артём Геллер, арт-директор «Лаборатории Артёма Геллера».

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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