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

1. Вводная задача от заказчика, проблематика, цели

Задача

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

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

Особенности

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

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Анализ

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

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

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

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

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

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

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

Концепция

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

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

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

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

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

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

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

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

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

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

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

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

Адаптив

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

Реализация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Гибкость

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

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

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

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

3. Результаты сотрудничества

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

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

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