Наша ERA: как мы обуздали WebGL для сайта о недвижимости
Рассказ о продукте влияет на его ценность в глазах потребителя. Красота ассоциируется с истиной, поэтому качество формы переносится на содержание. Сайт об ERA, выдающемся девелоперском проекте нашего постоянного партнера Tekta, должен быть не менее смелым и новаторским, чем сам проект.
Центральный элемент сайта — интерактивная 3D-карта района на WebGL. Это первое решение такого уровня и масштаба в рунете, да и среди сайтов о жилой недвижимости во всем мире аналогов немного. Рассказываем, как мы создали самый продвинутый промо-сайт для ведущего застройщика.
Кто мы?
Мы — Vide Infra, занимаемся дизайном и девелопментом диджитал-продуктов. Делаем бесподобные сайты, которые регулярно собирают награды, входим в топ-10 самых креативных веб-студий Рейтинга Рунета и топ-40 мирового рейтинга Awwwards. О наших проектах и новостях, читайте на videinfra.ru
Партнерство с Tekta
Tekta group — один из крупнейших девелоперов Москвы. Для Tekta мы создали уже три проекта, и каждый завоевал награды на российских и мировых конкурсах веб-дизайна:
Флагманский проект ERA — самый амбициозный из всех, с которыми мы работали. Это квартал из 6 высоток, переосмысляющий архитектурный стиль ар-деко. Он располагается в Даниловском районе Москвы, на границе между городским центром и периферией.
Как возник концепт
Ар-деко
Отправной точкой бренда стал архитектурный стиль ERA — ар-деко. Изначально у нас был соблазн сфокусироваться на шике и гедонизме в духе “Великого Гэтсби”. Однако слишком агрессивное праздничное настроение не попадало бы в аудиторию. ERA — это качественное и доступное жилье для среднего класса. Или, как выразил это клиент: “Мы продаем не Роллс-Ройсы, а Мерседесы”. Поэтому мы сменили регистр на более спокойный, уютный и домашний, сохранив основные темы.
Ар-деко определил сдержанную благородную палитру и геометрию, объединяющую сайт. Элементы фасадов ERA: узоры, арки и линии — легли в основу патернов фона, переходов и других элементов.
Сквозная линия
Ключевой образ всего сайта — сияющий силуэт здания, который появляется на начальной заставке. Мы создали его с помощью технологии WebGL. Он символизирует эпохальность, значительность появления квартала ERA в городе. Образ подчеркивает слоган: “Начало новой эры”.
Из этих концептов вытекает визуальный лейтмотив — световая линия. Она регулярно встречается на сайте в разных формах, делает его узнаваемым. Чтобы сделать эти линии яркими, детализированными и объемными, мы также использовали WebGL.
Контент — чем наполняли сайт
Сайт насыщен контентом, который возвращает заинтересованного клиента. Каждый раз посетитель будет обнаруживать новые детали, валидирующие его выбор.
Расположение
Локация — одно из ключевых преимуществ любой жилой недвижимости. Клиент выбирает не просто здание, а образ жизни.
Квартал ERA строится в своеобразном районе с богатой историей и культурой, который находится между городским центром и периферией. Нам было важно рассказать о нем: какие возможности он дает, в какой атмосфере находятся жители и как ERA взаимодействует с контекстом. В результате раздел сайта о расположении квартала получился нетипично большим — значит нужно подать объемную информацию так, чтобы увлечь, а не утомить посетителя.
Сайт ведет пользователя с помощью эмоционального сторителлинга, не требующего усилий для погружения и навигации. Элементы презентации разбиты нестандартными переходами и оживлены лаконичной анимацией. Они удерживают внимание и задают интригу.
Пространство и время
Мы рассказываем о ключевой для потенциальной аудитории инфраструктуре: транспортных узлах, детских учреждениях, развлечениях. Но помимо этого нам важно передать окружающую ERA атмосферу. Поэтому мы посвятили отдельные блоки обзору культурных локаций и архитектурных стилей района. Визуальная насыщенность и деликатная интонация эмоционально заряжают пользователя.
Глубоко проработанный контекст демонстрирует заботливое отношение застройщика к окружению, подчеркивает, насколько органично ERA взаимодействует со средой. Все это поднимает символический капитал проекта. Он становится более престижным и привлекательным в глазах клиентов.
Архитектурное событие
Небольшой экскурс в историю стиля ар-деко встраивает ERA в традицию — это не просто жилой квартал, а событие в городской архитектуре. Покупатель, выбирающий здесь квартиру, чувствует себя его частью. Мы самостоятельно сняли интервью с архитекторами, которое закрепляет это ощущение.
Разбор деталей
Опыт работы над сайтами о недвижимости позволяет прибегать к проверенным решениям, которые касаются общей структуры и удобного UI. Сайт включает поразительные новаторские элементы, привлекающие наибольшее внимание. Несмотря на это, типовые страницы так же продуманы до каждой детали.
3D-карта района
Один из доминирующих разделов сайта, реализованный с помощью WebGL. Создать трехмерную карту района было непросто — это амбициозная и масштабная задача, которую в рунете никто до этого не решал для промо-сайта о жилой недвижимости, но мы однозначно довольны результатом.
Мы самостоятельно адаптировали и упростили реальный план района, создали 3D-модель проекта и встроили ее в сайт. Затем отметили ключевые места притяжения и добавили анимацию. В итоге получился живой, открытый к взаимодействию фрагмент города, вовлекающий пользователя. Он позволяет ощутить объемное пространство и дает такой уровень погружения, который невозможен с двумерной картой.
Дорога к дому
Инфографика о расстоянии до ключевых точек городской инфраструктуры выражена в пространстве. Пользователь вслед за камерой буквально приближается к району. Этот пролет оживлен с помощью трехмерных эффектов: разворачивающейся световой дорожки и параллакса звездного фона. В целом возникает глубокое виртуальное пространство, при этом визуально не перегруженное.
Цельный взгляд
Обычно подробный рассказ об архитектурных особенностях подается через отдельные фрагменты. Вместо этого мы использовали большой рендер проекта с хорошим разрешением, чтобы сохранить цельное впечатление. При скролле камера наводится на конкретные детали рендера, а картинка не теряет качество.
Здание на ощупь
Чтобы рассказать о материалах проекта мы создали кастомные 3D-модели. На сайте они представлены как статичные иллюстрации, но объем позволяет передать тактильное ощущение от текстур, обогащая восприятие пользователя.
Разум и чувства
Мы выстраиваем сторителлинг таким образом, чтобы он работал и на рациональном уровне, и на эмоциональном. Экспрессивный визуальный ряд и слоганы соседствуют с цифрами и фактами. Такая комплексная насыщенность развлекает пользователя и дает ему конкретное понимание преимуществ проекта.
- В центре рассказа о благоустройстве объемный план внутренней территории с инфографикой. Он погружает в жизнь двора, позволяет наглядно представить конкретные занятия будущих жителей.
- Раздел с планировками квартир не выбивается из общего визуального стиля сайта. Фоном служат детали интерьера — чтобы совместить абстрактное впечатление от схем с чувством будущего дома.
- Параметрический выборщик позволяет задать фильтры для поиска квартир. Выбор этажа анимирован с помощью интерактивной модели зданий.
- Для рассказа о высоте потолков мы используем вертикальное изображение, чтобы пользователь мог буквально ощутить пространство.
- Застройщики часто используют только рендеры с летними видами. Мы добавили слайдер с временами года, который дает представление о яркой жизни квартала даже зимой и в межсезонье.
Как использовали WebGL
Одной из амбициозных целей было придать сайту глубину за счет объемных элементов и интерактивных моделей. Для этого мы использовали технологию WebGL, которая позволяет рендерить 3D-объекты прямо в браузере.
Что это за технология?
WebGL позволяет рисовать трехмерные объекты, задавать им текстуру, располагать относительно камеры, устанавливать свет — все, как в привычном софте для 3D-моделирования. Только делается это с помощью кода. Без WebGL нельзя получить на сайте динамическую трехмерную графику.
WebGL исполняется как элемент HTML5 и требует работу с языком GLSL. На нем пишутся основные функции WebGL — шейдеры, которые задают координаты вершин объектов и определяют цвета пикселей. В основном, мы использовали библиотеку Three.js, которая упрощает доступ к 3D-объектам.
Эту технологию часто используют для создания инфографики, карт, виртуальных туров, демонстрации дизайна продуктов. 3D требует мощностей, но сайт должен быть легким, быстрым и удобным, чтобы удержать пользователя. Соблюсти этот баланс сложно, поэтому промо-сайты редко используют WebGL — по крайней мере, с таким размахом, как это сделали мы.
Однако удачное решение этой проблемы оправдывает усилия— достичь такой глубины, интерактивности и вовлеченности пользователей без WebGL было бы невозможно.
Что мы сделали с помощью WebGL?
Заставку, которая поражает посетителей с первых секунд.
Динамичные световые линии — визуальный лейтмотив.
Интерактивную карту района — уникальную доминанту сайта.
Декоративные элементы, оживляющие сайт: объемные галереи, параллакс звездного неба и т.д.
Заставка
Футуристичные интерактивные силуэты зданий — лицо проекта, они задают тон всему сайту. Мы стремились создать качественный, содержательный образ, который восторгает неожиданной глубиной и эпохальностью.
Моделирование заставки
На первом этапе иллюстратор нарисовал модель зданий в графическом софте. Это позволило поставить цель — увидеть, какой результат мы хотим получить. Затем вместе с разработчиком он корректировал модель так, чтобы ее можно было построить с помощью кода. Для этого, прежде всего, требуется ее упростить: чем меньше полигонов — тем меньше вершин будет в коде, а значит быстрее будет грузиться сайт. Общую модель квартала мы разбили на пять, чтобы можно было взаимодействовать с каждой из них по отдельности и настроить разные эффекты для пяти уровней глубины.
Отрисовка моделей
Дальше предстоял самый сложный этап — придумать метод по которому будет отрисовываться картинка. Изначально мы планировали создать непрозрачную модель и обвести контуры вручную. Но она получалась слишком тяжелой и не давала того эффекта, которого мы добивались. Нам нужен был яркий образ — сияющий силуэт квартала.
Чтобы все здания выглядели качественно, мы изменяли шейдеры под собственные нужды: добавили параметры шума, зернистости и другие свойства, которые определяют, как объекты принимают свет. Все это позволило добиться блюра задней части модели и создать глубину резкости.
Отражение
Мы еще больше оживили пространство, подложив под модель отражающую плоскость. Задали ей текстуру, которая размывает свет и глушит тени, создавая эффект старого потертого зеркала. В результате здания как будто отражаются в мокром асфальте.
Постпроцессинг
Постпроцессинг, то есть наложение визуальных эффектов на всю сцену целиком, — это самый технологичный этап работы. К нашей сцене мы добавили фишай и хроматическую аберрацию, чтобы изображение напоминало голограмму, а также сглаживание, чтобы избежать пикселизации линий.
Какой вышла заставка?
В итоге мы получили зрелищную объемную картинку. Камера реагирует на движения мыши и модель предстает под разными углами. Сайт сразу углубляется, наполняется пространством и поражает продвинутым визуалом.
Карта района
Мы столкнулись с тем, что готовые решения, которые дает специальный софт для карт, недостаточно гибкие — пришлось их кастомизировать. Так мы добились нужного нам управления камерой, увеличили интерактивность и создали более реалистичные объекты, например, реку.
Нам хотелось оживить сцену за счет деталей. Мы нарисовали схему дорог района и использовали ее как информацию о путях, которые добавили на карту. По этим путям запустили частицы — объекты из Three.js. Получились автомобили, которые бесконечно ездят вокруг квартала ERA.
Чего мы добились?
Мы не были уверены, что с помощью WebGL у нас получится добиться желаемого результата — добавить на сайт интерактивные объемные элементы, сохранив зрелищность и эстетическую целостность.
Это была неисследованная территория в области промо-сайтов о недвижимости. Однако в итоге мы получили то, что хотели — масштабные интерактивные элементы, которые увлекают пользователей. В них сконцентрирована тема всего сайта — экстраординарный прорыв, определяющий новые стандарты качества. Именно так мы хотели рассказать об ERA.
Подпишитесь на нас, чтобы не пропустить новые детальные разборы кейсов, обсуждения трендов индустрии и взрывных идей. Также следите за нами в Telegram-канале и на сайте Vide Infra. Следующий лонгрид мы посвятим тому, как можно использовать ИИ в банковских приложениях.
На связи!
Отличный результат! Все сайты вышли как на подбор, титаническая работа и заслуженные награды и восхищение
Спасибо! Фишка в том, что все это — один сайт)
А, вы, наверное, и про другие сайты. Спасибо! Отдельно приятно, что заглянули на videinfra.ru
анимации залипательные
Спасибо!
Очень красиво!
Спасибо!