Відео в веб-дизайні. Чи є сенс його використовувати, і якщо так, то як?
Немає сенсу сперечатися: більшість людей вважає за краще відео тексту.
Підсвідомо ми всі знаємо, що це правда. Тільки подивіться, як багато людей люблять проводити свій вечір біля телевізора, а не за книгою.
Саму дивну статистику надає YouTube. Як повідомляється, кожен місяць на ньому проглядається 6 млрд годин відео.
Чому це так? Чому ми так любимо відео? І що ще більш важливо - чи повинні веб-дизайнери робити відео невід`ємною частиною дизайну? Якщо так, то як?
Чому відео привертає стільки уваги?
Одним словом, еволюція. Це основне, до чого все зводиться.
Відео привертає нашу увагу. Незалежно від того, високого воно якості чи ні, воно отримає набагато більше уваги, ніж статичний малюнок. Навіть якщо стоїте в Луврі, дивлячись на Джоконду, ви все одно повернете голову, коли підліток поруч з вами запустить відео з YouTube на телефоні.
Протягом багатьох років еволюції, рух означало небезпеку. Якщо людина не помітив, що щось рухається у напрямку до нього - наприклад, підкрадається тигр - могли бути згубні наслідки.
Саме тому людське око і мозок фіксуються на всьому, що рухається. І якщо буде в реальному житті, або на екрані - не має ніякого значення.
Беручи все це до уваги, важко стверджувати, що відео не може бути неймовірно потужним дизайн-інструментом. Воно сумісне з нашими мізками більше, ніж будь-який інший інструмент проектування, який є статичною.
Додайте до цього гарне інтернет-з`єднання в наші дні, і загальне поліпшення механізмів для розгляду відео в веб-браузерах, і у нас є ідеальне поєднання обставин, щоб почати використовувати відео в дизайні.
Яке відео використовувати?
Доступний нескінченний спектр відео, які можна використовувати в дизайні сайту. Починаючи від маленьких фрагментів, і закінчуючи довгими кліпами.
У вас є повна свобода вибору, коли справа доходить до мети і типу відео. Ви можете використовувати все, від простих фонових відеороликів, до повномасштабної демонстрації продуктів.
Проте, є деякі принципи, які ви повинні тримати в голові. Незважаючи на еволюційну сумісність з нашим мозком, технологія відео все ще накладає деякі обмеження.
Використовуйте відео, щоб розповісти історію
Це звучить як кліше, але якщо зображення коштує тисячі слів, то скільки коштує відео? Звичайна секунда відеозапису містить 40 кадрів. Скільки зображень замінює 1-хвилинне відео? Порахуйте.
Давайте зосередимося на тому, що насправді працює.
Насамперед, відео ідеально підходить для зображення речей, які важко описати за допомогою тексту.
Деякі приклади:
- Відео для подання фізичних продуктів - то, що можна потримати в руці.
- Навчальні ролики. Показати завжди ефективніше, ніж розповісти.
- Відео ідеально підходить для створення певної емоційної реакції глядача.
- Відео як інструмент продажів. Згідно Hubspot, 52 відсотків фахівців з маркетингу називають відео найкращим типом контенту
- Відео як інструмент для візуального представлення продукту / бізнесу / людину, якій присвячений сайт. Причому, відео може уявити спосіб життя, пов`язаний з річчю. У деяких сценаріях, це може бути ефективніше, ніж говорити про це в явному вигляді.
Відео: Мінуси веб дизайну
Якість відео. Чи достатньо хорошого?
Неважливо, чи використовуєте ви фонове відео або для демонстрації продукту. Запам`ятайте одне дуже важливе правило:
___________________
Якщо ви хочете показати відвідувачеві відео, то нехай воно буде чудовим!
___________________
І це стосується як технічної якості відео, так і його загальної якості.
Принципи технічної якості досить очевидні. Відео в вашому дизайні має бути достатнього розміру - щоб добре виглядати на будь-якому HD-екрані. Зверніть увагу на стиск - велике шкодить якості, маленьке - буде повільно завантажуватися.
Зверніть увагу на якість продукції. Сценарій, монтаж, гра акторів - чи достатньо хороші?
Просто самі подивіться обраний відеоролик. Чи справді він чудовий по всіх параметрах?
Технічні обмеження і пропускна здатність
Робота з відео може бути проблематичною.
Навіть короткий ролик може бути файлом великого розміру. Виникає питання про формат файлу і стисненні, які можуть бути непридатні для роботи в Інтернеті. Не всі браузери можуть працювати з новими відеоформатами.
Існують два основних способи обійти ці проблеми:
Використовуйте тільки перевірені кодеки і механізми стиснення відео. Наприклад, працюйте з H.264 / MP4 або VP9 / WebM - більшість сучасних веб-браузерів їх підтримують.
Злейте відео на YouTube або Vimeo, і тільки вставте його звідти.
Відео: Де вчити веб-дизайн в 2017?
Це, мабуть, найкращий вихід. Маючи ролик, розміщений на іншій платформі, ви вирішите проблему пропускної здатності (наприклад, YouTube здатний обробляти будь-який обсяг трафіку, і він не виставить вам рахунок за це). Також ролик буде доступний на всіх браузерах і пристроях.
Єдиним недоліком є те, що вкладене відео не завжди гармонує з дизайном вашого сайту. Крім того, ви повинні налаштувати сам відеоплеєр.
Якщо ви вирішили вставити відео самостійно, переконайтеся, що це ставить під загрозу швидкість сайту. Кращий спосіб - виміряти швидкість до і після додавання відео, а потім оптимізувати.
Найбільша складність при роботі з відео:
Що робити, якщо ваш клієнт хоче використовувати погане відео?
У 99 відсотках випадків, ви розробляєте сайт для клієнта. Цей клієнт ставить свої цілі і свої вимоги, і також часто надає рекламні матеріали, які хоче використовувати. Зображення, фотографії продукту, командні фотографії ... Вони завжди можуть бути розміщені десь на сайті, незалежно від їх якості.
З відео не все так просто.
Одна з найпоширеніших проблем, з якими ми стикаємося - коли нам показують сайт конкурента, де вони використовують відео, і кажуть, що хочуть так само. І коли надсилають своє відео, виявляється, що занадто великий розмір файлу, ролик дуже довгий, або, що найгірше, дійсно поганої якості.
Використання подібного відео не тільки не зробить бажаного ефекту залучення відвідувачів, але навіть відштовхне їх, зробить вигляд продукту / бізнесу дурним і непрофесійним.
Найбільш очевидним вихід - зняти нове, високоякісне відео.
Але є і інші рішення, якщо бюджет обмежений:
- Автозапуск слайдшоу замість відео. Створіть його з якісних кадрів оригінального відео, або з набору зображень продукту.
- Використовуйте ефект паралакса замість відео.
- застосуйте анімацію, яка візуально трохи схожа на відео.
Відео на передньому плані або в якості фону?
Два найпоширеніші способи використання відео в веб-дизайні:
(А) зробити його одним із пріоритетних елементів дизайну;
(Б) використовувати його в якості фону, який тільки підсилює основне повідомлення.
Залежно від ваших цілей, одна буде більш підходящим, ніж інші.
Пріоритетні відео прекрасно підходять для демонстрації та розповіді історії. Іншими словами, якщо ви хочете представити що-небудь актуальне, по темі сайту, то відео на першому плані допоможе вам в цьому.
Але ролики на передньому плані не повинні бути видні відразу. Ви можете, наприклад, зробити так, як Nest на домашній сторінці. Замість відображення відео, вони використовують посилання з написом «Дивіться відео», яка запускає спливаюче вікно.
Фонові відео ідеально підходять для ситуацій, коли саме відео смутно пов`язано з темою сайту, але допомагає передати почуття / образ життя / емоцію, пов`язану з продуктом.
Це може бути зроблено ефективно на сайтах, де немає необхідності підкреслювати зміст. Наприклад, на сайті музиканта могли б використовувати фонове відео, показуючи роботу в студії (запис, гра на музичному інструменті і т.д.).
Погляньте на головну сторінку CouleeCreative. Це агентство вирішило використовувати прикольне відео команди, яке передає дійсно позитивні вібрації.
Відео як фон в паралаксі
Ще одна тенденція, яку ми повинні обговорити окремо - використання відео всередині фонових блоків параллакса. Такого роду прийом новий в веб-дизайні. Весь принцип полягає в створенні ілюзії глибини поля.
У класичному випадку паралакс використовує на задньому плані статичні зображення.
Але більш цікавий спосіб полягає у використанні відео в якості фону. Відео всередині параллакса тлі повинно бути направлено тільки на передачу почуттів і емоцій, замість того, щоб представляти продукт.
Як приклад - Zerif Pro:
Ви бачите відеоролик в першому блоці. Відмінний спосіб зробити унікальний дизайн.
Автовідтворення відео чи ні?
Ймовірно, найбільш спірне питання.
Відео: Photoshop для веб-дизайнерів
Відповідь складається з двох частин:
Якщо відео не видно відразу - якщо воно під посиланням «Дивитися відео» - то, очевидно, воно не може бути з автозапуском.
Якщо відео видно відразу - його можна відтворювати автоматом.
Так, багато хто ненавидить цей автозапуск відео. Але є речі гірші - це автозапуск аудіо.
Якщо ви хочете поставити відео на автозапуск, переконайтеся, що звук за замовчуванням приглушений.
Повноекранне чи ні?
Існують різні правила, які потрібно враховувати, щоб визначитися з відповіддю на це питання:
- Повноекранне відео має бути простіше і коротше, чим більш дрібне. Це залежить головним чином від пропускної здатності. Якщо відео буде довго завантажуватися і гальмувати, це зіпсує враження від сайту цілком.
- Повноекранне відео працює краще в якості фону.
- Маленьке за розміром відео, може бути будь-якої довжини (В розумних межах) і являє продукт / бізнес в тому чи іншому вигляді. Це означає, що воно також залежить від веб-дизайну.
- Повноекранне відео на тлі повинно бути з безшовним циклом, щоб не чіпляти очей. Ролики довжиною близько 20 секунд, як правило, працюють краще за все. Якщо коротше - то цикл буде очевидний, помітний. Якщо довше - більшість відвідувачів навіть не побачить весь відеоряд.
Подивіться на Toggl. Це інструмент відстеження робочого часу. Приємний спосіб демонстрації, через серію коротких епізодів, відтворюваних по колу.
висновок
Чи є сенс використовувати відео в веб-дизайні?
Так звичайно!
Але труднощі криються в деталях. Відео буде добре працювати, а не відштовхувати відвідувачів, якщо воно високої якості і забезпечує приємний досвід.
Якщо подбати про це, то використовувати відео можна де завгодно: для фону, для демонстрації продукту, для розповіді про компанії.
Найголовніше - гарне відео дозволяє підняти відносини з користувачем на інший рівень. Це те, що дуже важко досягти через статичний текст або зображення.
