Электроника. Дизайн-система для продукта ESM Service

«Электроника» — российский разработчик решений для повышения безопасности на критически важных объектах. Мы много лет сотрудничаем с клиентом, выполняя задачи по визуалу и разработке. На этот раз «Электроника» обратилась к нам с запросом систематизировать дизайн-систему одного из своих главных продуктов — ESM Service.

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

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

Затем мы систематизировали все элементы: присвоили им понятные названия, распределили по папкам и настроили удобную навигацию в Figma. Финальным этапом стала сборка ключевых интерфейсов, которые показали дизайн-систему в действии. А чтобы пользоваться библиотекой было еще проще, мы подготовили подробные гайдлайны.

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