Или как развитие системы и бизнес-процессов внутри компании влияет на командную работу дизайнеров с интерфейсами

КОМПЭЛ — крупнейший российский дистрибьютор компонентов и модулей для производителей электронной аппаратуры. Уже больше полутора лет мы сотрудничаем по самым разным задачами и проектам, начиная от внешних b2b-маркетплейсов для клиентов и заканчивая интерфейсами автоматизированных рабочих мест сотрудников.

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

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

В этом кейсе расскажем о первом шаге в эту сторону.

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

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

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

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