Цифровая архитектура: сайт с 3D и точечной моделью объекта
Привет, это Атвинта! Рассказываем как разработали имиджевый сайт с интерактивными моделями.
Клиент
Московская компания в сфере архитектурно-строительного проектирования. Специализируется на разработке проектов по объектам культурного наследия и капитальному ремонту зданий.
Компания выполняет полный цикл работ: обследование зданий, разработка документации, прохождение государственных экспертиз и авторский надзор. В своей работе команда использует современные программные комплексы и методы проектирования — например, лазерное сканирование, 3D-моделирование и BIM (объектно-ориентированная модель строительного объекта).
Задача
Заказчик обратился к нам за разработкой имиджевого сайта. Прошлая версия создавалась как базовый минимум для визитки и не отражала основную деятельность компании — работу с объектами культурного наследия.
При этом 90% клиентов приходят через рекомендации, например, спросили контакты у экспертов или узнали о бюро через партнеров. В таком сценарии сайт работает как визитная карточка: потенциальный заказчик уже слышал о бюро и переходит, чтобы убедиться в уровне компетенций компании.
Цель проекта: создать имиджевый сайт, который показывает экспертизу компании в BIM-моделировании исторических зданий и сложных объектов.
Задачи:
- Экспертиза. Показать стратегическое преимущество — применение BIM-технологий в реставрации, а не только в новом строительстве.
- Работа со сложными проектами. Выделить объекты культурного наследия в отдельное портфолио с индивидуальной подачей каждого здания.
- Два направления. Разделить наследие и капитальный ремонт, чтобы не смешивать их в общий поток проектов.
- Индивидуальность. Сделать сайт для узкого круга специалистов с акцентом на качество и подход к работе.
Решение
Мы разработали имиджевый сайт для архитектурно-реставрационного бюро. Заказчик глубоко погружен в тему и пришел с детальным видением проекта — от визуального стиля до структуры разделов. Это позволило нам синхронизировать идеи и быстро выстроить рабочий процесс.
В портфолио компании много визуальных исходников, от которых можно оттолкнуться при разработке дизайн-концепции: чертежи, облака точек и детальная отрисовка зданий. Мы уже переводили техническую документацию в веб-формат для «Раймет» и «Опалубки-Домстрой». Клиент также передал обширный пакет исходников: PSD-макеты, покадровые анимации и 3D-модели. Наша команда переработала материалы, взяла за основу минималистичную эстетику заказчика и усилила подачу интерактивными элементами.
Что сделали:
- Собрали интерактивный главный экран. Реализовали 3D-модель одной из сталинских высоток из облака точек — пользователь видит здание так, как его видит проектировщик при сканировании.
- Спроектировали раздел «Этапы работ» с трансформацией модели. Пять табов, в каждом из которых здание меняется от скана до готовой модели.
- Выделили объекты наследия в отдельный раздел. Показали 14 зданий на карте Москвы. У каждого строения — своя страница со слайдером «до и после» с детальной отрисовкой и уникальными элементами объекта.
- Отделили капитальный ремонт в самостоятельный блок. Вынесли второе направление компании, чтобы не смешивать с основным видом деятельности.
- Добавили контрастный элемент — красную птицу. Разработали анимацию, которая делает архитектурную подачу более живой.
Дизайн: архитектурная эстетика и полет птицы
Собрали визуальную систему, которая отражает специфику архитектурного бюро: минимализм, черно-белая палитра с теплыми тонами, тонкие линии и чистая композиция.
Хотелось создать строгий минимализм с архитектурной эстетикой — четкие линии подчеркивают направление проекта и создают визуальную выразительность. Концепция строилась вокруг процесса создания цифровой 3D-модели здания. Добавили особенности, которые передают характер проекта, — чертежные засечки и полоску из штриховки на ховере.
На первом экране нужно было передать особенности деятельности компании. Мы пробовали несколько направлений: барельефы из реальных проектов заказчика, классические скульптуры и колонны. Варианты выглядели стильно, но сайт клиента тогда бы не отличался от других архитектурных бюро.
Решение нашли в рабочем процессе самого клиента — облако точек. Так выглядит здание после лазерного сканирования — до того, как станет моделью. Это прямая отсылка к тому, чем заказчик занимается каждый день.
На брейншторме мы уже знали, что на главном экране будет здание из облака точек. Но сам по себе дизайн получался монументальным. Нужен был контрастный элемент: что-то живое и маленькое на фоне больших зданий. Так появилась птица. Она работает на контрасте с масштабом и статикой, при этом органично смотрится рядом с архитектурой.
Концепцию с птицей показали заказчику на пресейле. Клиент рассматривал несколько агентств, и когда команда обсуждала, с кем работать, все проголосовали за Атвинту — идея зацепила уже на старте.
Читайте наш гайд по созданию 3D-сцены для архитектурного бюро
Мы создавали птицу как полноценный 3D-объект: от сбора референсов до готовой анимации с движением крыльев, взлетом и посадкой на шпиль. Модель оптимизировали под устройства и браузеры, чтобы анимация работала плавно и не замедляла загрузку сайта.
Птица реагирует на прокрутку, перемещается между разделами и сопровождает пользователя. Хочется проскроллить дальше, чтобы увидеть, что она будет делать. Так акцентный элемент удерживает внимание и мотивирует изучать сайт глубже.
Этапы работы бюро: показываем процессы интерактивно
Работа архитектурного бюро — это многоэтапный процесс, который сложно объяснить в текстовом формате. Мы перевели его в интерактивный раздел с пятью вкладками. На всех этапах дана одна и та же 3D-модель здания, которая трансформируется при переключении. Ракурс и положение не меняются — только сам объект.
На каждом этапе видно, как меняется облик модели:
- Обследование — необработанное изображение с фотографической текстурой, результат лазерного сканирования.
- Моделирование — послойная BIM-модель с видимой внутренней структурой.
- Документация — модель с точками-индикаторами на фасаде для фиксирования декоративных элементов и архитектурных особенностей, которые необходимо сохранить.
- Подсчет объемов — модель в разрезе, из которой извлекаются данные для формирования смет.
- Экспертиза — полноцветное готовое здание, например, после завершения работ по реставрации.
На первом и втором этапах доступна анимация — процесс сканирования и построения модели запускается по кнопке. Также мы разместили слайдер с хронологией (таймлайном) процесса. Потенциальный заказчик понимает процессы работ и видит глубину экспертизы.
Клиент передал модель здания из нескольких тысяч элементов. Я сделал из них пять состояний здания в одном ракурсе: сортировал объекты по этажам, разделял крупные элементы на части и настраивал цвет и текстуры под каждый шаг. Отдельной задачей было собрать модель в разрезе для этапов моделирования и подсчета объемов.
На третьем шаге также добавили интерактив — кликабельные элементы. При нажатии справа открывается архитектурный чертеж конкретного объекта — например, декоративное оформление оконного проема или башни. Так мы показываем уровень детализации, с которым работает бюро.
Наследие: портфолио исторических объектов
Бюро работает со знаковыми историческими объектами Москвы: сталинские высотки и памятники архитектуры. Портфолио нужно было показать подробно и интерактивно. Вместе с заказчиком мы оформили 14 зданий в отдельный раздел со стилизованной картой Москвы. Так потенциальный заказчик сразу оценивает географию, масштаб работ и релевантный опыт компании.
Для каждого здания мы сделали отдельные страницы по единому шаблону с исторической справкой и архитектурными особенностями. У любого объекта культурного наследия есть архивное название — например, «Саввинское подворье». Это памятник архитектуры, который в 1938 году передвинули вглубь квартала на новый фундамент.
В центре страницы разместили слайдер «до и после». Пользователь видит, как выглядел объект на этапе обследования и что получилось в результате на архитектурном чертеже — в формате проектной документации.
На странице можно изучить другие архитектурные чертежи объекта: фасады, планы этажей и детали декоративных элементов. Все материалы адаптированы нашими дизайнерами под единый стиль сайта. Такая подача работает как визуальное портфолио. Руководителю, который выбирает подрядчика, достаточно карты — он оценивает масштаб. Главный архитектор или начальник отдела открывает конкретные объекты, изучает детализацию и оценивает глубину проработки.
Капитальный ремонт: услуга по модернизации типовых зданий
Помимо объектов наследия заказчик работает с капитальным ремонтом и модернизацией типовых зданий. Мы выделили направление в отдельный раздел, чтобы показать, что бюро берет проекты разного масштаба.
Отзыв
Перебрали нескольких подрядчиков и остановились на Атвинте. Больше всего понравился подход и то, что мы на одной волне — команда сразу предложила план реализации. В процессе работы мы очень быстро все согласовывали и получилось ровно то, что задумывали. Мы получили сайт вне времени — чертежи на страницах объектов всегда будут выглядеть так, как выглядят, потому что это нормативный формат. А фрагмент здания из облака точек на главном экране — это демонстрация работы с использованием современных технологий.
Результат
Мы разработали имиджевый сайт для архитектурно-реставрационного бюро, который показывает экспертизу компании и работает как визитка для потенциальных заказчиков и партнеров.
Итоги:
- Создали интерактивный первый экран с 3D-моделью из облака точек. Формат отражает специфику бюро и отличает сайт от типичных проектных компаний.
- Показали этапы работ с пятью трансформациями здания. Потенциальный заказчик видит процесс и оценивает глубину подхода.
- Оформили портфолио из 14 объектов культурного наследия на интерактивной карте Москвы. Каждое здание получило отдельную страницу с исторической справкой, слайдером «до и после» и архитектурными чертежами.
- Выделили капитальный ремонт в отдельный раздел. Это позволяет показать второе направление деятельности.
- Разработали анимированный элемент — красную птицу. Она создает контраст с монументальной архитектурой и делает сайт запоминающимся.
Бюро получило сайт, который презентует компанию, демонстрирует масштаб выполненных проектов и упрощает первый контакт с заказчиком.