Фоновое видео для сайта. Что показать? Как сделать? Сколько стоит?

Фоновое видео становится популярнее. В прошедшей вступительной статье про видео для сайта, я вкратце рассказал для чего оно используется. В текущей статье отвечу на вопросы по этому типу видео для сайта.

Плюсы / минусы / особенности

Плюсы использования фонового видео:

  • создаёт нужно настроение у посетителя сайта;
  • позволяет быстро донести масштаб бизнеса / подход к работе / качество продукта;
  • привлекает внимание, рассказывает о компании с первых секунд посещения сайта.

Минусы использования фонового видео:

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

Особенности:

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

Что показать на фоновом видео?

Съёмка процесса производства продукта / оказания услуги

Пример фонового видео №1

Отличный вариант, чтобы похвастаться технологичностью производства, новым оборудованием, используемыми инструментами.

Примеры:

Интерьер / экстерьер помещений

Пример фонового видео №2

Подойдёт отелям / фитнес-центрам / выставочным залам / художественным галереям / другим компаниям, которым важно показать дизайн интерьера, атмосферу помещения.

Примеры:

Люди

Пример фонового видео №3

Если сильная сторона компании коллектив — покажите его на фоновом видео сайта. А компании, которая организовывает праздники, стоит показать радостные лица своих клиентов.

Примеры:

Анимация / графика

Пример фонового видео №4

Иногда для донесения смысла бизнеса / продукта / услуги лучше разработать видео, а не снять его. Например, сделать 3D-анимацию, либо видео-инофграфику, показывающую процесс / продукт.

Примеры:

Что-то абстрактное, не относящееся, либо косвенно относящееся к компании

Лично я против такого варианта. Лучше показывать что-то «живое», отображающее действительность (варианты выше). Тем не менее, абстрактное фоновое видео придаст вашему сайту современный вид.

Как получить фоновое видео?

Найти бесплатное

Относится к тому самом абстрактному фоновому видео, которое мне не нравится. Вы найдёте в сети множество бесплатных фоновых видео, которые как минимум сделают сайт интереснее по восприятию. Например, найти можно вот в этой подборке: http://ruseller.com/lessons.php?rub=1&id=2284

Снять самостоятельно

Я уверен, что «живое» видео лучше шаблонного, скаченного со стоков. Даже если вы снимите на обычный цифровой фотоаппарат или iPhone. Простая тонировка видео цветом сделает из «кустарной» съёмки приемлемый вариант видео для использования в качестве фонового.

Заказать видео в студии дизайна / видео-студии (например у нас =)

Это наилучший в плане качества вариант, но более затратный. На выходе вы получите спланированный видео-ролик, снятый с использованием различных камер / объектов / аксессуаров. Либо разработанный специально для вас анимированный 2D/3D ролик.

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

Как мы делаем фоновое видео

Процесс съёмки корпоративного видео для сайта

Фоновое видео — часть сайта. В идеале оно должно нести определенный месседж, соответствовать идейной концепции сайта. Разработку фонового видео мы, как правило, осуществляем в рамках проекта по дизайну сайта. При таком раскладе у нас есть:

  • понимание бизнеса заказчика (в идеале — сформированное нами ключевое сообщение бренда, или SMP);
  • понимание сильных сторон компании заказчика;
  • определенная на этапе анализа стилистика сайта, графики.

Далее мы проходим следующие шаги:

  1. генерируем идеи относительного того, что будем показывать на фоновом видео (процесс / коллектив / интерьер офиса);
  2. определяемся с приёмами, типом видео (съёмка / анимация / смешанное видео);
  3. накидываем сценарий, порядок кадров (для фонового видео это менее значимый шаг, нежели, для корпоративного видео, тем не менее, он необходим);
  4. снимаем / генерируем (отрисовываем, анимируем) части ролика;
  5. монтируем итоговый ролик;
  6. делаем цветокоррекцию / тонирование с учётом стилистики сайта.

Технические требования к фоновому видео

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

  • длительность — в среднем 10 секунд, либо меньше;
  • разрешение — 480p (853x480px);
  • кодек и формат — H.264, mp4.

Итоговый размер файла в идеале не должен превышать 12-13 мб.

FAQ по фоновому видео для сайта

— Влияет на скорость загрузки страницы?

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

— А как будет на мобильных?

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

— А не будет ли отвлекать от контента?

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

— Сколько стоит?

— Стоимость разработки фонового видео завит от типа видео (съёмка / анимация), длительности, стилистики сайта. Стоимость разработки фонового видео у нас начинается от 50 т.р. В случае создания фонового видео в рамках проекта по дизайну сайта, стоимость ниже, т.к. некоторые шаги дублируются (погружение в тематику бизнеса, формирование SMP, выявление сильных сторон).

Выводы

Фоновое видео — не роскошь, а инструмент, который можно и нужно использовать. Запланируйте его для своего следующего сайта / промо-страницы.

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


ПОДПИШИТЕСЬ НА РАССЫЛКУ

и получайте свежие статьи про видео для сайта первыми.

Максим Кыштымов, руководитель студии дизайна «Чипса»


Есть вопросы? Задавайте! Отвечу!
⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎⬇︎