Иммерсивное 3D-пространство для Группы Russ
Аналитика и проектирование, UX/UI-дизайн, 3D, motion-дизайн, Bitrix
Russ — российский рекламный оператор, предоставляет более 150 000 рекламных поверхностей в более чем 150 городах России.
В 2023 году компания провела масштабный ребрендинг на фоне расширения присутствия на рынке и в различных сегментах. К классическим и цифровым конструкциям в наружной рекламе, постепенно добавлялись другие направления и теперь Группа Russ объединяет четыре направления: Outdoor, Indoor, Airport и Transit.
Каждое из них предлагает свой уникальный набор продуктов для размещения рекламы в бизнес-центрах, аэропортах, вокзалах, метро и на улицах городов.
Каждое из них предлагает свой уникальный набор продуктов для размещения рекламы в бизнес-центрах, аэропортах, вокзалах, метро и на улицах городов.
Бронза «Услуги для бизнеса»
Золото. Номинация «Сайт для крупнейшей компании»
Контекст и задачи
Компания обратилась к нам с целью создать промосайт, где пользователь сможет прогуляться по объектам городской инфраструктуры и наглядно изучить рекламные форматы разных направлений Russ. 3D формат сцен позволит оценить масштаб и расположение продуктов, а минималистичный интерфейс упростит изучение их характеристик.
Задачи проекта можно разделить на 4 категории:
1. Продакшн: создать реалистичные 3D-сцены городской инфраструктуры, продумать размещение рекламных форматов и пролёты камеры.
2. Интерфейс: разработать понятную логику взаимодействия для пользователей и обеспечить выполнение бизнес-задач клиента.
3. Брендинг: визуально интегрировать и развить айдентику бренда Russ и новых направлений.
4. Разработка: обеспечить высокую скорость воспроизведения и бесшовную навигацию по продуктам.
Аналитика и структура
Работа над проектом началась с аналитики. Задачей этого этапа было собрать все рекламные форматы, оценить их объём и распределить по сценам. Клиент предоставил для анализа все данные о форматах, которые использовались в рекламе вне дома.
Параллельно велась работа над структурой сайта и проработка пользовательского пути. Нам было важно сделать сайт не только эффектным, но и удобным, поэтому мы продумали несколько сценариев изучения продуктов компании. В каждой сцене получилось по 7-12 рекламных форматов.
Разводящий экран
Следующей задачей было продумать путь пользователя до перехода к нужной сцене. Нам пришла идея сразу показать все направления на схеме одного города. Такое решение позволило отразить весь масштаб рекламных возможностей Russ в рамках одного экрана.
Мы полностью отрисовали план города от руки, прежде чем переходить к его моделированию. В стилистике стремились к реализму и уделяли большое внимание деталям архитектуры, стараясь создать некий собирательный образ из разных российских городов.
Готовая карта выполнена в белых и синих оттенках бренда Russ. Это позволяет избежать визуального шума, подчеркнуть архитектурные элементы зданий и выделить из общей массы объектов рекламные форматы, которые мы выполнили в фирменном синем цвете. В карту города мы также интегрировали айдентику направлений Russ. Например, при наведении сцена подсвечивается оттенками направления.
Проектирование и дизайн сцен
Работу над пространствами направлений мы начали с построения композиции всей сцены. На этом этапе делали эскизы пространства, продумывали расположение объектов и траекторию перемещений камеры от одного носителя к другому. Затем отрисовали скетчи продуктов в их реальном окружении.
После создания эскизов мы моделировали черновую сцену в 3D и прорабатывали пролеты камер, постепенно дополняя сцены деталями и делая пролеты плавнее.
Когда результат по композиции сцен и пролетам удовлетворил и нас, и клиента, мы приступили к проработке освещения. Искали нужную контрастность, стремясь приблизить сцены к реалистичному, объёмному виду. Особое внимание уделили теням, бликам и отражениям для создания эффекта полного погружения в пространство.
Разработка
В итоге у нас получилось 5 полноценных сцен с высокой степенью детализации и множеством перемещений внутри них. Поскольку для нас первостепенными были качество изображения и удобство использования, мы реализовали перемещения внутри пространств в формате видео. Этот подход позволил не только сохранить детализацию локаций, но и обеспечить непрерывность пролетов между объектами.
Вся сцена была поделена на отдельные видео-фрагменты, соответствующие каждому рекламному формату. Помимо этого, мы предусмотрели отдельные видео для перемещения назад и вертикальные для мобильной версии.
Из интересных технических решений можно отметить:
— отложенную фоновую загрузку видео, которая не влияет на время загрузки сайта;
— кэширование видео на уровне сессии для предотвращения повторной загрузки видео при переходах по комнатам;
— современный формат видео WebM (также предусмотрена поддержка MP4 для старых браузеров);
— оптимизированные версии видео для мобильных устройств с целью ускорения загрузки и уменьшения потребления трафика;
— ресайз окна браузера, позволяющий отслеживать тип устройства в реальном времени, на основе чего загружаются нужные видео;
— использование сложных SVG анимаций при помощи библиотеки lottie-react в прелоадере и пинах на карте города;
— кэширование запросов на бэк с использованием стратегии SSG (Static Site Generation) на Next.js. Благодаря этому запросы на бэк отправляются только один раз при сборке сайта. В дальнейшем для пользователей статичный контент (т.е. все страницы) будет возвращаться из кэша, что значительно ускоряет загрузку сайта.
Результат
Промосайт Russ — не просто красивый проект, но и рабочий инструмент для презентации возможностей компании.
Он дополняет корпоративный сайт Russ, наглядно и последовательно погружая пользователя в продуктовую линейку компании. Помимо этого, интерактивный характер проекта делает его отличным инструментом для отраслевых мероприятий и выставок, где можно будет презентовать виртуальный город на большом экране.
