Систематизация и унификация – важная часть любого бизнес-процесса. В UX/UI-дизайне эти функции воплощает в себе дизайн-система. Обобщенно – это набор правил, стилей, элементов, отступов, на которые опираются разработчики в повседневной работе. О том, кому будет полезен дизайн-системный подход и что он дает бизнесу, мы рассказывали предыдущем
материале. Теперь разберемся, как же создать дизайн-систему с нуля.
Коротко о главномПроектирование интерфейса – невероятно трудоемкий процесс. Чтобы продуктом было легко пользоваться, дизайнер должен отлично разбираться в UX и UI, особенностях человеческой психологии, работать с архитектурой проекта и доводить до совершенства множество мельчайших деталей. Эту работу отчасти помогает оптимизировать дизайн-системный подход.
Дизайн-система – это не библиотека шаблонов или гид по стилю. Это сборник компонентов, которые структурируют и придают digital-продукту смысл. Это то, благодаря чему пользователи узнают продукты компании, а дизайнеры и разработчики не тратят время на создание одинаковых элементов. За счет хорошей дизайн-системы компания может сэкономить время и финансовые расходы. Использование единых элементов делает проект чище и проще в разработке новых элементов дизайна.
Первые инструкции по визуальной идентификации бренда стали появляться еще в середине 1950-х годов. С приходом диджитал-продуктов формат статичного, написанного руководства устарел. Система отражает подвижный, меняющийся характер проектов. Это и база сгруппированных элементов оформления, и одновременно руководство – как они должны выглядеть, взаимодействовать между собой. Дизайн-система стала нужна, когда требуется оптимально масштабировать продукт.
Поэтому многие ведущие мировые бренды уже давно используют этот инструмент в работе. Их дизайн-системы объединяют брендинг, цвет, стиль изложения материала, типографику, анимацию, визуализацию данных и многое другое, чтобы сформировать собственный язык дизайна.
Дизайн-системы есть у Apple, IBM, Airbnb, Atlassian, Microsoft, Trello, BuzzFeed и многих других крупных зарубежных игроков. Яркий пример дизайн-системы в России — Яндекс с его огромным количеством проектов: музыка, блоги, афиша, почта и другие. Дизайн-системы используют такие крупные компании, как Тинькофф Банк, Mail.Ru Group, Сбербанк и другие.
Как создать дизайн-систему?Когда компания приходит к пониманию того, что она готова к созданию дизайн-системы, возникает логичный вопрос: “С чего начать?”. Чтобы ответить на него, мы подготовили пошаговое руководство разработки дизайн-системы, включающего в себя 4 основных этапа. Сразу хотим сказать, что речь пойдет не о создании масштабной дизайн-системы для корпорации. Мы расскажем про разработку дизайн-системы для среднего или крупного бизнеса, который только начал делать первый шаги к цифровой трансформации.
ШАГ №1 Проведите совещаниеПеред тем, как приступать к разработке собственной дизайн-системы, вам нужно провести внутреннюю встречу всей команды и четко распределить роли среди специалистов. Казалось бы, очевидный шаг, но многие его почему-то пропускают. На совещание должны быть приглашены не только дизайнеры. Мы привели список тех, кто будет принимать непосредственное участие в дальнейшей работе и кого следует позвать:
Желательно сразу определить лид-дизайнера и тех, кто будет работать над созданием дизайн-системы. Например, в нашей команде над разработкой одной дизайн-системы обычно работают не более трех дизайнеров, включая лида. Такой команды вполне хватает для создания дизайн-системы для крупного или среднего бизнеса.
Специалистов по фронтенд- разработке следует сразу ввести в курс дела, обозначить задачи клиента и собрать требования по передаче макетов, чтобы на этапе реализации не было сюрпризов. Они смогут подсказать дополнительные параметры, которые им потребуются при реализации, например набор различных отступов. Синхронизация на старте позволит избежать ненужных исправлений и оптимизировать загрузку специалистов в компании.
Специалист на этой позиции будет лидировать создание удачного продукта. Поэтому менеджер продукта естественно должен быть мотивирован не меньше других участников команды, чтобы на выходе получить тот результат, который требовался.
ШАГ №2 Аудит существующего дизайна – сбор требований, целейЭтот этап станет переломным для компании, когда подход к разработке визуала разделится на “до” и “после”.
Выделите все элементы дизайна продукта: шрифты, значки, цвета, макеты, компоненты, карточки, – все, что нужно унифицировать. Определите нужные стили. Вы даже можете создать своего рода каталог UI компонентов и различных визуальных элементов, которые в дальнейшем и лягут в основу вашей дизайн системы. На данном этапе следует глубоко погрузить в процесс проверки, чтобы не захватить с собой большое количество артефактов. По наблюдениям
Graphene, многие компании, которые начинают только вставать на путь цифровой трансформации, зачастую почти полностью пропускают аудит существующего дизайна. Это ведет к дополнительным финансовым и временным затратам компании, т.к. в работу над созданием дизайн-системы приходится брать только базовые принципы фирстиля или и вовсе создавать его с нуля.
Сбор требований при создании дизайн-системы поможет точно сформулировать цели ее создания, тогда весь процесс перестанет быть “трендом современности” и станет понятным для каждого участника команды. Например, у дизайнеров не будет путаницы при работе над разными проектами одной компании. Дизайн-язык станет четким и при создании новых продуктов у них не возникнет лишних вопросов. Фронтендеры смогут так же создать свою собственную дизайн-систему и упростить процесс разработки, избавившись от лишнего кода. Основная радость менеджеров будет заключаться в сокращении сроков и упрощении разработки новых продуктов. Очевидно, что этот шаг значительно упростит жизнь всем участникам процесса.