Что такое дизайн-система и зачем она вам нужна?

Когда я делал свои первые шаги в роли дизайнера интерфейсов, то основным показателям успешности работы для меня было насыпать побольше визуального сахару и “креатива” — прекрутить каких-то странных градиентов, добавить массивных заголовкой, эксперементировать с цветами, формами и объемами. Последнее о чем я думал, это правильная организация макетов, систематизация эллементов или какое-либо осмысленное наименование слоев. Но с приходящем опытом пришло и осознание, что сделанный на коленке макет тяжело масштабировать, в него невозможно централизированно вносить правки, а отсутствие задекларированных правил и единого ресурса компонентов усложняет процесс разработки. И самое страшное заключается в том, что так работали плюс-минус все. Огромные многоэкранные продукты, нуждающиеся в постоянном обновлении и поддержке, большие дизайн-команды, которые параллельно делали разные страницы сайтов без какой-то синхронизации друг с другом, верстальщики, высчитывающие расстояния на глаз —в таком перманентном хаусе существовала вся индустрия.

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

С какими проблемами может столкнуться продукт без дизайн-системы**?**

1. Визуальная и UX неконсистентность

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

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

2. Расплывчатая идентичность и ценность бренда

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

Помимо Blogger.com, другим хорошим примером размытой идентичности бренда может служить недавний случай с разделением Instagram и Facebook. Когда Facebook впервые приобрел Instagram в 2012 году, два приложения сохраняли свою уникальность. Однако, с течением времени Facebook начал интегрировать Instagram все теснее, включая переименование в “Instagram от Facebook” и интеграцию мессенджера. Это вызвало смущение и недовольство многих пользователей Instagram, которые ценили его как отдельный продукт и не хотели его ассоциировать с Facebook. Это также привело к смешению визуальных и UX стандартов двух приложений, что вызвало дополнительные сложности для пользователей.

3. Неэффективная коммуникация внутри продуктовой команды

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

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

• Непрозрачность процессов;

• Размытые области ответственности внутри команды;

• Сложная технологическая цепочка;

• Затраты большого количества времени на детали;

• Непрерывное расширение проектной команды и связанные с этим трудности адаптации новых сотрудников.

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

Возможно, самое точное определение этого понятия — это “единственный источник истины” для команды. Дизайн-система не просто UI Kit, библиотека элементов или Styleguide. Это универсальный инструмент, упорядочивающий всю визуальную и функциональную составляющую продукта.

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

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

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

Дизайн система может и должна быть мультиплатформенной

Одним из основных преимуществ дизайн-системы является её мультиплатформенность. В дизайн-системе мало смысла, если она рассчитана только на одну конкретную платформу, а продукт, которым мы занимаемся, является мультиплатформенным.

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

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

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

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

Принцип атомарного дизайна

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

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

Пример из физического мира

Сама концепция систематизации процессов не является новой и существовала задолго до появления цифрового дизайна и IT-индустрии в целом. В качестве наглядного примера из физического мира можно привести стандартный грузовой контейнер.

Вот такой

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

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

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

Простая кнопка как пример ценности дизайн-системы

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

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

Как это работает на практике

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

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

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

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

А что насчет стоимости?

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

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

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

P.S: Всего семь-восемь лет назад дизайн-системы были лишь интересной концепцией, с которой экспериментировали лишь немногие смелые дизайн команды. Но сегодня они стали стандартом индустрии. Почти все крупные компании, от международных технологических гигантов до государственных организаций и даже NASA, внедрили дизайн-системы в свои процессы разработки продуктов.