30 Сентября 2021
Назад в блог

От UI-кита к микроинтерфейсной архитектуре

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

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

Цель

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

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

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

Процесс

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

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

  1. Собрать все уникальные элементы дизайна, которые встречаются в сервисах Компэла.
  2. Привести к единому виду те элементы, которые должны быть одинаковыми. Ведь с каждым новым членом команды и новым экраном дизайн элементов видоизменялся — так сервисы теряли свою консистентность.
  3. Дополнить элементы состояниями.
  4. Систематизировать наименования элементов, цветов.
  5. Добавить документацию и привести примеры: что, как и когда используется.
  6. Создать удобную систему компонентов и подключить библиотеку к файлам сервисов.

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

Промежуточный итог

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

Контакты
Пишите
Звоните
Москва
Пресненская набережная, 8с1, башня «Москва», 58 этаж, офис 581
Тамбов
Кавалерийская, 7А