Дизайн-системы: введение

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

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

Зачем использовать дизайн-систему?

При правильном внедрении дизайн-системы могут принести команде дизайнеров множество преимуществ:

• Результаты дизайна (и разработки) могут быть быстро созданы и воспроизведены в любом масштабе. Основным преимуществом дизайн-систем является их способность быстро воспроизводить дизайн за счет использования готовых компонентов и элементов пользовательского интерфейса. Команды могут продолжать использовать одни и те же элементы снова и снова, что сокращает необходимость изобретать велосипед и тем самым рисковать получить дизайн с отсутствием единообразия.
• Дизайн-системы снижают нагрузку на дизайнеров и позволяют им сфокусироваться на более крупных и сложных проблемах. Поскольку более простые элементы пользовательского интерфейса уже созданы и могут использоваться повторно, дизайнеры имеют возможность меньше сосредотачиваться на улучшении внешнего вида и больше на сложных проблемах (например, расположение информации в приоритетном порядке, оптимизация рабочего процесса и управление движением пользователя по сайту). Хотя выгода от использования дизайн-систем может показаться небольшой, когда вы создаете лишь несколько экранов, она становится существенной, когда вы должны координировать усилия десятков команд в отношении тысяч экранов.
• Дизайн-системы создают единый язык внутри многофункциональных команд и между ними. Единый язык сокращает затраты времени на дизайн и разработку из-за недопониманий, особенно когда перераспределяется ответственность в процессе дизайна или когда команды территориально рассредоточены. Например, отпадает необходимость обсуждать функциональные возможности или внешний вид выпадающего меню (dropdown menu), поскольку этот термин уже зарезервирован для конкретного элемента в дизайн-системе.
• Дизайн-системы создают визуальное единообразие для разных продуктов, каналов коммуникации и (потенциально разрозненных) частей компании. В частности, когда команды работают несогласованно, а каждый продукт или канал коммуникации функционирует независимо от других, отсутствие дизайн-системы в масштабах организации целиком может привести к отсутствию единообразия во внешнем виде и опыте, который будет казаться разрозненным или не связанным с брендом.
• Дизайн-системы могут служить учебным пособием и справочником для младших дизайнеров и начинающих авторов контента. Четко написанные правила использования элементов и руководства по стилю помогают ввести в курс дела отдельных участников процесса, которые только начинают заниматься дизайном пользовательского интерфейса или созданием контента. Такие правила также служат напоминанием для остальных участников.

Почему не использовать дизайн-систему?

Существуют некоторые потенциальные препятствия и ограничения, которые могут помешать команде дизайнеров использовать дизайн-систему:

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

Элементы дизайн-системы

В дизайн-системе есть две важные части:

• дизайн-репозиторий
• люди, которые им управляют

Репозиторий дизайн-системы

Дизайн-репозиторий может принимать различные формы, но зачастую он включает руководство по стилю (style guide), библиотеку компонентов и библиотеку паттернов.

Руководство по стилю (style guide)

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

Библиотека компонентов

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

• Название компонента: конкретное и уникальное имя компонента пользовательского интерфейса, которое позволяет избежать недопонимания между дизайнерами и разработчиками
• Описание: четкое объяснение того, что это за элемент и как он обычно используется, иногда для лучшего понимания сопровождается рекомендациями о том, как стоит или не стоит использовать компонент
• Атрибуты: параметры, которые могут быть изменены с целью кастомизации или адаптации компонента к конкретным потребностям (например, цвет, размер, форма, текст)
• Состояние: рекомендуемые значения по умолчанию и последующие изменения внешнего вида компонента
• Фрагменты кода: реальный отрывок кода для элемента (некоторые дизайн-системы даже включают несколько примеров и “песочницу” — специальную программную среду, в которой можно опробовать различные настройки компонентов)
• Фронтенд и бэкенд фреймворки для реализации библиотеки (при необходимости), чтобы избежать мучительной излишней коррекции

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

Библиотека паттернов

Иногда термины “библиотека компонентов” и “библиотека шаблонов” используются как синонимы, однако эти типы библиотек различаются. Библиотеки компонентов включают отдельные элементы пользовательского интерфейса, а библиотеки паттернов содержат коллекции раскладок страниц (layouts) или примеры группировки этих элементов. Библиотеки паттернов часто считаются менее эффективными, чем библиотеки компонентов, но они могут быть настолько детальными и высокоуровневыми, насколько это необходимо. Обычно они содержат типы структуры контента, раскладки и шаблоны. Как и компоненты, паттерны предназначены для многоразового использования и адаптации.

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

‍Хотя многим веб-сайтам государственного сектора предстоит еще много работы, US Web Design System (USDWS) является отличной отправной точкой для объединения множества разрозненных отделов и агентств на основе четких руководящих принципов. USDWS включает шаблоны страниц (показаны выше), а также дизайн-принципы, компоненты и спецификации для написания кода.

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

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

И, наконец, подумайте о том, чтобы нанять исполнительного спонсора (из числа руководителей) для управления разработкой дизайн-системы. Хотя его отсутствие не станет препятствием, спонсоры могут обеспечить деньги и ресурсы, а также донести стратегическую важность создания дизайн-системы до остальных членов организации.

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

Существует три подхода к использованию дизайн-системы:

• использование существующей дизайн-системы
• адаптация существующей дизайн-системы
• создание собственной кастомной дизайн-системы
  

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

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

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

Заключение

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