Вам действительно нужно следовать тренду?

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

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

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

---

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

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

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

Общие принципы

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

Конкретные принципы фонового видео

• Не используйте аудио
• Используйте настоящее видео
• Убедитесь, что размер видео достаточно велик
• Убедитесь, что видео не слишком отвлекает
• Убедитесь, что он хорошо зацикливается

Принципы видео переднего плана

• Держать его коротким
• Убедитесь, что призыв к действию понятен
• Сделайте его многоцелевым
• Убедитесь, что звук подходит
• У него нет автовоспроизведения

---

Общие принципы

Знайте свою цель для видео

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

Эта цель должна быть показана через содержание видео (имеется в виду показанные люди, взаимодействие, приложение, обстановка и т. д.), а также впечатление и коннотацию, которые производит видео (что, безусловно, является более сложной частью). Я рассказываю о том, как вы можете это сделать, в разделах ниже.

_{Нажмите на изображение, чтобы увидеть сайт/видео.}

---

Усиливайте, а не заменяйте

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

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

---

Убедитесь, что видео соответствует правилам видеосъемки.

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

Есть много других правил, которым нужно следовать при съемке видео, но это не тема этого поста. Для получения дополнительной информации ознакомьтесь с основами видеосъемки Vimeo, которые весьма полезны, и поищите дополнительную информацию самостоятельно.

---

Держите это интересным

Нет смысла снимать видео, которое люди не хотят смотреть. Это означает, что контент должен быть визуально привлекательным и привлекательным. Как это происходит, зависит от видео и целей. Лучший способ сделать интересное видео — это иметь тему для съемки и снять ее хорошо.

Некоторые общие приемы видео, позволяющие сохранить интерес, включают переключение ракурсов и направлений съемки, относительно короткую продолжительность конечного кадра (максимум 1–10 секунд, в зависимости от важности кадра), а также правильное кадрирование и фокусировку.

---

Убедитесь, что видео (в основном) соответствует вашей цветовой схеме.

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

---

Убедитесь, что качество видео высокое

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

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

Помните, что видео — это представление о качестве работы вашей компании. Сделайте его отличным или не имейте его вообще.

---

Конкретные принципы фонового видео

Фоновые видео — это те, которые обычно занимают большую часть, если не весь экран. Обычно они размещаются за каким-либо другим контентом, как правило, небольшими объемами текста. Часто они .gifs.

Не используйте аудио

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

---

Используйте настоящее видео

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

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

---

Убедитесь, что размер видео достаточно велик

Само собой разумеется, что используемое видео должно быть достаточно большим, чтобы покрыть каждый экран без растягивания. Это означает, что для полноразмерных экранов нам нужно иметь видео с минимальным разрешением 1024 x 768 пикселей, но лучше стремиться к ширине не менее 1200 пикселей. Мы также можем предотвратить загрузку больших видео для небольших экранов, предоставляя разные размеры видео в зависимости от разрешения. Старайтесь оптимизировать время загрузки видео, насколько это возможно, не уступая при этом качеству изображения.

Может быть хорошей идеей удалить видео на небольших экранах, так как большую его часть может быть трудно увидеть.

---

Убедитесь, что видео не слишком отвлекает

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

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

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

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

---

Убедитесь, что он хорошо зацикливается

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

---

Принципы видео переднего плана

Видео переднего плана ничем не покрыто и должно быть действительно важным аспектом веб-сайта. Два основных типа — коммерческие и интерактивные.

Держать его коротким

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

---

Убедитесь, что призыв к действию понятен

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

---

Сделайте его многоцелевым

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

---

Убедитесь, что звук подходит

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

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

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

---

У него нет автовоспроизведения

Большинство людей не ожидают, что веб-сайты будут воспроизводить музыку при загрузке страницы, особенно с большим объемом. Таким образом, в большинстве случаев лучше не воспроизводить звук. Самый простой способ сделать это — поставить видео на паузу при загрузке страницы, ожидая, пока пользователь запустит видео.

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

---

Примечание: если вы ищете место, где можно найти хорошее зацикленное видео без лицензионных отчислений, HTML5BackgroundVideos и FancyFootage.Club — хорошие места для начала.

Отказ от ответственности: я не профессионал в области видео, но я потратил пару сотен часов на съемку и редактирование видео и потратил гораздо больше времени, чем на создание и дизайн веб-сайтов. Пожалуйста, прокомментируйте с исправлениями и дополнениями, если они у вас есть!