Как мы создали самый технологичный сайт в индустрии сэндвич-панелей

Клиент

Техностиль — крупнейший российский производитель сэндвич-панелей со сложной технической продукцией.

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

Визуальная часть: мы провели глубокое UX-исследование, изучили путь клиента и разработали уникальное решение — сайт с интерактивным 3D-зданием, на котором представлена вся продукция компании.

Результат: премиальный B2B-сайт с сотнями 3D-рендеров, продуманной навигацией, который устанавливает новый стандарт в индустрии.

Решение

Создали полноценную визуальную систему продукта: от детализированной 3D-модели здания до логики интерактивных ракурсов и анимаций.

Визуальная часть \ калькулятор стоимости

Калькулятор стоимости построен как простой пошаговый сценарий, который помогает быстро оценить параметры объекта и оставить заявку без лишних вопросов.

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

Калькулятор стоимости — мобильная версия

Визуальная часть \ 3D-рендеры продукции

Было создано более 1000 высококачественных рендеров. Каждый визуальный материал создан с учётом конкретной функции продукта.

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

Замковое соединение — интерактивная сцена

Модульная сетка

Единая модульная система упрощает компоновку экранов для команды, ускоряет разработку и снижает риск визуального шума.

Визуальная часть \ Иконографика

В рамках комплексного визуального оформления была создана серия из 100 иконок, которые наглядно и понятно обозначают услуги компании.

Технологический стек

Работа велась через GIT-репозиторий, что позволило вести параллельную разработку, контролировать версионность кода и безопасно тестировать новые функции.

Процесс разработки: клиенту предоставлялся доступ к тестовому стенду для проверки и утверждения изменений перед их переносом на production-сервер. Такой подход минимизировал риски и обеспечил прозрачность процесса.

Адаптивность: сайт проектировался по технологии mobile-first, поскольку более 70% пользователей заходят с мобильных устройств. Интерфейс адаптирован под все типы экранов с сохранением функциональности 3D-здания и плавности анимаций.

Оптимизация скорости загрузки: особое внимание уделили оптимизации 3D-контента: использовали сжатие текстур, lazy loading для тяжёлых элементов и предзагрузку критических ресурсов, что обеспечило быструю загрузку даже на мобильных устройствах.

1C-Битрикс

GSAP

Vite

Swiper

Axios

Визуальная часть \ Типографика и цвета

При разработке визуального стиля особое внимание уделялось типографике и цветовой палитре. Обеспечивая однородность всех материалов.

#1C73AD

#17171A

#031D44

#FF4614

#FFFFFF

Итоги

Клиент отметил современный подход к подаче продукции и удобную навигацию. Интерактивное 3D-здание произвело впечатление на пользователей, демонстрация материалов в реальном контексте делает выбор проще и повышает доверие к бренду.

Юлия Ермашова

руководитель отдела маркетинга ООО «Техностиль»

Юлия Ермашова

руководитель отдела маркетинга ООО «Техностиль»

Сайт получился современным и аккуратным, точно попадает в стиль и масштаб компании, визуальный язык и подача продукции выдержаны в едином брендовом ключе. Структура и навигация продумывались совместно с командой, правки вносились быстро, а технические нюансы и адаптацию под мобильные устройства специалисты взяли на себя, что упростило работу и позволило сосредоточиться на контенте и бизнес‑задачах. Большое спасибо всей команде «RELEVANT» за оперативную и действительно профессиональную работу.

Сроки реализации

Работа велась в формате Time and Material, что позволило гибко реагировать на изменения и дорабатывать решения в процессе: