Цифровой ребрендинг ГК «Вектор»

Группа компаний VEKTOR PLUS — один из лидеров рынка решений для гарантированного электроснабжения, накопления и хранения электрической энергии, включая решения на базе ВИЭ.

В конце 2024 года компания запустила масштабный ребрендинг, затронувший визуальную идентичность, бизнес-стратегию, внутренние процессы и клиентский опыт. Наша задача состояла из нескольких блоков:

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

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

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

Работа началась с глубокого анализа визуальной среды рынка. Мы исследовали сайты крупных игроков промышленного и энергетического сегмента (около 50 проектов), изучали подходы к структуре, подаче контента, визуальному стилю, взаимодействию с каталогами и пользовательским сценариям.

Особое внимание уделялось тому, как компании выстраивают ощущение масштаба и экспертизы через digital-инструменты. Важно было понять, какие визуальные и UX-решения формируют восприятие надёжного технологического партнёра.

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

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

После согласования структуры началась работа над визуальной концепцией. Это оказался один из самых насыщенных этапов: клиент уделял большое внимание восприятию бренда в digital-среде. Концепция прошла несколько циклов обсуждения и доработок.

Новая дизайн-концепция транслировала:

• Надёжность
• Инженерную экспертизу
• Масштаб проектов
• Современный подход компании

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

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

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

В дизайн-систему вошли:

• Типографика
• Сетки и система отступов
• Карточки, формы, кнопки
• Навигационные элементы
• Состояния интерфейсных компонентов
• Правила адаптивного поведения

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

Параллельно с десктопными версиями велась работа над адаптивными интерфейсами для планшетов и мобильных устройств. Интерфейсы проектировались с сохранением цельного пользовательского опыта вне зависимости от устройства. Все компоненты дизайн-системы изначально создавались с учётом масштабирования и адаптивного поведения.

Финальные макеты передавались в разработку с детализацией, достаточной для точной сборки на конструкторе. Каждый блок сопровождался спецификацией: состояния, адаптивные точки, поведение при различных условиях. Разработчики получали не просто картинки, а рабочую систему с понятной логикой.

Конструктор решает четыре базовые задачи: создание и редактирование страниц, выбор блоков из библиотеки, перетаскивание блоков по странице (drag-and-drop) и ввод контента прямо в интерфейсе.

Для поддержки модульности все блоки организованы в три директории:

• **common** — универсальные UI-компоненты, используемые на всех страницах: карточки товаров, кнопки, иконки, сетки и другие атомарные элементы.
• **constructor** — компоненты для работы самого конструктора: панели управления, оверлеи, формы настроек.
• **templates** — библиотека шаблонов блоков.

Каждый шаблон блока помимо Blade, JS и SCSS файлов включает:

• **fields.json** — декларативное описание полей, доступных для редактирования (тип, порядок вывода, вложенность).
• **preview.png** — превью блока в меню выбора.

Контент страниц хранится в базе данных в виде структурированного JSON. Каждый блок представлен объектом с уникальным ID, типом, данными и вложенными дочерними элементами.

При запросе страницы происходит следующее:

1. JSON-структура извлекается из базы.
2. Система рекурсивно обходит дерево блоков.
3. Каждый блок рендерится через соответствующий Blade-шаблон.
4. Итоговый HTML передаётся пользователю.

Для взаимодействия между фронтендом конструктора и бэкендом разработано собственное API, отвечающее за:

• Сохранение изменений
• Загрузку списка блоков
• Получение и обновление страницы
• Управление порядком и вложенностью элементов

Одна из ключевых технических сложностей — многоуровневая вложенность полей. Блоки содержат вложенные поля (например, блок → слайдер → карточки → картинка, текст), и данные нужно корректно передавать и сохранять на каждом уровне.

Решение: дерево с уникальными путями к полям и валидация на уровне API для предотвращения повреждения структуры. Это позволяет строить сложные макеты без потери целостности данных.

Для максимальной свободы администраторов в вёрстке и поведении элементов добавлены:

• Поля для кастомного CSS и JavaScript в каждом блоке — модификация внешнего вида и логики без изменения исходного кода.
• Пустой (нулевой) блок — минималистичный контейнер для ручного ввода HTML, CSS или JS. Реализация уникальных решений, не предусмотренных изначально.

Для корректного отображения на мобильных устройствах адаптирована методология адаптивной вёрстки, описанная командой D5.