Сайт-портфолио для видеопродакшена из Дубая

Предполетный бриф

Swarovski, Four Seasons, Adidas, Chopard — вот неполный список клиентов студии QVAL Film. Команда видеографов уже более 12 лет работает в премиум-сегменте ОАЭ.

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

Хотелось добиться эффекта «вау»: сайт должен впечатлять с первого взгляда. А чем конкретно?

• минималистичным дизайном;
• высоким качеством видео;
• моментальной загрузкой страниц.

О каждом пункте расскажем подробнее.

Взлет

Разрабатываем дизайн

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

• Эффект кинотеатра

  Широкоэкранный видео-баннер в качестве 4к — первое, что видят посетители. Так уровень работ становится понятным уже с первой минуты.

• Total black

  Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого. Пишем белым по черному, выделяем конверсионные кнопки красным.

• Лаконичная структура

  Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео.

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

Верстаем легкий сайт

Основное наполнение сайта — «тяжеловесные» видеозаписи и фотографии. Они существенно влияют на скорость загрузки.

Тормозящие сайты плохо индексируются поисковыми системами, а пользователи быстро уходят с таких ресурсов. Чтобы свести к минимуму процент отказов, разработчики решили сверстать сайт на основе flat-file CMS. Ниже приводим небольшую справку для всех, кто с айтишной терминологией на вы.

Проекту не подошли бы обычные CMS — WordPress, Drupal, ModX. Они используют базы данных для хранения информации.

Программисты выбрали Grav — систему управления, где все страницы и настройки хранятся в отдельных файлах. Так нагрузка на сеть минимальна, ведь запрос в базы данных не отправляется.

🤗 Для клиента появляются существенные плюсы:

• Экономия времени на ответе сервера;
• Безопасность: когда базы данных нет, из нее нечего украсть;
• Удобство: интерфейс позволяет владельцу сайта легко добавлять контент.

Александр

Программирование

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

При обращении к сайту отдается уже сгенерированная версия: так нагрузка с сервера снимается. Затем настроили кэш, заполнили мета — и получили легкий и быстрый сайт

Добиваемся ТОП-качества и ускоряем загрузку

Говорят, что лучшее — враг хорошего. Но не в нашем случае: хорошего уровня недостаточно для премиум-сегмента.

Все видео из портфолио транслировались напрямую с Youtube. Платформа предлагает автоматическую настройку качества в зависимости от скорости интернет-соединения. Чаще — оставляет максимально возможное разрешение 720p. В первые секунды загрузки видео было едва ли не пиксельным — исправить это было невозможно!

Именно поэтому на некоторых устройствах пользователь мог увидеть такую главную страницу:

😥 А тесты скорости загрузки сайта порой и вовсе расстраивали

В ОАЭ 5G-интернет доступен для всех пользователей — им такая проблема не грозила. Несмотря на это мы решили доработать сайт.

Теперь пора настроить интеграцию с сайтом. Программисты переписали исходный код и добавили новые скрипты. Задали высокое исходное качество, настроили звук и загрузили обложки видеороликов.

Проверяли работу по контрольному чек-листу:

• Медиафайлы не подвисают, загружаются моментально после открытия страницы;

• Видео в отличном качестве проигрываются на любом устройстве и браузере;

• Вложения разворачиваются в полноэкранном режиме по одному клику;

• Фото в разном разрешении идеально встроены в сетку;

• Меню всегда читабельно.

Проверьте и вы!

Сотрудничество с клиентом продолжается и сегодня. Мы ведем работы по техподдержке сайта — о том, что входит в пакет услуг, читайте по ссылке.