Зрелищный кейс от Rocket Business: сайт-портфолио для студии видеографии из Дубая. Делимся нашим первым опытом разработки для клиента, у которого целевая аудитория — мировые бренды.
155 показов 33 открытия
Дорого-богато, но со вкусом
QVAL Film — известная студия в премиум-сегменте ОАЭ. За 12 лет на рынке команда видеографов успела поработать с именитыми клиентами: Four Seasons, Chopard, Marks&Spencer, Adidas, Swarovski.
Презентации новых коллекций одежды, промо-ролики для музыкантов и исполнителей, видео-рекламы ресторанов и отелей — портфолио нужно было подать красиво. Главный запрос от клиента: сайт должен выглядеть дорого, а цена его разработки не улетать в космос.
Хотелось удивлять посетителя сайта уже с момента перехода по ссылке. Наша команда решила, что для этого понадобятся:
- стильный total black дизайн;
- видео и фото в качестве 4к;
- моментальная загрузка страниц.
Теперь разберем каждый пункт.
Шаг 1: продумать и отрисовать дизайн
В индустрии видео-продакшена продает визуал, поэтому разработка дизайна в этом проекте — ключевая задача.
1. Презентация с первой секунды. Безрамочный видео-баннер включается автоматически после открытия главной страницы. Так посетитель просматривает весь шоурил компании, не сделав ни одного клика на сайте.
2. Минимализм в черном цвете. Дополнять интерфейс 3D-анимацией и перегружать его интерактивом было бы неуместно. Мы сделали акцент на работах студии, оставили однотонный лаконичный фон и классические цвета шрифтов: белый и красный.
3. Логичная структура. Только полезные разделы: в каждом из них лучшие фото и видео, разбитые на категории.
Разделы сайта с портфолио и бекстейджем
4. Имиджевая история. Студия предлагает дорогой продукт без фиксированного прайса. Прежде чем заказать коммерческое видео, лейблы и бренды тщательно изучают подрядчика. Отдельные страницы на сайте позволяют увидеть бекстейдж, оценить рабочий процесс и познакомиться с командой. Целый блок посвящен техническому оборудованию студии.
Страница с оборудованием студии
Шаг 2: разработать легкий сайт
Контента на сайте много: одни только видеозаписи в полном качестве весят по несколько гигабайт. «Тяжеловесным» оказалось и фото-портфолио.
Наполнение сайта в оригинальном виде сильно замедляет его загрузку. Низкие показатели скорости отражаются и на индексации в поисковых системах, и на проценте отказов пользователей. Чтобы добиться быстрой загрузки, программисты выбрали flat-file CMS для верстки сайта. Для тех, кому нужно чуть больше технических деталей, мы добавили пояснение.
Система управления для маленьких сайтов — Flat File CMS
CMS, использующие базы данных для хранения информации, не подошли для нашего сайта-портфолио. В отличие от WordPress, Drupal, ModX и других систем Grav хранит страницы, настройки и контент в отдельных файлах.
Админ-панель CMS Grav
С flat-file CMS:
- экономится время на ответе сервера;
- нет рисков утечки информации;
- сеть нагружается минимально: нет запроса в базы данных;
- контент добавлять легко: интерфейс понятен любому пользователю.
Сайт верстали на сборщике проектов. Его функционал позволяет собрать добавленную или измененную пользователем информацию из CMS и генерировать контент один раз. После открытия страниц выдается уже сгенерированная версия: так нагрузка с сервера снимается. Затем мы настроили кэш, заполнили мета — и получили легкий и быстрый сайт
Александр, senior-программист «Rocket Business»
Шаг 3: ускорить загрузку и добиться идеального качества
Первая версия сайта нуждалась в доработке: качество загруженных медиа-файлов до премиум-уровня не дотягивало.
Сначала мы подключили трансляцию всех видео с Youtube. По правилам платформы качество изображения настраивается автоматически и зависит от скорости интернета. А значит — выбирается оптимальное разрешение 720p. Этого для «вау-эффекта» явно недостаточно. Но хуже всего видео выглядели в первые секунды загрузки.
Вот такую пиксельную и заедающую картинку мы наблюдали на стандартной скорости 4G:
Загрузка видео на главной странице до оптимизации
А такие показатели выдавал Pagespeed после проверки:
Показатели сайта до оптимизации
Мы решили поменять видеохостинг, чтобы добиться отображения всех роликов в 4k.
Для такой задачи подошел Vimeo. Из минусов: платный доступ и затянутый процесс загрузки контента. Зато эта платформа позволяет задать исходное качество изображения и звука, добавить обложки для видео и кнопку перехода в полноэкранный режим.
Стандартных способов интеграции с сайтом Vimeo не предлагает. Для этого программисты переписали код и добавили новые скрипты.
Работу проверяли по контрольному чек-листу:
- Медиафайлы не подвисают, загружаются моментально после открытия страницы;
- Видео в качестве 4к проигрываются на всех типах устройств и браузеров;
- Вложения разворачиваются в полноэкранном режиме по одному клику;
- Фото в разном разрешении идеально встроены в сетку;
- Меню всегда читабельно.
Проверьте и вы — сайт доступен по ссылке.
Любуемся результатами
Загрузка видео после оптимизации
Думаем, добиться нужного эффекта у нас получилось. А после замены хостинга и доработки сайта выросла скорость загрузки.
Показатели сайта после оптимизации
Неожиданный бонус: сайт попадает в ТОП-5 выдачи по ключевым запросам на русском и английском без SEO-продвижения.
Сайт в ТОП-5 выдачи в Яндексе
Задача для нас была непростой: «Rocket Business» знают как одно из лучших SEO-агентств в России. Но отказываться от интересного вызова не стали — программисты и дизайнеры переросли стандартные задачи и решили сделать проект для международного рынка.
Ждем вашей оценки в комментариях!