Имиджевый сайт для архитектурно-реставрационного бюро

1. Вводная задача от заказчика, проблематика, цели

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

При этом 90% клиентов приходят через рекомендации, например, спросили контакты у экспертов или узнали о бюро через партнеров. В таком сценарии сайт работает как визитная карточка: потенциальный заказчик уже слышал о бюро и переходит, чтобы убедиться в уровне компетенций компании.

Цель проекта: создать имиджевый сайт, который показывает экспертизу компании в BIM-моделировании исторических зданий и сложных объектов.

Задачи:

• Экспертиза. Показать стратегическое преимущество — применение BIM-технологий в реставрации, а не только в новом строительстве.
• Работа со сложными проектами. Выделить объекты культурного наследия в отдельное портфолио с индивидуальной подачей каждого здания.
• Два направления. Разделить наследие и капитальный ремонт, чтобы не смешивать их в общий поток проектов.
• Индивидуальность. Сделать сайт для узкого круга специалистов с акцентом на качество и подход к работе.

2. Описание реализации кейса и творческого пути по поиску оптимального решения

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

В портфолио компании много визуальных исходников, от которых можно оттолкнуться при разработке дизайн-концепции: чертежи, облака точек и детальная отрисовка зданий. Мы уже переводили техническую документацию в веб-формат для «Раймет» и «Опалубки-Домстрой». Клиент также передал обширный пакет исходников: PSD-макеты, покадровые анимации и 3D-модели. Наша команда переработала материалы, взяла за основу минималистичную эстетику заказчика и усилила подачу интерактивными элементами.

Что сделали:

• Собрали интерактивный главный экран. Реализовали 3D-модель одной из сталинских высоток из облака точек — пользователь видит здание так, как его видит проектировщик при сканировании.
• Спроектировали раздел «Этапы работ» с трансформацией модели. Пять табов, в каждом из которых здание меняется от скана до готовой модели.
• Выделили объекты наследия в отдельный раздел. Показали 14 зданий на карте Москвы. У каждого строения — своя страница со слайдером «до и после» с детальной отрисовкой и уникальными элементами объекта.
• Отделили капитальный ремонт в самостоятельный блок. Вынесли второе направление компании, чтобы не смешивать с основным видом деятельности.
• Добавили контрастный элемент — красную птицу. Разработали анимацию, которая делает архитектурную подачу более живой.

Дизайн: архитектурная эстетика и полет птицы

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

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

Ирина Жукова

Ведущий дизайнер в Атвинте

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

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

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

Алексей Нибо

Дизайн-директор в Атвинте

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

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

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

Этапы работы бюро: показываем процессы интерактивно

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

На каждом этапе видно, как меняется облик модели:

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

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

«Клиент передал модель здания из нескольких тысяч элементов. Я сделал из них пять состояний здания в одном ракурсе: сортировал объекты по этажам, разделял крупные элементы на части и настраивал цвет и текстуры под каждый шаг. Отдельной задачей было собрать модель в разрезе для этапов моделирования и подсчета объемов»

Станислав Квасов

3D-дизайнер в Атвинте

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

Наследие: портфолио исторических объектов

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

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

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

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

Капитальный ремонт: услуга по модернизации типовых зданий

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

Отзыв

Алексей Хусточкин

Основатель архитектурно-реставрационного бюро, WILDBIM

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

3. Результаты сотрудничества

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

Итоги:

• Создали интерактивный первый экран с 3D-моделью из облака точек. Формат отражает специфику бюро и отличает сайт от типичных проектных компаний.
• Показали этапы работ с пятью трансформациями здания. Потенциальный заказчик видит процесс и оценивает глубину подхода.
• Оформили портфолио из 14 объектов культурного наследия на интерактивной карте Москвы. Каждое здание получило отдельную страницу с исторической справкой, слайдером «до и после» и архитектурными чертежами.
• Выделили капитальный ремонт в отдельный раздел. Это позволяет показать второе направление деятельности.
• Разработали анимированный элемент — красную птицу. Она создает контраст с монументальной архитектурой и делает сайт запоминающимся.

Бюро получило сайт, который презентует компанию, демонстрирует масштаб выполненных проектов и упрощает первый контакт с заказчиком.