Корпоративный сайт производителя окон FIBERLUX

FIBERLUX делает окна из стеклокомпозита. Про этот материал почти никто не слышал. Мы сделали сайт, который объясняет, что это за материал и чем он лучше привычных, а потом показывает, что из него можно построить.

Кто клиент

FIBERLUX — производитель оконных систем из Новосибирска. Делает окна и двери из стеклокомпозита и из алюминия.

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

В чём была задача

Покупатель окон знает пластик, дерево и алюминий. Про стеклокомпозит он не знает ничего. Одно слово «стеклокомпозит» ему ничего не говорит.

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

Значит, сайт должен ответить каждому из них. И начать с того, что это вообще за материал.

Что сделали

Мы сделали структуру, дизайн, вёрстку и программирование. Сами собрали в коде 3D-разрез рамы и графики. Сделали так, что видео со стеклянным углом проигрывается, пока листаешь страницу.

Цифры о материале, фото и видео дал производитель. Дом в блоке «Реализация» спроектировала и построила компания СТАРКО, окна в нём — FIBERLUX.

Как устроен сайт

На сайте четыре страницы: главная, стеклокомпозитные серии, алюминиевая серия E90 и отдельная страница про дом под Новосибирском. На главной 15 блоков. Они идут в таком порядке:

1. Первый экран. Дом с панорамными окнами, заголовок про стеклокомпозит и три цифры: прочность, тепло, срок службы.
2. Объясняем материал. «Задача» — почему пластик, дерево и алюминий заставляют чем-то жертвовать. «Материал» — волокна работают как арматура, смола — как бетон. «Характеристики» и «Тепло» — цифры и тепловая картинка двух рам.
3. Показываем, что можно построить. «Архитектура» — стеклянный угол без стойки и стекло высотой до 4 метров. «Механика» — как открываются большие створки: подъёмно-раздвижной портал и окно, которое сначала отходит от рамы, а потом сдвигается вбок. «Детали» — створка вровень с рамой и скрытые петли. «Системы» — пять серий.
4. Снимаем сомнения. «Безопасность» — огневые испытания. «Отделка» — три исполнения 73-й серии. «Применение» — от жилых комплексов и офисов до школ и больниц.
5. Доказываем и зовём. «Реализация» — готовый дом. «Документы» — сертификат и технические условия. «Контакты» — запрос расчёта и два контакта: отдел продаж и инжиниринговый центр, у каждого свой телефон и почта.

Кому что показываем

Что учли

• Показываем, а не описываем. На компьютере видео со стеклянным углом проигрывается, пока листаешь страницу, а разрез рамы можно покрутить. На телефоне это обычное видео и картинка разреза.
• Главные цифры — рядом с привычными материалами. Прочность и деформация стоят на графиках рядом с алюминием и ПВХ. Человек сравнивает с тем, что уже знает.
• Настоящий дом вместо обещаний. В блоке «Реализация» дом под Новосибирском: окно высотой 3 200 мм, рамка 30 мм, в проёме нет стойки.

Для технических специалистов

• Страницы — обычные HTML-файлы, без системы управления сайтом.
• Шрифты, скрипты и видео лежат на самом сайте. Сторонних подключений нет.
• 3D-разрез рамы собран в коде на three.js. Он запускается на экранах шире 767 px. На телефонах и в браузерах без поддержки 3D вместо него показывается картинка.
• Видео с прокруткой работает на экранах от 900 px. На узких экранах это обычное видео по кругу.
• Видео на главной не скачиваются заранее. Исключение — первый ролик, стеклянный угол.

Сколько стоит

Корпоративный сайт — от 150 000 ₽, запуск за 4–8 недель. В обычный проект входят админка и подключение аналитики. Сайт FIBERLUX сделан без них: четыре страницы на HTML. Подробности — на странице «Корпоративный сайт для бизнеса».