ui-kit cards+
Создание UI-кита для нескольких внутренних продуктов компании, с нуля и с учётом масштабируемости на разные команды и задачи.
B2B
UI, работа в команде
Задача
На старте в разных частях продукта использовались разрозненные паттерны и стили. Целью стало наведение порядка в визуальном языке, повышение масштабируемости интерфейсов и синхронизация между дизайном и разработкой через единый UI-кит
Решение
Решением стала систематизация визуальных элементов и создание единого UI-кита, который обеспечил целостность и масштабируемость интерфейса.
Палитра
Цветовая система построена на семантическом подходе: все цвета оформлены как стили с понятными названиями, отражающими их назначение. Палитра разбита на логические категории.
Это позволяет быстро вносить изменения в визуальный стиль без слома всей системы, обеспечивать единообразие интерфейсов, упростить работу команды дизайнеров и разработчиков, повысить масштабируемость.
Цвета проходили проверку на контрастность.
Типографика
Каждый стиль назван по принципу Heading / regular-24-36, где первое число обозначает кегль, а второе лайнхейт. Это даёт точное представление о визуальных характеристиках стиля без необходимости заглядывать внутрь.
Стили разделены по назначению. Это позволяет быстро ориентироваться в системе и использовать её как строительные блоки при создании интерфейса.
Главная цель — обеспечить стабильную типографику, убрать повторяющиеся решения и сделать работу с текстом быстрой. Благодаря технической структуре дизайнеры и разработчики говорят на одном языке, а интерфейс остаётся визуально цельным.
Иконографика
Иконки представлены в трёх вариантах толщины, чтобы соответствовать разным уровням визуальной иерархии и плотности интерфейса. Это позволяет использовать иконки в разных контекстах.
Каждая иконка доступна в нескольких размерах, что обеспечивает гибкость при работе с компонентами разных масштабов.
Помимо основной библиотеки, предусмотрены дополнительные паки: флаги стран и соц. сети
Система построена так, чтобы сохранить визуальную согласованность и дать максимальную свободу при адаптации под конкретный продукт.
Компоненты
Компоненты проектировались как часть единой большой системы, где каждый элемент масштабируется, переиспользуется и подчиняется общим правилам. Каждый компонент имеет адаптивные и гибкие сценарии, продуманные состояния и может быть легко переиспользован в разных контекстах.
Благодаря консистентной компонентной системе команды дизайна и разработки ускорили внедрение новых интерфейсов и снизили количество ручных доработок.
В кейсе показаны лишь некоторые компоненты и их наглядное использование в макете. Библиотека включает в себя 87 компонентов
Результаты
Появилась чистая, масштабируемая и легко обновляемая UI-система, покрывающая основные и более редкие сценарии продукта. UI-kit стал рабочим инструментом, который используется в повседневной разработке как минимум 3х продуктов компании.
Овервью
Были решены ключевые задачи:
Приведена в порядок визуальная основа: цвет, типографика, иконки. Все выстроено в единой логике и удобно для масштабирования.
Создана понятная библиотека компонентов, с чёткими паттернами использования, что ускоряет процессы сборки интерфейсов.
Обеспечена гибкость и адаптивность: система подойдёт как для запуска новых фич, так и для рефакторинга старых разделов.
Выровнен дизайн-язык внутри команды.
Основной объём дизайна и проектирования был на моей стороне, но результат это не работа в одиночку. Проект вырос благодаря открытому диалогу, уважению к процессу и общей вовлечённости. Мы с командой обсуждали решения, делились взглядами. Часть задач я доверил другим дизайнерам, что позволило оптимально распределить время и сохранить целостность визуального языка. Это был опыт, в котором индивидуальная ответственность сочеталась с командной опорой.