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

Главное о кейсе

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

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

Как проект изменил жизнь пользователей

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

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

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

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

Бизнес-задача и ее решение

Задача
WILDBIM нужен был имиджевый сайт, который покажет главные преимущества компании: BIM-технологии в реставрации, а не только в новом строительстве, и богатое портфолио со знаковыми объектами Москвы.

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

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

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

Крафт (мастерство), реализация, технические детали

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

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

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

Полет птицы
Это полноценный 3D-объект: от референсов до анимации с движением крыльев, взлётом и посадкой на шпиль. Птицу оживили через скелетную анимацию: прорисовали кости, привязали их к геометрии модели и создали движения.
Птица реагирует на скрол, клик и перемещается между разделами. Модель оптимизирована, чтобы анимация шла плавно и не тормозила загрузку.

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

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

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

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

Скриншоты

Комментарий заказчика

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