Как правильно использовать фоновое видео: 24 сайта в пример

Это статья детально описывает все аспекты использования фонового видео на сайте. Как видеоконтент лучше искать и где какой применить? Как скорректировать и эффективно применить фоновое видео (video background). Рассмотрены лучшие практики и правила, дающие шанс избежать ошибок.

Вот сейчас, куда вы смотрите?

Машинально сфокусировали внимание на видео, правильно? Движущуюся картинку почти невозможно игнорировать. Но с вами все в порядке – на что обращать внимание, решено на подсознательном уровне. Мы легко отвлекаемся на движущиеся объекты, подобно собаке преследующей добычу.

Ну допустим, притягивает взгляд это нелепое видео с продуктами. А как видео-фон связать с дизайном, спросите вы?

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

Эксперты по конверсии и сайто-владельцы отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги / сервисы). Из исследования FoodBloggerPro:

С использованием видео в качестве фона на главной странице, целевая посадочная конверсия возросла на 138%

Надо признать, что увеличение конверта на 138% – это исключительно удачный тест, проводимый мастерами оптимизации. Однако на улучшения в 10% – 20%, вполне можно рассчитывать без помощи профессионалов. И это не гипотетический сценарий влияния видео на продажи.

В видеомаркетинге работают правильные подходы (как и во всем маркетинге). Даже новации способны навредить дизайну и сайту в целом. Далее рассмотрены выигрыши / трудности / особенности видео-решений в бэкграунде.

Как использовать видео для фона сайта – правильные подходы

Часть 1: Когда применять видео-фон на сайте?

Видео в фоне наиболее эффективно, когда:

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

Пример #1: Бизнес, Сервисы, Учреждения

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

Поставщик медицинских услуг на главной размещает промо-видео, поясняющее доменный нейминг (Premise Health – предпосылка к укреплению здоровья).

на сайт

В первом экране посетителю показывают занятия йогой / спортом и разговоры с доктором. Так, промо-сайт повышает доверие к оздоровительной программе холдинга

Видео во весь экран оказывает максимальное воздействие на целевую аудиторию дизайн-агентства. Смелое решение – выше линии сгиба не каждый сможет, оправдано заменить тексты видеоконтентом:

на сайт

Посетителю показывают процесс разработки дизайнов для клиентов: взаимодействие команды, совещания по выработке стратегии…

De Republica – австралийская digital студия с видео-продакшн услугами:

на сайт

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

Пример #2: Реальные, либо цифровые продукты

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

Сайт продает музыкальное приложение для фитнеса:

на сайт

Видеобэкграунд отлично презентует софт Fit Radio – наглядно показано как полезное сочетается с приятным (пример с физической продукцией dontabak.ru)

В полноэкранном формате имеет смысл демонстрировать достоинства решений для сферы спорта, туризма (curadmir.com, alabama.travel).

Пример #3: Позитивный опыт (мероприятия, туры, гостеприимство)

Фоновое видео способно передать: приключенческий дух / ощущение приятного оживления / общего порыва. Почему бы не использовать видео организаторам праздников, приемов, в тур. / гостиничном бизнесе с B&B (размещение + кейтеринг) и сферах деятельности, где присутствует пункт назначения.

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

на сайт

Интро задает сюжетную линию – низкий полет над красивыми пейзажами с эпизодами отдыха / единения с природой. Напоминает «Алису в стране чудес». Выберите тип отдыха и заряжайтесь видео-позитивом далее…

Пример #4: Разнообразные заведения (рестораны, гостиницы, музеи, магазины)

Vandal это ресторан в Нью-Йорке:

на сайт

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

Хотя это лишь видеобэкграунд шаблона от Wix, само видео сделано очень качественно:

на сайт

Шеф повар оформляет блюда, раскладывая кусочки еды по тарелкам. Наблюдая за процессом, хочется их проглотить (особенно когда не обедал)!  Это видео очень эффективно работает

Читайте также:  40+ лучших дизайнов сайтов о еде и кулинарии

Пример #4: Видео-сторителлинг (покажите краткую историю, заставляющую улыбнуться)

Задача сторителлинга в видео: заинтересовать историей с «живыми» героями, вызвав симпатию у целевой аудитории. Зажигательная история с эпатажным героем нашего времени, вот что берет за душу и запоминается. «Расскажите» веселую / трогательную / не лишенную обаяния историю (прием, применяют крупные бренды).

Креативно-рекламное агентство специализируется на создании визуального контента:

на сайт

Видеосторителлинг в интро на главной: оригинально поданная история «удачно проведенного дня» с запоминающимся персонажем

Все это лишь малая часть потенциальных возможностей видео в качестве фона сайта. Еще применение:

• СПА салоны – можно создать атмосферу роскоши, безмятежности и релаксации сняв клип с лицами счастливых клиентов в эпизодах
• Отели / B&B / сдача внаем на каникулы и отпуска – покажите апартаменты для отдыха со всеми удобствами, близлежащие сервис-услуги, делая акцент на воодушевлении и страсти к приключениям
• Бизнес / Продукция – можно усилить бренд, выразив в видео-фоне сущность продукта. Реализуя спорт-товары, показать процесс занятий с ними – это вдохновит желающих так проводить время / получить подобные результаты. Продолжите список сами…
• Landing page (лэндинг пейдж) – фоновое видео будет способствовать получению мотивированного трафика на страницу захвата

Важно: не выбирайте видео-бэкграунд, лишь по критериям красоты видеофрагментов. Он должен быть релевантным сайту и бизнесу в целом. Конечно, приятное видео сделает сайт для кого-то интереснее. Правильно же подобранное (для вашей сферы / бизнес-продукта) – станет мощным маркетинговым и брендинг инструментом. Теперь можно посмотреть на свой сайт, представив как воплотить фоновое видео, чтобы вывести дизайн и брендинг на новый уровень.

Часть 2: Когда НЕ следует использовать видео-бэкграунд на своем сайте?                

Даже интересная видео-презентация, где все по делу, может оказаться ошибочным решением. Например, на странице требуется сфокусировать внимание публики на чем-то очень специфичном. Тогда слишком «агрессивное» видео в фоне будет перетягивать на себя внимание.

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

Проведите UX-анализ сайта и своего бизнеса и не преследуйте цель, не улучшающую опыт пользователей.

Часть 3: Пять золотых правил для фоновых видео

Различный видеоматериал работает хорошо на разных сайтах, когда он применяется правильно. Это скорее советы, чем окончательные рекомендации по всем аспектам видео-маркетинга. Их стоит придерживаться, чтобы избежать часто совершаемых ошибок.

Правило #1: Используйте видео фоны с определенной целью

Нацеленное на достижение результата видео-решение, должно укрепить бренд или идею сайта. Например, бухгалтеру не стоит демонстрировать пейзажи швейцарских Альп. При всей красоте, они не имеют отношения ни к нему, ни к финансовой отрасли. Неуместная картина сбивает с толку – что тут предлагают: «Походное снаряжение?», а может «Спец. программу отпуска в Швейцарии?».

Эффективный видео-бэкграунд тот, что дополняет миссию главной страницы и сайта

Отечественный пример продающего фонового видео на весь экран – главная страница сайта ресторана:

на сайт

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

Развлекательная  компания оформила главную в стиле материального дизайна с несколькими видео в фоне:

на сайт

Подмигивающий логотип и сменяющиеся по секциям тематичные видео с тонировкой разными цветами и полупрозрачный контентный блок с забавными рисунками / CTA-элементами

Правило #2: Возможности видеоискусства велики, но не позволяйте фону затмить все

Фоновая видеопрезентация бизнеса не должна ухудшить заметность контента поверх, что будет признаком плохого UI/UX. Позаботьтесь о необходимом контрасте, читабельности призывов и различимости навигационных элементов.

Как достичь нужного эффекта?

Вариант первый: подобрать контрастный цвет для контента

Убедитесь в достаточной контрастности текста / кнопок / иконок. Белый логотип и типографика будут чаще замечаться на темном видео, цвет поможет при светлом бэкграунде, не позволив фону сливаться с контентом. Контурные элементы дают отличный контраст (пример buddhatobuddha.com).

Вариант второй: осветлить или затемнить видеоматериал 

Тексты поверх энергичного видео со множеством деталей затруднительно читать (даже при хорошем контрасте). Так и хочется уменьшить цветовую насыщенность. Немного смягчить картинку поможет осветление / затемнение видео-фона оригинала.

Пример затемнения — union.co

Пример осветления — cobblehilldigital.com

Вариант третий: цветокоррекция с тонированием в контрастные цвета  

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

на сайт

Вариант четвертый: наложение текстуры на оригинальное видео и др. эффекты

Наложение эффектов широко применяется в видеорекламе. Фоновое видео можно сделать таким же эффектным и эффективным. Мощные инструменты для видеомонтажа и обработки видео тут.

Российская студия производства фильмов:

на сайт

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

Правило #3: Создайте короткий закольцованный ролик (бесконечное видео)

Главная забота использующего видео-форматы — скорость открытия веб-страницы. Но посетитель и не ожидает увидеть «кинокартину». Видео для фона сайта правильнее будет сделать привлекательным сниппетом, «выдержкой» из вашего видеоматериала. Вывод один: чтобы не понизили в ранжировании, уменьшать вес видеофайла. Зациклите видео, создав иллюзию непрерывного показа своего тематичного клипа.

В идеале, длительность фонового ролика 5-10 сек., при размере в 6MB и менее… как у Bukwild:

на сайт

Быстрая загрузка страниц сайта с видео-фонами разной длительности (до 20-30 сек.)

Вариант с черно-белым видеобэкграундом:

на сайт

Градации серого цвета уменьшили вес видеофайла для фона главной страницы

Видеомонтажные сервисы и программы-видеоредакторы помогут с творческой обработкой вашего материала

Создать микс, закольцевать видеоролик можно по разумным ценам и бесплатно: fiverr.com, coub.com, movavi.ru.

Правило #4: Уберите звук 

Автозапуск видео со звуком при загрузке относят к особо раздражающим факторам. Удалите звук из видеозаписи на Fiverr.com. Или приглушите. Хуже всего звучание взрывного характера, как у брендингового агентства gooqx.com (включение музыки с задержкой, прокрутка плавно отключает звучание – выглядит как поощрение просмотра портфолио). Обычно озвучка вообще неуместна, если только это не специфичный проект как bushrenz.com (тут спасает опция – выключить).

на сайт

Полная версия видеоролика озвучена, но запускается по желанию пользователя

Правило #5: Воспроизводите видео фоном (без управления)

Тут не нужны элементы управления (видео-фон не Media Player). Но порой их прикручивают к хедеру или бэкграунду. Видео-инструкции / обучающие видео вообще не уместны в фоне. Однако видеопрезентации услуг с исчерпывающей информацией / ролики с подробным описанием продукта обладают вирусным потенциалом при более глубокой эмоциональной связи с аудиторией.

Вопрос решается парой кнопок, переключающих на другой видеоформат:

на сайт

В создании клипа использовалась ускоренная / замедленная съемка

Еще пример с крутыми видеороликами на страницах видео-сайта:

на сайт

Медиаконтент доминирует на всех страницах. Контрастная контурная кнопка на главной с эффектной Hover заливкой (запускает ролик с управлением и звуком)

Где брать видео фоны для сайта

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

Лучше всего индивидуальные решения. В наше время даже iPhone позволяет справиться с задачей. Помните, что видео не обязательно должно быть идеальным? Особенно, созданное под затемнение / осветление или тонирование цветом. Еще варианты:

1. Заказать у фрилансеров
2. Стоковые видеоролики различной тематики (платные и бесплатные). Они вполне подходят для создания на сайте специфичной атмосферы

Часто платное и бесплатное стоковое видео различается лишь по техническому качеству и возможностям выбора (полезны оба источника):

• VideoHive: доступные цены: от $5 до $35. Хорошие шансы найти то, что нужно
• Free Video Sources: Ресурсы с бесплатными видео: 25 сайтов-источников видеоконтента для сайта бесплатно. Отличный вариант для старта

Несколько красивых примеров видео на фоне

Сайт студии производства видеоматериалов эффектным клипом захватывает внимание посетителей:

на сайт

В стиле моушн: пример креативной видеосъемки и наложения эффектов

Разработчик медиа-контента Tongal производит рекламные ролики и видео для брендов:

на сайт

Видеопиар & яркий Flat. Использована видеография с наложением кратких промо-заголовков из текстового слайдшоу. Смелое сочетание сочных цветов – такие пары цветовых комбинаций подбирались скоморохам. Мультяшные шрифты очень кстати

Продающий сайт (мультибренд) для фонового видео на главную страницу применяет видеографию:

на сайт

Утонченный, элегантно оформленный HTML5 сайт с необычной навигацией, интерактивом и прекрасными видеобэкграундами

Креативный сайт бельгийского цифрового агентства с плоским видео в фоне

на сайт

Для сайта и ранее использовался плоский стиль, но после редизайна клиентов решили привлечь главным экраном с привлекательным продающим Flat видео

В завершение

Во всей массе медиа-информации (да и всего контента) главенствует видео – показывая свою эффективность в самых различных нишах интернет рынка. Результаты успешных видео-маркетинговых стратегий впечатляют! Эмоциональный видеоролик – это также отличный способ поразить клиентов. Поскольку реакция разных людей на различный видеоконтент отличается, необходимо тестировать. Проверьте на своей аудитории несколько вариантов и такой тоже: фоновое видео Vs. обычное изображение для бэкграунда сайта. Но при правильных подходах, от воспроизводимого в фоне видео можно получить немало преимуществ перед конкурентами.