дИЗАЙН - СИСТЕМА
Экосистема «Каргономика» объединяет продукты для транспортных компаний: мониторинг, логистику, топливные сервисы, управление автопарком и мобильные инструменты для водителей.
До появления единой дизайн-системы интерфейсы формировались независимо: стили различались, компоненты не повторялись, время разработки увеличивалось.
B2B
UI, работа в команде
Задача
Создать основу единой визуальной и интерфейсной среды для всех веб- и мобильных продуктов экосистемы.
Моя роль
Я полностью выстроил фундамент дизайн-системы для web и mobile:
создал цветовую палитру, разбитую по направлениям экосистемы (monitoring, fuel, insurance, leasing);
разработал типографику с адаптацией под Desktop (M, L) и Mobile (S);
стандартизировал иконки, выбрал стиль и построил библиотеку;
сформировал сетку и колоночную систему отступов для web и mobile;
создал библиотеку ключевых компонентов для всего интерфейса;
систематизировал состояния, размеры и поведения элементов;
выстроил структуру библиотеки в Figma так, чтобы она была масштабируемой.
Цветовая палитра
Палитра построена для поддержки всей экосистемы: мониторинг, топливо, страхование, лизинг и другие сервисы. Каждый продукт получил собственный цвет-идентификатор, который помогает пользователям быстрее ориентироваться в интерфейсе и визуально разделять направления внутри платформы.
Цветовая палитра
Базовые цвета платформы
Функциональные статусы: успех, предупреждение, ошибка, сервис
Карта оттенков для графиков и аналитики
Палитры для светлой и тёмной темы
Типографика
Типографика стала одним из ключевых фундаментальных слоёв дизайн-системы. Я разработал единую структуру текстовых стилей для двух платформ — Web (Desktop) и Mobile, обеспечив визуальную консистентность, масштабируемость и удобство использования внутри продуктовой команды.
Пересобрал токены типографики на основе частотных текстовых паттернов внутри платформы.
Разделил структуру на уровни: Title, Subtitle, Body, Caption, Button.
Дополнительно адаптировал стили под брейкпоинты:
Desktop (M, L, XL)
Mobile (S)
Привёл к единой системе параметры: размер, межстрочный интервал, насыщенность, контрастность.
Grid & Breakpoints
Колоночная система и адаптивная сетка для платформы Каргономика
Определил ключевые брейкпойнты платформы
Основанные на аналитике устройств клиентов и спецификации системы:
Desktop XL — 1440px +
Desktop L — 1024 - 1440px
Tablet — 480 - 1024px
Mobile — 375px
Каждый брейкпойнт получил свою колонную структуру с модульностью, которая позволяет масштабировать интерфейсы без переработки макетов.
Компоненты
В дизайн-системе Каргономики
я выстроил набор компонентов для web и mobile на основе продуктовых сценариев.
Каждый компонент имел чёткую структуру, набор состояний
и правила поведения в разных сценариях, включая крайние случаи и высокую нагрузку. Компоненты собирались в Figma
с использованием auto-layout, вариантов и токенов,
что позволило масштабировать систему без дублирования логики.
Компоненты задокументировал
и задал правила использования, что ускорило работу команды
и обеспечило консистентность интерфейсов по всей платформе.
Результаты
Овервью
Мне удалось добиться нескольких ключевых результатов:
Ускорение разработки интерфейсов благодаря стандартизированным компонентам и готовым паттернам. В отдельных командах скорость сборки экранов выросла в 2–3 раза.
Снижение количества UI-ошибок за счёт детализированных правил поведения и документации, встроенной прямо в Figma.
Единообразие продукта — все модули платформы теперь выглядят и работают последовательно, что повышает доверие пользователей и улучшает восприятие бренда.
Гибкость для будущего роста — сетки, токены и библиотека компонентов позволяют быстро расширять платформу без потери качества.