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

Важно, чтобы дизайн-система передавала не только «что», но и «как» и «почему». Рассмотрим некоторые элементы, которые может включать в себя дизайн-система:

Руководства по стилю

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

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

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

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

Нужна ли дизайн-система в реальной работе

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

Нет однозначного ответа на вопрос, когда следует внедрять дизайн-систему. Но следует понимать, какие преимущества она дает и с какими сложностями можно столкнуться, если ее не использовать.

Чем может помочь дизайн-система

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

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

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

Когда может помочь дизайн-система

Задуматься о применении дизайн-системы стоит, если:

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

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

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

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

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

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

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

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

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

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

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

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

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

Думайте не только о контрастности и читабельности, но и обращайте внимание на то, как:

обрабатывается alt-текст для изображений и иконок,
созданы ли формы ввода для устройства, на котором они просматриваются,
соответствуют ли ресурсы и стили библиотеке разработчика,
какие несоответствия существуют между стилями, шаблонами и объектами.

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

Из каких этапов состоит создание дизайн-системы

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

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

Утверждение

Согласовываем с руководством создание дизайн-системы.

Обнаружение

Проводим исследования и аудит, определяем аудитория и ее проблемы, участвуем в мозговом штурме и принимаем решения.

Создание

Собираем фактическую дизайн-систему.

Документация

Здесь мы подробно описываем, как использовать дизайн-систему в доступной форме.

Сопровождение

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

Внедрение

Делаем запуск дизайн-системы в компанию.

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

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

Соавторы

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

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

Ваши сотрудники

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

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

Как внедрить дизайн-систему

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

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

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

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

В следующей статье мы рассмотрим различные части дизайн-системы.

Источник — Welcome to design systems