14 июня, 16:57
1 457
2

Видеофон для сайта: инструкция по применению

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

Из статьи вы узнаете:

  • какие задачи решают фоновые видео;
  • когда видео в качестве фона не стоит использовать;
  • где взять видеоролики для фона;
  • каких ошибок стоит избегать при интеграции видео на сайт.

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

Если допустить ошибки при встраивании, фоновое видео может привести к проблемам: замедлить загрузку и прокрутку страницы, отвлекать пользователей от основного контента и даже вызывать у них неприятные ощущения (например, если картинка слишком динамичная).

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

Какие задачи решают фоновые видеоролики?

Фоновые видео эффективны, если вы хотите:

а) создать определенную атмосферу;

б) вызвать эмоции у посетителей;

в) наглядно продемонстрировать продукт или услугу.

Рассмотрим, как это реализуется на практике.

Пример 1. Атмосфера

Американское дизайн-агентство Grain and Mortar разместило на главной странице видео с зарисовками из повседневной жизни компании. Показан офис, рабочие моменты и отдых после работы, и сразу ощущается дружественная и креативная атмосфера:

Видеофон для сайта: инструкция по применению

Интересного эффекта добился с помощью видео калифорнийский дизайнер Fernando J. Maclen — он встроил размытое видео, на котором едва различим процесс его работы. Выглядит это стильно, и создается творческая атмосфера:

Видеофон для сайта: инструкция по применению

Пример 2. Эмоции

Британская клининговая компания Eagleclean использовала забавный прием: когда пользователь листает лендинг, появляется едва заметное пятно, которое «с той стороны экрана» начинает протирать сотрудник компании. Такое видео не несет какой-то смысловой нагрузки, а просто вызывает улыбку. Радостная эмоция повышает шансы на позитивное восприятие бренда:

Видеофон для сайта: инструкция по применению

Пример 3. Демонстрация

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

Видеофон для сайта: инструкция по применению

Когда видео в качестве фона неуместны?

Видеофон не всегда эффективен. Например, он мешает, если вы хотите, чтобы аудитория сосредоточилась на конкретном контенте. Дело в том, что видео перетягивает на себя слишком много внимания, и оно может попросту отвлекать. Вот почему видеофон, как правило, не подходит, если у вас сложный сервис или продукт, который требует подробного объяснения.

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

А вот если разместить фоновое видео на промостранице конкретного товара, то это другое дело — пользователь «с порога» будет понимать, что ему предлагают, и увидит продукт в действии.

Запомните: фоновое видео должно быть уместным и улучшать пользовательский опыт. Если оно мешает — лучше откажитесь от него!

Откуда брать фоновые видеоролики?

Лучше всего, когда видео сделано на заказ или лично вами. Не стоит переживать по поводу качества картинки — особенно если вы будете накладывать фильтры. Зачастую достаточно снять ролик на смартфон и смонтировать его в бесплатном редакторе.

Если по какой-то причине у вас нет возможности создавать собственные видео, используйте бесплатные или платные стоковые ролики. Они вполне подойдут для создания определенной атмосферы.

Вот некоторые бесплатные стоки:

  • wedistill.io (10 HD видео каждые 10 дней);
  • videos.pexels.com (огромная база бесплатных роликов);
  • ignitemotion.com (ресурс специализируется именно на бесплатных фоновых видео);
  • pixabay.com (есть русский язык);
  • free-hd-footage.com (есть 4К и 3D видео);
  • coverr.co (7 новых видео для главной страницы сайта каждый понедельник).

Среди платных стоков популярны такие:

  • videohive.net (от 10-20$ за ролик);
  • shutterstock.com‎ (от 49$ за ролик);
  • istockphoto.com (от 40-50$ за ролик).

Интеграция видео в качестве фона сайта: полезные советы

Наверняка вы хотите, чтобы фоновые видео работали в плюс. Вот несколько советов, которые помогут получить от них выгоду.

1. Используйте релевантные ролики

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

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

2. Убедитесь, что видеоряд не мешает просмотру контента

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

Видеофон для сайта: инструкция по применению

Добиться читабельности можно несколькими способами:

1. Контрастный цвет контента. Например, если у вас более темное видео, используйте светлый логотип, кнопку и текст. Если же у вас светлое видео, используйте красочные или более темные цвета в контенте. Эта техника поможет создать контраст без дополнительных эффектов вроде локальных рамок и фильтров.

Видеофон для сайта: инструкция по применениюФрагмент видеофона с сайта fitradio.com

2. Затемнение / осветление. Если вы используете яркий видеоролик с большим количеством деталей, он наверняка ухудшит читабельность контента, даже если вы используете правильный контрастный цвет. В этом случае «накройте» видео темным или светлым слоем. Это сделает его темнее или светлее и смягчит любые детали, которые затрудняют чтение.

Видеофон для сайта: инструкция по применениюФрагмент затемненного видеофона с сайта isl.co

3. Используйте цветные слои. Они обеспечивают аналогичный эффект, как и темные и светлые слои, с той лишь разницей, что открывают более широкие возможности для брендинга сайта (если в качестве цвета слоя выбран корпоративный цвет).

Видеофон для сайта: инструкция по применениюФрагмент «цветного» видеофона (тема для сайта Ricca)

3. Используйте короткие сжатые ролики

Если видеофайл имеет большой размер, потребуется время для его загрузки. Кроме того, увеличится потребление трафика (что особенно важно, если пользователи заходят на сайт с мобильного).

Для ускорения загрузки:

  • используйте короткий ролик (5-10 секунд вполне достаточно) с функцией зацикливания — в этом случае видеоряд будет непрерывным;
  • сожмите видео, чтобы его размер не превышал 6 Мб (протестируйте качество картинки при различных значениях битрейта, разрешения и количества кадров в секунду, и выберите оптимальный вариант).

4. Размещайте видео без звука

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

5. Не показывайте элементы управления видеопотоком

Не стоит добавлять полосу прокрутки, кнопки «Play», «Pause» и «Stop». Вы используете видео в качестве фона, и эти элементы будут сбивать с толку. Если вы хотите донести какую-то важную информацию с помощью видео, добавьте на сайт полноценный проигрыватель, а фон пусть остается фоном.

6. Избегайте чрезмерной динамики

Ключевым в «фоновом видео» является «фон». И важно убедиться, что ролик не перетягивает на себя все внимание. Фоновые видео должны быть спокойными, плавными, чтобы не отвлекать пользователей от того, что они действительно должны сделать на сайте. Избегайте дрожания камеры, многократного и быстрого изменения ракурса, контрастных сцен.

Заключение

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

Также хорошо работает реклама на тематических YouTube-каналах у блогеров. На рекламной платформе Webartex она стоит она от 300-500 рублей за 30-60-секундный ролик и позволяет быстро привлечь внимание аудитории и повысить узнаваемость бренда.

Профессиональный инструмент
для создания продающих виджетов
Вы выбираете площадки для рекламы
Повышение продаж с
сайта в 2 клика