В этой статье я поделюсь своим опытом создания дизайн-системы. Расскажу о возможных трудностях, с которыми могут столкнуться команды дизайнеров и разработчиков при переходе к её использованию, и дам практические советы, как обеспечить комфортную работу для всех участников процесса.
Дизайн-система. Процессы, совмещённые с командами дизайна и разработки
Дизайн-система представляет собой набор правил, компонентов, текстовых стилей и стилей цвета, который позволяет дизайнерам и разработчикам проектировать цифровые продукты в стилях брендбука t2. В её состав входят различные компоненты, руководства, принципы и правила, которые обеспечивают целостность пользовательских интерфейсов и способствуют более быстрому процессу разработки. При этом архитектура дизайн-системы должна обладать достаточной гибкостью и возможностью масштабирования, что позволяет ей адаптироваться к изменениям продукта и росту команды.
Необходимость дизайн-системы
Наличие дизайн-системы позволяет дизайнеру и разработчику общаться "на одном языке", так как компоненты, текстовые стили, токены цвета и размеров имеют одинаковое значение в дизайне и в разработке. Благодаря заранее определенным компонентам и шаблонам, дизайнерам и разработчикам не нужно каждый раз заново изобретать колесо. Так как t2 выпускает новые продукты или расширяет существующие, наличие дизайн-системы облегчает адаптацию к новым задачам. Новые компоненты могут быть легко добавлены в систему, сохраняя при этом стиль бренда, вайб и подход.
Поскольку все элементы дизайн-системы тщательно продуманы и протестированы, вероятность ошибок и несоответствий снижается. Это приводит к повышению общего качества пользовательских интерфейсов и улучшению восприятия бренда.
Для новичков в команде наличие дизайн-системы упрощает понимание общих правил и подходов к дизайну. Они быстрее осваиваются и начинают работать продуктивно, так как у них есть четкое руководство по использованию элементов системы.
Обновление одного элемента в дизайн-системе автоматически обновляет его везде, где он используется. Это делает процесс поддержки и обновления продуктов более эффективным и управляемым.
Сложности взаимодействия, которые лечит наличие дизайн-системы
Дизайнеры и дизайн-система
На этапе проектирования дизайнеры часто сталкивались с проблемой отсутствия единого стиля и подхода к созданию элементов интерфейса. Каждый дизайнер мог интерпретировать компоненты системы по-разному, что приводило к разнородности макетов от задачи к задаче, не было консистентности. Кроме того, отсутствие централизованного хранилища всех компонентов затрудняло поиск нужных ресурсов и замедляло работу.
Разработчики и дизайн-система
Разработчики, в свою очередь, испытывали трудности при внедрении новых компонентов и изменений в уже существующих компонентах. Отсутствие четких спецификаций и документации усложняло понимание требований к реализации тех или иных функций. Это могло приводить к ошибкам в коде и необходимости многократных правок.
Как мы все починили
Для решения проблем взаимодействия дизайн-системы с командами дизайна и разработки
Внедрили гайды
Мы создали подробные руководства по использованию дизайн-системы, включающие информацию о принципах её построения, правилах использования компонентов и рекомендациях по созданию новых. Каждый компонент был подробно описан и задокументирован, включая примеры использования, технические требования и рекомендации по адаптации под разные контексты. Эти гайды помогают дизайнерам и разработчикам лучше понимать структуру компонентов и избегать ошибок при проектировании.
Создали доску для управления задачами
Для упрощения процесса управления задачами и отслеживания прогресса работы, была разработана специальная доска задач. На этой доске каждый член команды дизайнеров может легко просматривать актуальные задачи, их приоритет и установленные сроки выполнения. Введение такой системы значительно улучшило внутреннюю координацию среди сотрудников:
разработчики могли видеть, какие задачи находятся в работе у дизайнеров, и планировать свои действия соответственно.
Форум по дизайн-системе
Был создан специальный канал связи, через который все смежные команды могли задавать вопросы и быстро получать ответы от разработчиков и дизайнеров. Такой способ облегчает взаимодействие с командами – не надо страдать от того, что команда мобильной разработки обсуждает компоненты в своих каналах, а команда веба – в своих. Все вопросы в одном месте! Такой подход существенно сократил время на решение возникающих проблем и улучшил взаимопонимание между командами.
Еженедельный дайджест обновлений в дизайн-системы
Киллер-фича для коммуникации между всеми командами, кто взаимодействует с дизайн-системой.
Каждую неделю ведется дайджест с последними изменениями и нововведениями в дизайн-системе. Это помогало разработчикам оставаться в курсе актуальных новостей.
Получилось ли настроить процессы?
Да! Благодаря вышеописанным шагам мы не только настроили процессы взаимодействия между дизайнерами и разработчиками, но и сделали дизайн-систему прозрачной и понятной для всех в t2.