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

Клиент

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

Задача

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

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

Особенности

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

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

Анализ

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

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

На этом этапе определены ключевые ориентиры проекта:

1. Визуальная сдержанность без потери современности
2. Технологичный и масштабируемый интерфейс
3. Акцент на системность и инженерную экспертизу
4. Удобная работа с большим количеством контента и продуктовой информации

Результаты анализа легли в основу проектирования структуры сайтов и разработки визуальной концепции.

Проектирование

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

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

Концепция

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

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

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

Прототипирование

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

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

Дизайн-система

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

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

1. Типографика
2. Сетки и система отступов
3. Карточки, формы, кнопки
4. Навигационные элементы
5. Состояния интерфейсных компонентов
6. Правила адаптивного поведения

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

Отдельная особенность: все сайты разрабатывались на конструкторе, поэтому дизайн проектировался с учётом дальнейшего переиспользования блоков и компонентов. Одни секции работали на разных страницах и в рамках нескольких сайтов без переработки. Блоки проектировались максимально универсальными и гибкими для масштабирования и комбинирования. В ряде случаев компоненты адаптировались под особенности конкретного раздела, но базовая система оставалась единой.

Адаптив

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

Реализация

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

Архитектура конструктора

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

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

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

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

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

Хранение и рендеринг

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

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

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

API конструктора

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

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

Иерархические данные

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

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

Гибкость

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

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

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

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

Результат

Проект завершился созданием четырёх сайтов, объединённых общей дизайн-системой и единым визуальным языком:

1. Корпоративный сайт ГК VEKTOR Plus — основная площадка, демонстрирующая экспертизу и масштаб компании.
2. Сайт брендов VEKTOR Energy и VEKTOR Battery с масштабным каталогом по аккумуляторам и системам накопления энергии.
3. Сайт производителя сетевых и гибридных инверторов ENVESOL.
4. Сайт инжиниринговой компании ENVEK

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

Новый digital-образ помог усилить восприятие ГК «Вектор» как современной технологичной компании и интегратора комплексных решений для энергетической отрасли. Конструктор страниц сократил время вывода нового контента в продакш с нескольких дней до нескольких часов и закрыл потребность маркетинга в постоянной технической поддержке. Дизайн-система, ставшая кодом, обеспечила консистентность экосистемы и масштабируемость на новые направления бизнеса.