Иммерсивный 3D-город для Russ

Задача

Российский рекламный оператор Russ предоставляет более 100 000 рекламных площадок в 149 городах России.

В 2023 году компания провела масштабный ребрендинг. Ранее Russ Outdoor специализировался на предоставлении классических и цифровых конструкций для наружной рекламы, а теперь группа Russ объединяет целых четыре направления: Outdoor, Indoor, Airport и Transit. Каждое из них предлагает свой уникальный набор продуктов для размещения рекламы в бизнес-центрах, аэропортах, вокзалах, метро и на улицах городов.

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

Задачи проекта можно разделить на четыре категории:

1) Продакшн: создать реалистичные 3D-сцены городской инфраструктуры, продумать размещение рекламных форматов и пролёты камеры.

2) Интерфейс: разработать понятную логику взаимодействия для пользователей и обеспечить выполнение бизнес-задач клиента.

3) Брендинг: визуально интегрировать и развить айдентику бренда Russ и новых направлений.

4) Разработка: обеспечить высокую скорость воспроизведения и бесшовную навигацию по продуктам.

Решение

Для каждого из направлений Russ мы разработали свою виртуальную сцену:

— Улица (Outdoor)

— Бизнес-центр (Indoor)

— Аэропорт (Airport)

— Метро и Вокзал (Transit)

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

Расскажем, как мы пришли к такому результату.

Главная страница. Интерактивный 3D-город

— 5 полноценных сцен, соответствующих направлениям компании, для пошагового изучения рекламных форматов.

Создали виртуальный город для полного погружения в экосистему Russ

— 58 рекламных форматов обработали и структурировали в рамках этапа аналитики.

1. Аналитика и структура

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

Структурировали и распределили форматы на этапе аналитики

01 — Подготовительный этап. К каждому формату мы для начала подбирали фотографии. Это помогло понять, как они выглядят и где находятся. 

02 — Структура и интерфейс. Параллельно велась работа над структурой сайта
и проработка пользовательского пути. Нам было важно сделать сайт не только эффектным, но и удобным, поэтому мы продумали несколько сценариев изучения продуктов компании. В каждой сцене получилось по 7-12 рекламных форматов. 

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

— 53 рекламных формата вошли в финальную версию сайта.

2. Разводящий экран

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

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

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

Этапы проектирования

Проектирование города

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

Цветовое брендирование

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

В карту города мы также интегрировали айдентику направлений Russ. 
Например, при наведении сцена подсвечивается оттенками направления.

3. Проектирование и дизайн сцен

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

Этапы проектирования

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

Затем на основе фотографий рекламных форматов, которые мы собрали на этапе аналитики, рисовали скетчи продуктов в их реальном окружении.

02 — Варианты освещения/цвета. Когда результат по композиции сцен и пролетам удовлетворил и нас, и клиента, мы приступили к проработке освещения. Пробовали самые разные варианты — от белого нейтрального освещения до имитации закатного солнца. 

Искали нужную контрастность, стремясь приблизить сцены к реалистичному, объёмному виду. Особое внимание уделили теням, бликам и отражениям для создания эффекта полного погружения в пространство.

Итоговая визуализация

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

Улица. Демонстрирует форматы для наружной рекламы на улицах городов и в наземном общественном транспорте.

Бизнес-центр. Погружает пользователя в офисное пространство с брендированными элементами.

Вокзал. Спроектирован на основе Ленинградского вокзала в Москве и проводит пользователя через платформу, поезда Сапсан и Иволгу.

UI-элементы и носители в синих оттенках сохраняют связь с основным цветом Russ в любой из сцен

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

Аэропорт. Вдохновлен аэропортом Пулково. Знакомит пользователя с рекламными возможностями в зонах прилёта/вылета и посадки.

Метро. Объединяет форматы для московского и петербургского метрополитена в зоне турникетов, эскалатора, платформы и внутри вагона.

4. Разработка

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

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

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

Из интересных технических решений можно отметить:

— отложенную фоновую загрузку видео, которая не влияет на время загрузки сайта;

— кэширование видео на уровне сессии для предотвращения повторной загрузки видео при переходах по комнатам;

— современный формат видео WebM (также предусмотрена поддержка MP4 для старых браузеров);

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

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

— использование сложных SVG анимаций при помощи библиотеки lottie-react в прелоадере и пинах на карте города;

— кэширование запросов на бэк с использованием стратегии SSG (Static Site Generation) на Next.js. Благодаря этому запросы на бэк отправляются только один раз при сборке сайта. В дальнейшем для пользователей статичный контент (т.е. все страницы) будет возвращаться из кэша, что значительно ускоряет загрузку сайта.

Системные элементы

Результат

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

  Еще больше идей, кейсов и новостей от Only — на сайте, в Dprofile и Telegram.