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

Swarovski, Adidas и Chopard — лишь немногие из тех, для кого студия Qval создавала незабываемый визуальный экспириенс. Наша цель — конечно же, вау-эффект, и в этом кейсе мы расскажем, как команда Rocket Business его добилась.

Команда уже более 12 лет работает в премиум-сегмента, и дизайн должен отражать позиционирование студии. Сайт должен смотреться дорого и премиально.

Подготовка и анализ

Работу над проектом мы начали с аналитической работы. Студия работает в ОАЭ, и для работы нам необходимо было понять, как функционирует ниша производства визуального контента в Дубае. Мы изучили конкурентную среду клиента и составили усредненный портрет студии-конкурента.

1. Единая цветовая гамма, чаще всего — контраст черного и белого.
2. Минимум текста — максимум визуала.
3. Более половины блоков — мультимедиа. Работы транслируются с видеохостинга, более чем в 90% случаев это YouTube.

Наша цель — не следовать за конкурентами, а выгодно выделяться на их фоне. Для этого следовало выделить преимущества — итак, чем может похвастаться студия?

1. Высококлассное оборудования.
2. Голливудский уровень съемок.
3. Знаменитые клиенты.

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

Дизайн

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

При его разработке мы опирались на три концепции:

1. Эффект кинотеатра. Первый блок, который видят посетители при посещении сайта, представляет собой широкоэкранный видеобаннер. Баннер демонстрирует презентацию из работ студии в качестве 4к.
2. Total black и безрамочные блоки. Это не новый тренд, но классическое решение. Однотонный сайт смотрится просто, но стильно. Мы использовали контрастный текст и яркие конверсионные кнопки.
3. Лаконичная структура. Все, что мы хотели показать, размещено в 6 функциональных блоках. Минимум текста — максимум видеоконтента.

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

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

Структура

Студия "Qval Film"работает в нескольких направлениях — это съемка рекламных роликов и музыкальных клипов, корпоративные и интерьерные съемки, фуд-фотография и репортажные фотосъемки. Мы решили не создавать отдельную страницу для каждого направления — это стандартное и не слишком удобное решение. Оставили 7 посадочных страниц, включая раздел с работами студии.

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

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

Верстка

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

Наши разработчики приняли решение верстать сайт на flat-file CMS. Обычные CMS, такие как WordPress, Drupal или ModX, проекту не подходят — в их работе используются базы данных для хранения информации. Мы выбрали Grav — систему управления, где все страницы и настройки хранятся в отдельных файлах. Она создает минимальную нагрузку на сеть, поскольку не отправляет запрос в базы данных.

Среди плюсов такого решения:

1. экономия времени — ее получилось достичь за счет отсутствия необходимости дожидаться ответ сервера;
2. безопасность данных: нет базы — нечего и красть;
3. удобство — владелец сайта может без труда размещать контент.

У нас получилось добиться хорошего уровня загрузки сайта. Но для премиум-сегмента простого «хорошо‎» недостаточно. Сайту требовалась доработка.

Мы обратили внимание на видео — они транслировались на сайт напрямую с Youtube. Эта платформа автоматически настраивает качество видео в зависимости от скорости соединения, но на это требуется некоторое время. Проблем с интернет-соединением в ОАЭ нет — каждому пользователю доступен 5G-Интернет. Но несмотря на это, первые несколько секунд видео имеет низкое качество — оно просто разбивается на пиксели! Для сайта-визитки это недопустимо — он должен демонстрировать контент в лучшем виде «‎с порога». ‎Мы сравнили популярные видеохостинги и предложили платный Vimeo — теперь портфолио компании размещено на нем.

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

Для проверки эффективности принятых мер мы использовали чек-лист из 5 вопросов.

1. Достаточно ли быстро загружаются медиафайлы? Да, они загружаются сразу после открытия страницы и не подвисают.
2. Корректно ли работают вложения? Да, достаточно одного клика — и они разворачиваются в полноэкранном режиме.
3. Хорошо ли смотрятся фото? Да, они идеально встроены в сетку несмотря на разное разрешение.
4. Удобно ли работать с меню? Да, оно всегда остается читабельным.
5. Как работает видео на разных устройствах? Отлично, загружается и проигрывается в высоком качестве на любом устройстве и в любом браузере.

Приглашаем и вас проверить работу сайта!

Продвижение

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

1. Мониторинг конкурентов. Мы подсмотрели, как работают и продвигаются другие компании этой ниши. Часть ключей собрали с помощью специального парсера, оставшиеся вытащили вручную. Отсеяли лишнее, оставили только релевантные для нашего проекта и его ниши.
2. Сбор семантического ядра. В работе использовали Google AdWords. Нам удалось охватить весь спектр услуг студии — получилось более 300 ключей. Работали по принципам LSI-семантики, дополняли СЯ смежными ключами, чтобы расширить аудиторию.
3. Написание текстов. Никаких полотен текста, никакой воды — только короткие, емкие и полезные текстовые блоки. Органично вплели слова из mind map и ключи из СЯ.
4. Проработка детальных страниц. Написали мета и добавили alt-теги к изображениям.

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

Результат

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

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