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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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