logo RocketBusiness

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

Видео-продакшн в Дубае

РазработкаТехподдержкаКорпоративный сайт

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

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

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

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

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

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

Инструменты и технологии

HTML5
HTML5HTML5
SCSS
SCSSSCSS
JavaScript
JavaScriptJavaScript
Gulp
GulpGulp
Git
GitGit
Grav
GravGrav

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

Roman
Андрей Ковалев

CEO QVAL Film

Взлет

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

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

ЭФФЕКТ КИНОТЕАТРА

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

TOTAL BLACK

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

ЛАКОНИЧНАЯ СТРУКТУРА

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

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

Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого
Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого
Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого
Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Клиента нужно брать визуалом
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео
Мы создали 6 функциональных разделов: минимум текста, максимум графики и динамичных видео

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

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

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

Flat File CMS — решение для компактных сайтов

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

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

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

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

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

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

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

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

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

Для того, чтобы ролики отображались в 4k, нужно было поменять видеохостинг. Все портфолио перенесли на Vimeo — он требовал платного доступа, но предлагал больше возможностей.

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

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

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

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

video prev

Любуемся результатами

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

Сайт даже не нуждается в комплексном SEO-продвижении: он стабильно попадает в ТОП-5 выдачи по ключевым запросам на русском и английском.

Теперь главная страница встречает посетителей идеальным качеством, а скорость загрузки приятно удивляет
Теперь главная страница встречает посетителей идеальным качеством, а скорость загрузки приятно удивляет
Сайт стабильно попадает в ТОП-5 выдачи по ключевым запросам на русском и английском
Сайт стабильно попадает в ТОП-5 выдачи по ключевым запросам на русском и английском

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

Делаем беспроигрышные предложения
давайте обсудим