Сайт архитектурного бюро WILDBIM: монументальность зданий и легкость полета

Предстояло создать корпоративный сайт-визитку для архитектурного бюро WILDBIM. Компания специализируется на проектировании для последующей реставрации зданий.

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

Команда бюро WILDBIM обратилась к нам за обновлением сайта. Главной точкой роста для редизайна стала проработка насыщенности контента. В предыдущей версии информация о работе бюро была изложена кратко. В то время как для создания доверия в такой сложной B2B-нише необходимо подробно раскрывать экспертизу.

Также у клиента сильные кейсы — WILDBIM работает с историческим наследием Москвы. В портфолио компании — знаковые объекты столицы, например, Саввинское подворье, гостиница «Украина» и другие сталинские высотки. Блока с портфолио на сайте не было — а это визитная карточка и сильная сторона бюро.

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

На сайте предстояло:

— создать визуальный вау-эффект

— сделать акцент на интерактивность

— сформировать доверие к бренду через сильное портфолио и блок с процессом работы

— добавить блок с услугой «Капитальный ремонт»

— показать стратегическое преимущество — применение BIM-технологий в реставрации, а не только в новом строительстве

— разместить контакты

Далее расскажем, как мы решили эти задачи.

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

Что сделали:

— Собрали интерактивный главный экран. Реализовали 3D-модель одной из сталинских высоток из облака точек — пользователь видит здание так, как его видит проектировщик при сканировании.

— Спроектировали раздел «Этапы работ» с трансформацией модели. Пять табов, в каждом из которых здание меняется от скана до готовой модели.

— Выделили объекты наследия в отдельный раздел. Показали 14 зданий на карте Москвы. У каждого строения — своя страница со слайдером «до и после» с детальной отрисовкой и уникальными элементами объекта.

— Отделили капитальный ремонт в самостоятельный блок. Вынесли второе направление компании, чтобы не смешивать с основным видом деятельности. 

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

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

Видео-презентация сайта:

И архитектура, и веб-дизайн связаны с визуалом, поэтому мы сразу поймали общую волну с заказчиком. Плюс в нашем распоряжении оказалось множество технических материалов от клиента: реальные BIM-модели, чертежи, PSD-макеты, 3D-модели. Мы любим технические проекты за детали, и уже не раз работали со смежными тематиками от оборудования до строительства.

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

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

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

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

За основу взяли сгенерированную в неройсети модель, после чего «обвели» ее по готовым контурам, учитывая будущие задачи. Например, нейросеть отдала птицу со слишком большим брюшком, которое бы потом искажало движение полета — так что лишнее было обрезано :)

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

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

Для линейной стилизации и настройки сцен, например, где птица облетает здание, использовали Spline. 

Немного процесса анимации:

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

Работа архитектурного бюро — это многоэтапный процесс, который сложно объяснить текстом, зато можно наглядно показать. Мы перевели его в интерактивный раздел с пятью вкладками. На всех этапах дана одна и та же 3D-модель здания, которая трансформируется при переключении. Ракурс и положение не меняются — только сам объект. 

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

Бюро работает со знаковыми историческими объектами Москвы: сталинские высотки и памятники архитектуры. Портфолио нужно было показать подробно и интерактивно. Вместе с заказчиком мы оформили 14 зданий в отдельный раздел со стилизованной картой Москвы. Так клиенты сразу видят географию, масштаб работ и сильный опыт компании.

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

В центре страницы разместили слайдер «до и после». Пользователь видит, как выглядел объект на этапе обследования и что получилось в результате на архитектурном чертеже — в формате проектной документации.

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

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

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

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

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

Итоги:

— Через визуал презентовали портфолио бюро — оформили 14 кейсов по работе с объектами культурного наследия. Теперь достижения и знаковые кейсы работают на репутацию и помогают получать больше заявок

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

— Разделили 2 типа услуг: культурное наследие и капитальный ремонт типовых зданий. Теперь WILDBIM получает спрос обеих клиентских аудиторий

— Отметили BIM-проектирование исторических зданий как УТП и конкурентное преимущество

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