- Заказчик
- 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