Ladoga UI

Легковесный headless-фундамент для быстрого создания собственных дизайн-систем в новых и внутренних продуктах.

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

Я присоединился к Ladoga на раннем этапе, когда у инженерной команды еще не было выделенного дизайнера. Я полностью взял на себя дизайн-составляющую проекта и вел ее параллельно со своей основной ролью. Я спроектировал архитектуру и принципы системы, разработал цветовую палитру и систему токенов, собрал Figma-библиотеку, создал компоненты и описал их спецификации. Параллельно три инженера из команды VKUI занимались реализацией системы в коде. Позже к проекту присоединился выделенный дизайнер.

Ladoga проектировалась не под конкретный интерфейс. Ей предстояло стать универсальной основой для продуктов, которых на тот момент еще не существовало. Это означало необходимость четко разделить функциональное поведение компонентов и их визуальный язык, избегая паттернов, привязанных к какому-то одному продукту.

Вместо пользовательских исследований мы провели анализ существующих подходов к проектированию дизайн-систем. Мы изучили:

• Base UI — как пример headless-примитивов;
• shadcn/ui — как подход к компонуемым компонентам;
• VKUI — как пример зрелой продуктовой системы.

Нашей целью было понять, как легковесные и headless-системы справляются с примитивами, композицией и темизацией, а также переосмыслить компонентную архитектуру VKUI.

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

За три месяца мы завершили первую рабочую версию Ladoga: headless-фундамент с гибкой цветовой системой, токенами дизайна, 17 базовыми компонентами и полной документацией. Система была протестирована на внутренних административных интерфейсах и передана команде для дальнейшего развития. Инициатива была приостановлена позже, после того как тимлид разработки, драйвивший проект, покинул компанию.

Работа над Ladoga укрепила важный для меня принцип: дизайн-система не должна решать абсолютно все задачи продукта, чтобы быть полезной. Сохраняя фундамент небольшим, headless и компонуемым, мы дали возможность самым разным продуктам строит свой собственный визуальный язык на единой надежной основе.