Тендеры и лиды
Информация
Vektor
Услуги
Интернет-магазин, Корпоративный сайт
Март 2026
В конце 2024 года компания запустила масштабный ребрендинг, затронувший визуальную идентичность, бизнес-стратегию, внутренние процессы и клиентский опыт. Наша задача состояла из нескольких блоков:
1. Провести цифровой ребрендинг — адаптировать новый корпоративный стиль в онлайн-среде, сохранив преемственность и добавив современную динамику.
2. Создать гибкую визуальную систему — разработать дизайн-концепцию, масштабируемую на зонтичные бренды с сохранением целостности и простоты адаптации контента под разные продукты и аудитории.
3. Обеспечить автономность маркетинга — внедрить модульный подход, позволяющий команде клиента оперативно обновлять контент, добавлять разделы и настраивать визуальные блоки без участия разработчиков.
4. Усилить позиционирование — представить 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, типом, данными и вложенными дочерними элементами.
При запросе страницы происходит следующее:
JSON-структура извлекается из базы.
Система рекурсивно обходит дерево блоков.
Каждый блок рендерится через соответствующий Blade-шаблон.
Итоговый HTML передаётся пользователю.
Для взаимодействия между фронтендом конструктора и бэкендом разработано собственное API, отвечающее за:
Сохранение изменений
Загрузку списка блоков
Получение и обновление страницы
Управление порядком и вложенностью элементов
Одна из ключевых технических сложностей — многоуровневая вложенность полей. Блоки содержат вложенные поля (например, блок → слайдер → карточки → картинка, текст), и данные нужно корректно передавать и сохранять на каждом уровне.
Решение: дерево с уникальными путями к полям и валидация на уровне API для предотвращения повреждения структуры. Это позволяет строить сложные макеты без потери целостности данных.
Для максимальной свободы администраторов в вёрстке и поведении элементов добавлены:
Поля для кастомного CSS и JavaScript в каждом блоке — модификация внешнего вида и логики без изменения исходного кода.
Пустой (нулевой) блок — минималистичный контейнер для ручного ввода HTML, CSS или JS. Реализация уникальных решений, не предусмотренных изначально.
Для корректного отображения на мобильных устройствах адаптирована методология адаптивной вёрстки, описанная командой D5.
Компоненты дизайн-системы перешли в переиспользуемые Blade-шаблоны. Каждый визуальный элемент — карточка, кнопка, форма — стал частью библиотеки, доступной при сборке новых страниц. Изменение в компоненте автоматически отражается на всех сайтах экосистемы. Дизайн-система перестала быть документом и стала рабочим инструментом.
Проект завершился созданием четырёх сайтов, объединённых общей дизайн-системой и единым визуальным языком:
Корпоративный сайт ГК VEKTOR Plus — основная площадка, демонстрирующая экспертизу и масштаб компании.
Сайт брендов VEKTOR Energy и VEKTOR Battery с масштабным каталогом по аккумуляторам и системам накопления энергии.
Сайт производителя сетевых и гибридных инверторов ENVESOL.
Сайт инжиниринговой компании ENVEK
Все четыре сайта собираются на кастомном конструкторе страниц. Маркетинг-команда VEKTOR Plus управляет контентом самостоятельно: добавляет новые страницы, перестраивает блоки, меняет тексты и изображения без обращения к разработчикам. Новые разделы собираются из существующих компонентов за часы, а не за дни.
Новый digital-образ помог усилить восприятие ГК «Вектор» как современной технологичной компании и интегратора комплексных решений для энергетической отрасли. Конструктор страниц сократил время вывода нового контента в продакш с нескольких дней до нескольких часов и закрыл потребность маркетинга в постоянной технической поддержке. Дизайн-система, ставшая кодом, обеспечила консистентность экосистемы и масштабируемость на новые направления бизнеса.
Чат поддержки с ИИ и оператором для банка
Нестандартный подход к рекламе в строительной B2B-нише: кейс с 120 заявками
