Разработка сайта для премиум-студии видеографии из Дубая
ЗаказчикQval Film — студия видеографии из ДубаяЗадачаКоманда Qval Film пришла за качественным сайтом-портфолио на английском языке. А значит, требовалось высокое качество видео и моментальная загрузка контента.
Мы решили сразу — будем добиваться вау-эффекта. Сайт должен впечатлять, но, при этом, оставаться информативным.
Далее — определили список задач:
провести анализ конкурентов в нише коммерческих фото- и видеосъемок;
создать дизайн, отвечающий стандартам ЦА студии;
выбрать гибкую CMS, учитывая наполнение сайта — видео и фото в качестве 4К;
создать лаконичную структуру и оптимизировать страницы по стандартам SEO;
подключить трансляцию видео в блоках и баннерах сайта с видеохостинга;
добиться высокой скорости загрузки сайта.
Аудит конкурентов
Мы провели исследование ниши. Сейчас в ОАЭ уже сформировалась конкурентная среда в области видеопродакшена.»Психологический портрет» конкурентов, в целом, схож:
акцент на черных и белых цветах;
доминанта визуала;
одна страница — для одного направления работ;
YouTube как главный видеохостинг (использует 91% конкурентов).
Что мы имеем?
Аудит конкурентов показал как выглядит среднестатистический сайт в нише. На основании полученных данных мы решили проанализировать сайт QVAL Film.
Выявили сильные стороны:
объемное портфолио;
калькулятор цен;
многостраничность;
наличие прайса.
И слабые:
устаревший дизайн;
сложная структура;
долгая загрузка страниц;
отображение шапок видео в плохом качестве — 360р или 240р;
нехватка конверсионных кнопок;
громоздкая форма заявки.
Работа с дизайном
Перед началом разработки мы определили ключевые принципы, которых хотим добиться: эффект кинотеатра, total black и минимализм. О каждом подробнее.
Эффект кинотеатра поможет создать первое впечатление для посетителей такого сайта. Оно же определяющее. Уровень работ должен быть понятен сразу, иначе до изучения других страниц дело может и не дойти. В конце концов — как доверять видеопродакшену с низкокачественным контентом в 360p? Мы решили, что на главной должен быть широкоэкранный видео-баннер в разрешении 4K — это современный стандарт качества.
Total black — не новый тренд. Но, кажется, актуальный всегда. На сайте мало внимания уделяется ценам. Но уже с первых минут клиент должен готовиться к премиум-уровню и аналогичным размерам чека. Здесь нам и помогает однотонное оформление — оно всегда смотрится актуально и дорого.
Минимализм — это антипод вычурности и ? кричащей роскоши?. Сайт должен быть дорогим, а не имитировать престиж. Решили делать широкие безрамочные блоки, писать белым по черному, выделять конверсионные кнопки красным.
Отталкивались от логотипа — графичного треугольника с буквой »? Q» в середине. ? Поэтому у нас получилось много строгих линий и прямых углов. Анимаций минимум — только для блоков с медиаконтентом. Много статики — это возможность управлять вниманием пользователей. Поэтому нам будет легко расставлять акценты на нужные страницы. В нашем случае — по максимуму показывать работы студии.
Разработка структуры
У конкурентов простое правило — одна услуга на одну страницу. Это вполне логичное решение, если направлений деятельности немного. В нашем случае обратная ситуация. Уместить всю информацию о направлениях деятельности компании — довольно сложно.
Обычно клиенты таких компаний выбирают подрядчиков не за один день. Сайт должен впечатлять, но решение принимать спонтанно все равно не будут. Значит — нужно дать пользователю возможность с комфортом изучить портфолио. И главное — не перегружать лишней информацией.
Мы решили, что лаконичность и удобство нам важнее, чем обилие страниц. На сайте будет только 7 лендингов. Так пользователям удобнее ознакомиться со всем портфолио без открытия дополнительных вкладок.
Верстка
Главная сложность проекта — в »? тяжелом» контенте. Одно видео в оригинальном качестве — более 5 Гб. ? Конечно, от этого страдает скорость загрузки. Это, в конечном итоге, влияет не только на дискомфорт пользователя, но и на плохую индексацию в поисковиках.
Наши программисты использовали Grav — в отличие от других CMS он хранит все страницы в отдельных файлах. А еще — снизили нагрузку на сервер с помощью настройки сборщика проектов.
SEO-оптимизация
Чтобы получить оптимизированный контент, мы составили план из 4 шагов:
Мониторинг ключей конкурентов. Собирали вручную и с помощью парсера. Оставили только релевантные ключи.
Сбор семантического ядра. Все запросы из Google AdWords собрали в одно ядро. Работали с LSI-семантикой и дополняли СЯ смежными ключами.
Написание текстов. Только короткие и емкие тексты об услугах. Сюда же добавили слова из mind map и ключи.
Проработка детальных страниц. Написали мета и добавили alt-теги к изображениям.
Ускорение загрузки
YouTube — стандартное решение для трансляции видео на сайте. Даже в нише видеопродакшена. Так у большинства конкурентов, так же было и в первой версии сайта. Платформа автоматически выбирает качество видео в зависимости от скорости соединения. Часто останавливается на 720p. А первые секунды проигрывания — настоящая боль. 4K контент может превращаться в пиксельное месиво. Для нашего клиента — абсолютно неприемлемо.
Оставить YouTube и решить проблему — невозможно. Поэтому мы решили переходить на Vimeo. Из минусов — платный доступ. Из плюсов — больше возможностей. Конечно, здесь есть 4K. Кроме того — можно выбрать обложку и добавить кнопку полноэкранного режима.
Программисты переписали код и добавили новые скрипты — иначе интегрировать Vimeo на сайт не получалось.
Теперь разберемся, что нам дал Vimeo:
контент грузится мгновенно;
видео в нативном 4K на любом устройстве;
вложения открываются на полный экран.
Результаты
Сайт для QVAL Film получился современным, легким и быстрым. Со своей главной задачей справляется отлично — информативно и удобно презентует портфолио команды. Конечно, это отразилось и на количестве заявок. Показатель в несколько раз выше, чем »? хорошие» у конкурентов. ? Но это, как водится, коммерческая тайна.
Не можем оставить без внимания и SEO-успехи:
1. ТОП-5 выдачи Яндекса без дополнительного продвижения;
2. По 83% ключей — в ТОП-3 Google;
3. Ежемесячный рост видимости и трафика.
Сайт скажет лучше, чем текст. Заходите и оценивайте!
Перейти на сайт
Полный текст статьи читайте на CMS Magazine
