Как мы упаковали ‘зеленые’ технологии в Webflow: кейс канадской строительной компании CLT

Мы давно работаем с российскими строительными компаниями: от крупных девелоперов, для которых создаём масштабные порталы, до застройщиков частных домов. Но когда к нам обратилась фирма из Канады, сразу стало понятно — этот проект будет совсем другим. Во-первых, другая культура и подход к работе с клиентом. Во-вторых, новая целевая аудитория. И, наконец, самое главное — инновационная технология CLT-панелей.

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

Основатели компании – опытные строители, которые строят дома по различным технологиям на территории Канады. Для их нового направления деятельности – строительство домов из CLT панелей – необходимо было реализовать отдельный сайт, который демонстрировал бы клиентам преимущества этого строительного материала. Показать, что из него можно строить не только частные дома, но и многоэтажные, общественные и промышленные сооружения.

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

Также необходимо было продемонстрировать на сайте технологичность материала и компании.

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

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

Реализовав лонгрид с последовательным рассказом о технологии, услугах, типах строений, готовых проектах, об экспертах и партнерах, а также вставляя блоки call-to-action, мы закрыли потребности по информации и продажам на все группы ЦА.

По итогам нескольких брифингов с клиентом мы выделили несколько основных сегментов ЦА, чтобы понять, для кого мы будем рассказывать историю на нашем лонгриде:

Что кому важно:

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

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

Для инвесторов важно найти надежное вложение средств с понятным доходом. Также в Канаде очень важна тема экологии и инвесторы активно инвестируют в экологичные отрасли, так как они поддерживаются и стимулируются государством.

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

Ключевые слова, которые нам необходимо было передать в дизайне "Технологичность" и "Надежность"

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

Главная страница построена по принципу ALL-in-ONE, здесь главное чтобы все группы ЦА получили информацию по компании и ее деятельности в виде презентации.

Разделов получилось много (забегая вперед, скажем о том, что мы предусмотрели навигацию по странице):

Ассоциативный ряд по дизайну:

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

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

На основании подобранных референсов мы реализовали первый концепт главной страницы.

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

Т.к. контента для первого экрана у нас не было, мы работали с подстановочными изображениями, так как прежде чем делать 3D заказчику важно было увидеть, как оно примерно будет выглядеть, и важно было понимать цветовую гамму и общее расположение элементов на экране (все права на изображение принадлежат их владельцам и используются только для демонстрации).

Для главного экрана мы сделали раскадровку и подобрали референсы, чтобы 3D-специалист понимал, что мы от него хотим.

В итоге у нас получилось следующее:

Далее мы пошли по разделам:

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

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

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

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

В этом блоке к скроллу привязано видео, заголовки и тексты.

Видео реализовано как последовательность отдельных изображений, каждое из которых привязано к определенной высоте страницы.

Этот экран похож на экран с Услугами, но у него есть 2 особенности. Во-первых, здесь нет анимации движения, а только картинки с разными типами строений, которые можно возводить из CLT панелей. Они также подвязаны на скролл, но также здесь есть возможность попереключаться между различными строения переходит от одного типа здания к другому при помощи блока с переключением.

Хоть компания и зарубежная, но они предпочли работать с CRM Битрикс24. Прямой интеграции у Webflow с Битриксом нет, но мы использовали сторонний плагин, который позволяет полностью передавать данные из заполненных форм сразу в CRM

Этот проект стал отличным примером того, как можно объединить инновационную технологию (CLT-панели), экологичность и современный веб-дизайн на одной площадке. Мы помогли канадской строительной компании не только показать преимущества «деревянного бетона» широкой аудитории, но и заложить фундамент для дальнейшего развития: добавления новых разделов, публикации кейсов и привлечения инвесторов.

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