Как правильно использовать фоновое видео: 24 сайта в пример
Опубликовано: 01.09.2018
Это статья детально описывает все аспекты использования фонового видео на сайте . Как видеоконтент лучше искать и где какой применить? Как скорректировать и эффективно применить фоновое видео (video background). Рассмотрены лучшие практики и правила, дающие шанс избежать ошибок.
Предметная Фотосъемка - Практикум е22
Вот сейчас, куда вы смотрите?
Машинально сфокусировали внимание на видео, правильно? Движущуюся картинку почти невозможно игнорировать. Но с вами все в порядке – на что обращать внимание, решено на подсознательном уровне. Мы легко отвлекаемся на движущиеся объекты, подобно собаке преследующей добычу.
Новинка 2018! Как настроить OBS Studio, сделать первый стрим и начать стримить куда угодно! STRM 004
Ну допустим, притягивает взгляд это нелепое видео с продуктами. А как видео-фон связать с дизайном, спросите вы?
При правильном видеомаркетинге, привлекательный бэкграунд вписывается в оформление страницы. Маркетологи ценят видео за креатив, красоту и ту артистичность, которую статика изображений не в состоянии передать.
Эксперты по конверсии и сайто-владельцы отмечают факт: видеоинформация повышает интерес к офферу и лояльность потребителей (больше регистраций, подписок на услуги / сервисы). Из исследования FoodBloggerPro:
С использованием видео в качестве фона на главной странице, целевая посадочная конверсия возросла на 138%
Надо признать, что увеличение конверта на 138% – это исключительно удачный тест, проводимый мастерами оптимизации. Однако на улучшения в 10% – 20%, вполне можно рассчитывать без помощи профессионалов. И это не гипотетический сценарий влияния видео на продажи.
В видеомаркетинге работают правильные подходы (как и во всем маркетинге). Даже новации способны навредить дизайну и сайту в целом. Далее рассмотрены выигрыши / трудности / особенности видео-решений в бэкграунде.
Как использовать видео для фона сайта – правильные подходы
Часть 1: Когда применять видео-фон на сайте?
Видео в фоне наиболее эффективно, когда:
Есть необходимость сформировать связанную с вашей предметной областью атмосферу Вы хотите задать тон, нацеливаясь на диалог с аудиторией Ваша тематика предполагает положительную эмоциональную реакциюПример #1: Бизнес, Сервисы, Учреждения
Видео в фоне подойдет большинству профессиональных сайтов: сферы бизнеса, консалтинга или дизайн агентствам. Тематичный клип, показ рабочей жизни команды / процесса создания / полезности потребителю – дадут шанс ознакомиться с деятельностью, продуктом или услугой. Клиент, визуально представляя что его ожидает, будет подготовлен к общению с вами.
Поставщик медицинских услуг на главной размещает промо-видео, поясняющее доменный нейминг (Premise Health – предпосылка к укреплению здоровья).
на сайт
В первом экране посетителю показывают занятия йогой / спортом и разговоры с доктором. Так, промо-сайт повышает доверие к оздоровительной программе холдинга
Видео во весь экран оказывает максимальное воздействие на целевую аудиторию дизайн-агентства. Смелое решение – выше линии сгиба не каждый сможет, оправдано заменить тексты видеоконтентом:
на сайт
Посетителю показывают процесс разработки дизайнов для клиентов : взаимодействие команды, совещания по выработке стратегии…
De Republica – австралийская digital студия с видео-продакшн услугами:
на сайт
Похоже, привлекать и позитивно настраивать клиентов, главная задача видеосайта студии. Видеобэкграунды основной элемент в этом стильном черно-белом дизайне . Эффектно затемненное фоновое видео в футере, синхронизировано с видеохедером
Пример #2: Реальные, либо цифровые продукты
Видеобэкграунд также подойдет, если вы реализуете продукцию. Видя как другие пользуются продуктом, человек приобретает визуальный опыт. Демонстрация стиля жизни побуждает обладать подобным – это классика видеомаркетинга. Такая картина способна убедить клиента, не прочитавшего еще ни строчки на вашем сайте!
Сайт продает музыкальное приложение для фитнеса:
на сайт
Видеобэкграунд отлично презентует софт Fit Radio – наглядно показано как полезное сочетается с приятным (пример с физической продукцией dontabak.ru )
В полноэкранном формате имеет смысл демонстрировать достоинства решений для сферы спорта, туризма ( curadmir.com , alabama.travel ).
Пример #3: Позитивный опыт (мероприятия, туры, гостеприимство)
Фоновое видео способно передать: приключенческий дух / ощущение приятного оживления / общего порыва. Почему бы не использовать видео организаторам праздников, приемов, в тур. / гостиничном бизнесе с B&B (размещение + кейтеринг) и сферах деятельности, где присутствует пункт назначения.
Сайт продвигает тур-бизнес на калифорнийском побережье:
на сайт
Интро задает сюжетную линию – низкий полет над красивыми пейзажами с эпизодами отдыха / единения с природой. Напоминает «Алису в стране чудес». Выберите тип отдыха и заряжайтесь видео-позитивом далее…
Пример #4: Разнообразные заведения (рестораны, гостиницы, музеи, магазины)
Vandal это ресторан в Нью-Йорке:
на сайт
В фоновом видео показан шикарный интерьер-дизайн заведения, соблазняющий потенциального клиента его посетить
Хотя это лишь видеобэкграунд шаблона от Wix, само видео сделано очень качественно:
на сайт
Шеф повар оформляет блюда, раскладывая кусочки еды по тарелкам. Наблюдая за процессом, хочется их проглотить (особенно когда не обедал)! Это видео очень эффективно работает
Пример #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 позволяет справиться с задачей. Помните, что видео не обязательно должно быть идеальным? Особенно, созданное под затемнение / осветление или тонирование цветом. Еще варианты:
Заказать у фрилансеров Стоковые видеоролики различной тематики (платные и бесплатные). Они вполне подходят для создания на сайте специфичной атмосферыЧасто платное и бесплатное стоковое видео различается лишь по техническому качеству и возможностям выбора (полезны оба источника):
VideoHive : доступные цены: от $5 до $35. Хорошие шансы найти то, что нужно Free Video Sources : Ресурсы с бесплатными видео: 25 сайтов-источников видеоконтента для сайта бесплатно. Отличный вариант для стартаНесколько красивых примеров видео на фоне
Сайт студии производства видеоматериалов эффектным клипом захватывает внимание посетителей:
на сайт
В стиле моушн: пример креативной видеосъемки и наложения эффектов
Разработчик медиа-контента Tongal производит рекламные ролики и видео для брендов:
на сайт
Видеопиар & яркий Flat. Использована видеография с наложением кратких промо-заголовков из текстового слайдшоу. Смелое сочетание сочных цветов – такие пары цветовых комбинаций подбирались скоморохам. Мультяшные шрифты очень кстати
Продающий сайт (мультибренд) на главной применяет фонового видео с видеографией:
на сайт
Утонченный, элегантно оформленный HTML5 сайт с необычной навигацией , интерактивом и прекрасными видео-бэкграундами
Креативный сайт цифрового агентства из Бельгии применяет плоское видео в фоне:
на сайт
Для сайта и ранее использовался плоский стиль, но после редизайна клиентов решили привлечь главным экраном с привлекательным продающим Flat видео
В завершение
Во всей массе медиа-информации (да и всего контента) главенствует видео – показывая свою эффективность в самых различных нишах интернет рынка. Результаты успешных видео-маркетинговых стратегий впечатляют! Эмоциональный видеоролик – это также отличный способ поразить клиентов. Поскольку реакция разных людей на различный видеоконтент отличается, необходимо тестировать. Проверьте на своей аудитории несколько вариантов и такой тоже: фоновое видео Vs. обычное изображение для бэкграунда сайта. Но при правильных подходах, от воспроизводимого в фоне видео можно получить немало преимуществ перед конкурентами.