Логотип в стиле glitch, 3D-макеты аттракционов и неон - как создавался сайт парка виртуальных развлечений

Поделиться

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

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

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

Перед веб-студией стояли следующие задачи:

  1. Создать яркий и запоминающийся дизайн;
  2. Разработать 3D-макеты для пока не существующих аттракционов и зон;
  3. Адаптировать работу сайта для смартфонов и планшетов.

Решение:

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

Вариант 1. Сравнение картинки в VR-очках и без

1.png

Идея с простым техническим решением: фоном была обычная фотография комнаты, которая преображалась под VR-очками.

Вариант 2. Интерактивная экскурсия по парку

2.png

3.png

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

Вариант 3. Полное погружение в VR-пространство

4.png

5.png

Суть идеи - полное погружение пользователя. При входе на сайт он "надевает" очки и попадает в виртуальную реальность. На сайте запускается видео, которое закидывает пользователя в череду захватывающих событий и показывает самые современные игры. Человек после этого должен был сказать: "Вау, это впечатляет!". Заказчик выбрал именно эту идею.

К нам подключилась команда маркетологов со стороны клиента. Вместе мы разработали сценарии взаимодействия и внесли правки в концепцию. Теперь пользователь вместо видео попадал в светящийся телепорт, который переносил его на карту парка. С карты посетитель мог перейти в любую зону, почитать о ней общую информацию и посмотреть на аттракционы.

6.png

7.png

8.png

Сначала мы реализовали карту как объемную и двигающуюся 3D-модель:

9.png

При тестировании на мобильных устройствах карта долго загружалась, и мы создали альтернативный вариант:

10.png

С карты можно было перейти на разные зоны парка. Напомним: локаций и аттракционов в реальном помещении еще не было. Чтобы их создать, визуализатор долго изучал информацию в интернете и создавал 3D-модели по видео, фото и описаниям, которые пришлось переводить с китайского. Получилось так:

11.png

12.png

13.png

14.png 

Мы помнили и про общую стилистику проекта. Фон каждой страницы движется за мышкой, текст “выплывает” постепенно. Вверху страницы находится логотип парка, анимированный в стиле glitch - на нем появляются и исчезают телевизионные помехи. Мы постарались передать атмосферу будущего.

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

Сами VR-технологии воздействуют на органы чувств. Чтобы это подчеркнуть, мы использовали яркие формулировки: “вы можете испытать”, “взрыв адреналина и драйва”, “удовольствие от новых ощущений”. Описания вышли не только красочные, но и уникальные - сайт был полностью готов к SEO-оптимизации.

15.png

16.png

17.png

Дальше необходимо было адаптировать сайт для разных типов устройств. Чтобы он корректно отображался на телефонах, планшетах и ноутбуках, мы создали около 40 макетов. Некоторые из них подгонялись по структуре вручную. Проверили, как открывается сайт на мобильных устройствах в горизонтальной и вертикальной ориентации. Готовый сайт тестировали на самых разных телефонах, от 5-го до последнего iPhone. В конце концов, мы смогли добиться корректного отображения абсолютно везде.

Итоги:

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

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

Над проектом работала команда из 9 специалистов веб-студии «Медиа Лайн» – менеджер проекта, арт-директор, дизайнер, 3D-проектировщик, 3 верстальщика, копирайтер и контент-менеджер.

Поделиться
Материалы по теме:
Обсуждение:
Читайте также: