Заказчик
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
Скажите, почему показывая Car Collection ( https://uv-way.com/cars/ ) вы выводите дикий листинг с непонятной прокруткой? Возможно, такова задумка, но что будет, когда машин будет 20-30-50+? Мобильный пользователь будет 5 минут играть в свайпы как в Тиндере, а пользователь с мышкой играть в кликер? Я уже не говорю о ситуации, когда надо будет вернуться с конца списка в начало, что даже сейчас выглядит нелепо. И тут даже не прикручен обработчик скролла мыши для удобства и простоты изучения перечня доступных машин.
Хорошие отзывы от профессионалов продакшена и веб-дизайна? Отлично! Сайт дня? Супер! Удобство пользователя/клиента? Сойдёт!
UI > UX
Мы предлагали различные варианты галерей заказчику и остановились на том, что UV посчитали лучшим, зная свою ЦА и работая не первый год в этом бизнесе. И пока не было от клиентов, которыми и являются владельцы продакшена, какого фидбэка о неудобстве.
Мы постоянно на связи с нашими клиентами и если бы были пожелания что-то переделать или доработать в связи с тем, что клиенты UV не довольны - мы бы сделали. Но пока все хорошо и машины бомбят экраны телевизоров и мониторов;) Разве не это является объективной оценкой качества работы сайта?
Сейчас бы UX планировать по желанию заказчика.
Что имеешь в виду?
По большому счёту, если заказчик доволен и всё работает как надо, то всё отлично, т.к. проявление инициативы не всегда оправдано.
...почти ничего не стоило сделать на линейке красивую кнопку/стрелку для прыжка в начало и прикрепить обработчик колеса мыши. Ну а если чуть больше времени потратить, то на линию с полосами можно добавить функционал скроллбара с логарифмической прокруткой. А ещё под линейкой можно сделать ленту с миниатюрами для быстрого прыжка на +/- 10 позиций с возможностью пролистывания этих самых миниатюр.Но некоторые мысли вслух:
Про технологии лучше бы не писали:
1) Nuxt.js не собирает все файлы и скрипты в файлы, этим занимается сборщик внутри фреймворка. Да и странно писать про Nuxt.js, в контексте того, что он собирает файлы, хотя его применяют для совершенно других вещей.
Responsive images - это что? Два css свойства на картинки или же использование srcset/picture? И то и то в любом случае стандарт для сайтов.
Использование великого и ужасного WP в качестве CMS в 2020 году - это выбор для сильных духом. Нет чтобы завести воркспейс в любой Headless CMS и дать аккаунт заказичку, который без видео разберется в том как добавлять машинки - мы будем страдать и добавлять плагины в WP для оптимизации™.
Хотя я знаю почему всё именно так, а не иначе и это будет второй тезис.
2) С точки зрения бизнеса вы всё делаете правильно - нанимать ребят с PHP-шным бэкграундом, которые смогли вкатиться во Vue.js это раза так в два, наверное, дешевле, чем искать и платить тем, кто применяет современные технологии для таких статических сайтов.
Только после N месяцев поддержки такого сайта, его проще будет закопать и переписать с нуля, чем допиливать это исчадие ада (только клиентам главное на глаза не попадаться).
Вопрос: зачем же вы этим козыряете, если и писать-то тут нечего?
Сайт красивый, анимации медленные и плавные - всё по канонам "сайтов дня")
Админка WP, особенно если убрать часть функций на определенных ролях, вполне удобна. Да и зачем им headless, чтобы простенький фронт усложнить? — ну хз
Комментарий недоступен
Мы и не представляли тут "революционных" технологий. а сделали ставку на тренды дизайна понятные целевой аудитории клиента. И это было больше года назад - сайт 2019г. Поэтому и спорить даже не будем))
Вы говорите, что главное на сайте — крутой фотоконтент, но сами же потом поверх этого главного размещаете затемняющую плашку, а поверх нее пишете текст. Я не могу нормально, не напрягаясь, посмотреть фотки машин (потому что они затемнены) и я не могу нормально читать текст (потому что он поверх фоток) — зачем это? Это дизайн? Да, мне нужно сколько-то кликов, чтобы попасть туда, где фотки машин не затемнены, но блин, почему это не сделать на главной? Клик — довольно дорого, нет?
Мы бы сказали, что в бизнесе, где продаются не дешевые тостеры домохозяйкам, но есть свая очень узкая и очень заинтересованная аудитория - цена клика или их количество не имеет значения. Тут другая ЦА и совершенно иной пользовательский путь, в процессе которого главное эмоции. Которых мы добились за счет тех инструментов, что мы описали в кейсе.
А подписать каждую машину - было желанием заказчика и да, без затемнения текст бы не читался. Сейчас же проблем нет и все желающие рассмотреть авто со всех сторон и ракурсов легко проваливаются в каточку-галерею выбранного авто и наслаждаются отличным контентом.
Молодцы!
Спасибо)
Побольше бы таких статей! Очень круто, спасибо большое!
Спасибо за фидбэк - ценно и приятно!