Сайт Baku City Circuit

Задача

Сайт этапа Гран‑при Формулы‑1 в Азербайджане, одного из важнейших событий как для мира автоспорта, так и для туристической сферы принимающей страны.

Погрузиться в невероятную атмосферу драйва и скорости, превышающей зачастую отметку в 300 км/ч, и полностью спланировать свои гоночные выходные в рамках одного сервиса — то, что должно быть доступно для каждого фаната «королевских гонок».

  • Платформа
Награды
Awwwards
Awwwards
Рейтинг Рунета
Рейтинг Рунета
CSSDA
CSSDA
Золотой сайт
Золотой сайт

Технологии

  • Gulp

    Gulp

  • Sass

    Sass

  • Webpack

    Webpack

  • Easel JS

    Easel JS

  • TweenJS

    TweenJS

  • Three.js

    Three.js

  • Yii 2 Framework

    Yii 2 Framework

  • MySQL

    MySQL

  • Data Import

    Data Import

  • Data Export

    Data Export

Интеграции

  • iTicket.UZ

    iTicket.UZ

Аналитика

Проведение Гран‑при Формулы‑1 в Баку важно не только с точки зрения спорта, но и как направление развития событийного туризма.

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

Формула‑1 — это, в первую очередь, особая атмосфера, которую нам важно было передать. С главной страницы мы ведем пользователя в раздел «Как это было в 2016», где он может оценить масштаб и уникальность события.

Имея представление о программе гоночного уикенда в Баку, пользователь может выбрать лучшую трибуну, забронировать ближайший к ней отель и приобрести билеты в разделе «Купить».

Составить свою уникальную программу тем, кто уже купил билеты, поможет интерактивный «Гид по гонке» — в этом разделе собрана полезная информация об инфраструктуре мероприятия, расписании гонки и развлекательной программе, а также полезные советы для туристов.

Одна из бизнес‑задач события и сайта — привлечение туристов в Азербайджан. Уникальная культура, исторические и природные достопримечательности Страны огней также заслуживают особого внимания — увидеть, насколько интересным может быть путешествие по Азербайджану, пользователи могут на трехмерной карте.

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

Концепция | Полное погружение

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

Ваше место на гонке

Наблюдать за полосой разгона или следить за болидами, несущимися по старому Баку, поселиться неподалеку от трассы или отдохнуть от шума гонки, купить сувениры и перекусить между заездами — всю необходимую информацию можно найти на интерактивной карте трассы в разделе «Гид по гонке».

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

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

Карта

Для создания головокружительной трехмерной карты Азербайджана и Баку мы использовали спутниковые снимки и градиентную карту высот. Благодаря технологии Displacement mapping, которая позволяет за счет градиентной карты высот формировать рельеф в 3D — чем светлее точка на изображении, тем сильнее выдвигается это место на объекте. При этом камера плавно опускается в процессе прокрутки.

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

Онлайн-витрина

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

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

В любой комплектации

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

Похожие кейсы