Ср, 30/12/15 – 4:56 | 8 комментариев

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

Читать статью »
CSS верстка

О красивом оформлении страниц с css3 и html5

Дизайн

О создании веб-дизайна с примерами сайтов

Wordpress

Самое современное для сайта на Wordpress

Шаблоны сайтов

Обзоры шаблонов: лучшие темы для сайта

Свой сайт

Как создать, оформить, сделать сайт лучше

Главная » Свой сайт

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

31 мая 2017 2 комментария

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 Фоновое видео на медицинском сайте Premise Health

на сайт

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


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

На главном экране: фоновое видео & креативная типографика слогана студии

на сайт

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


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

Привлекательное фоновое видео на сайте видеопродакшн студии

на сайт

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


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

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

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

Пример фонового видео презентующего продукт - сайт Fit Radio

на сайт

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


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

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

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

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

Главная страница с красивым видеобэкграундом, креативным шрифтом логотипа и опцией выбора доп. видео в фоне

на сайт

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


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

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

Красивое фоновое видео на сайте ресторана Vandal

на сайт

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


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

Пример аппетитного фонового видео

на сайт

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


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

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

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

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

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

на сайт

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


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

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

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

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

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

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

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

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

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

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

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

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

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

Продающее фоновое видео российского сайта ресторана

на сайт

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


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

Пример главной страницы сайта с креативными видео-фонами

на сайт

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


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

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

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

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

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

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

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

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

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

 

 

 

 

 

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

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

Фоновое видео на сайте kahuna.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 сайт с необычной навигацией, интерактивом и прекрасными видеобэкграундами


В завершение

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

Читайте также:  Факты о видео-контенте — статистические данные по видеомаркетингу