27 Окт 2020

Как сделать сайт, после которого клиент получит заказ от HBO, а мы — крутой кейс

Заказчик
Ultraviolet Way — калифорнийский сервис аренды премиальных автомобилей для продакшена.
Задача
Разработать стильный и современный сайт для персонализированной рассылки состоятельным клиентам.

Целевая аудитория

Основные клиенты Ultraviolet Way — студии продакшена, которые арендуют автомобили для съёмок в клипах, сериалах и кино. Это продюсеры и топ-менеджеры, которые легко могут выделить место в смете под McLaren 720S, Ferrari 812 или Mercedes Brabus G550.

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

Анализ трендов

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

Особенно эффектно такие сайты смотрятся на широкоформатных мониторах, а клиенты Ultraviolet Way чаще всего пользуются именно такими ПК. Решено: используем тактику подавляющего гипервизуала!

Разработка сайта

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

Дизайн

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

Цель сайта — показать все автомобили и помочь пользователю заказать то, что ему понравится. Поэтому мы сделали сразу два меню с коллекцией:

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

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

Разработка

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

Прежде всего, Wordpress. Не самая оригинальная, но точно одна из самых удобных CMS для управления контентом. Плюс ACF для удобства редактирования данных. Валидацию полей ввода взял на себя vee-validate, а также маска ввода, созданная при помощи v-mask.

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

Оптимизация

Интерактивность и гипервизуализация сайта не могла не сказаться на скорости его загрузки. Для его ускорения и оптимизации мы реализовали целый комплекс решений во front-end и back-end разработке.

Front-end:

  • Responsive Images в вёрстке, чтобы адаптировать размер изображений под устройство.
  • Nuxt.js (vue.js), основной фреймворк проекта, помог собрать все стили и скрипты в минимальное количество файлов.

Back-end:

  • W3 Total Cache и WP REST Cache для кэширования данных, чтобы ускорить ответ от сервера
  • EWWW Image Optimizer для сжатия и кроппинга изображений

Итоги

Открытие нового сайта прошло на закрытой вечеринке с приглашением представителей крупных продакшенов и компаний. Мы не уверены, был ли на ней сам Дуэйн Джонсон, но вскоре после презентации автомобили Ultraviolet Way засветились в сериале «Игроки» (Ballers) производства HBO.

Кроме профессионалов продакшена, хорошие отклики мы получили и от коллег по веб-дизайну. uv-way.com получил награды:

  • Сайт дня на Awwwards
  • Сайт дня на CSS Design Awards
  • Номинация на сайт месяца в CSS Design Awards

 


Перейти на сайт

В карточку агентства

Письмо автору кейса

Пользуйтесь реальным опытом в IT и следите за успехами потенциальных подрядчиков и конкурентов
Читайте также
Кейсы по теме#Авто, мото, спецтехника