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

«Qval Film» — студия видеографии из Дубая. Команда работает в премиум-сегменте: снимает рекламы для ресторанов, брендов и отелей мирового уровня, клипы для российских и зарубежных исполнителей. Среди их клиентов — Swarovski, Four Seasons, Adidas и Chopard. Для презентации работ студии нужен был сайт-портфолио на английском языке.

Перед разработкой сайта мы определили список задач.

Сейчас, после сдачи проекта, мы делаем ежеквартальный аудит сайта. Чтобы удерживать ключевые показатели — конверсионность, позиции в выдаче, трафик — проводим точечные работы по SEO-оптимизации. 

За последние 10 лет в ОАЭ сформировалась конкурентная среда для производителей контента. В нише фото- и видеосъемок сайты в среднем соответствуют одному портрету. 

1. Единое цветовое оформление. Чаще — черное или белое;

2. Акцент на визуале. Минимум текста, более 70% блоков — мультимедийные;

3. Многостраничное портфолио. Структура по принципу «1 страница — одно направление работы»;

4. Видеохостинг. У 91% конкурентов работы транслируются с канала на YouTube. 

Нашей целью было выделить сайт среди сотен одинаковых площадок. Студия могла похвастаться оборудованием, которым пользуются голливудские режиссеры, и «звездными» клиентами. Было важно подчеркнуть эти отличия, чтобы привлечь на сайт только целевую аудиторию. 

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

Мы выделили 3 детали, ставшие визитной карточкой «Qval Film».

1. Эффект кинотеатра.

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

2. Total black.

Тренд давний, но действенный: однотонное цветовое решение всегда смотрится дорого. 

3. Минимализм.

Делаем широкие безрамочные блоки. Пишем белым по черному, выделяем конверсионные кнопки красным.

Вдохновились логотипом студии — графичным треугольником с Q посередине. В дизайне решили сохранить строгие линии, прямые углы, плоские формы. Анимация и движение — только в блоках с фото и видео. Так мы расставили акценты на страницах и направили внимание пользователей в первую очередь на работы студии. 

Мы не забыли про имиджевую историю. Прежде чем заказать коммерческое видео, лейблы и бренды тщательно изучают подрядчика. Сайт должен вызывать доверие и показывать, что за обложкой есть реальные люди. 

Отдельные страницы на сайте позволяют увидеть бэкстейдж, оценить рабочий процесс и познакомиться с командой. Целый блок посвящен техническому оборудованию студии.

Направлений работы у «Qval Film» много:

— рекламные ролики;

— интерьерные съемки;

— фуд-фотография;

— портреты и пейзажные снимки;

— музыкальные клипы;

— корпоративные съемки;

— репортажная фотография.

Для каждого из них на сайтах конкурентов «Qval Film» есть отдельные страницы. Мы же решили не пользоваться стандартным решением и создать только 7 посадочных страниц. 

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

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

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

Итог — Google ранжирует qval.me выше многостраничных сайтов конкурентов.

Одна из особенностей проекта — «тяжелый» контент. Одно видео в оригинальном качестве весит более 5 Гб. Это существенно влияет на скорость загрузки.

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

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

У системы есть существенные плюсы:

— экономия времени на ответе сервера;

— минимальная нагрузка на сеть;

— безопасность: когда базы данных нет, из нее нечего украсть;

— удобство: интерфейс позволяет владельцу сайта легко добавлять контент.

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

Следующий этап — адаптация сайта под требования поисковиков. SEO-оптимизацию мы провели в 4 простых шага.

1. Промониторили ключи конкурентов. Часть слов собрали вручную, а часть вытащили с помощью специального парсера. Оставили релевантные ключи для ниши клиента. 

2. Собрали семантическое ядро. С Google AdWords мы собрали все запросы в единое ядро. В него вошли более 300 ключей — охватили весь спектр услуг клиента. Работали по принципам LSI-семантики, дополняли СЯ смежными ключами, чтобы расширить аудиторию.  

3. Написали емкие и качественные тексты. Никаких полотен на тысячи символов — только короткие абзацы об услугах. В тексты органично вплели слова из mind map и ключи из СЯ.

4. Проработали детальные страницы. Написали мета и добавили alt-теги к изображениям. 

Так мы получили максимум оптимизированного SEO-контента. Каждый текстовый блок содержит нужные смыслы, отвечает требованиям поисковых роботов и посетителей сайта.

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

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

А такие показатели выдавал Pagespeed после проверки:

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

Стандартных способов интеграции с сайтом Vimeo не предлагает. Для этого программисты переписали код и добавили новые скрипты.

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

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

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

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

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

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

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

Студия получила современный, легкий и быстрый сайт. Он выполняет главную функцию — достойно презентует работу команды и конвертирует посетителя в клиента. Раскрывать данные не можем — коммерческая тайна. Но показатель в несколько раз превышает цифры, считающиеся хорошими в нише нашего клиента. 

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

Результатов добились и в SEO.

1. ТОП-5 выдачи Яндекса без дополнительного продвижения;

2. По 83% ключей — в ТОП-3 Google;

3. Ежемесячный рост видимости и трафика.