Skip to content

Видео в веб-дизайне

Само видео окружает нас уже в течении довольно длительного времени: в кино, на телевидении. Сегодня оно доступно для просмотра на наших телефонах, планшетах, компьютерах и других устройствах. Видео в интернете также было и есть в течении долгого времени. Мы начинали с тяжеловесных flash-файлов, а теперь у нас есть HTML5-видео и уже довольно много вариантов для подключения видео к нашим веб-страницам. Черт возьми, в половине случаев это так же легко, как вставить кусок кода в веб-страницу. Короче говоря, еще никогда ранее не было так легко использовать видео в Интернете.

Эволюция видео

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

Не забудем и о YouTube. Основанный в 2005 году, YouTube является самым популярным видео-сервисом. YouTube предложил людям то, чего ранее никто не мог предложить: любой может создавать видео и делиться им, независимо от их опыта или технических возможностей. Даже крупные корпорации и предприятия используют его, чтобы поделиться популярными клипами или новостями о их телешоу. Также YouTube облегчили путь для  быстрого распространения вирусных кампаний, и видео быстро ворвалось на сцену.

Видео в интернете сегодня

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

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

Как мы можем использовать видео

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

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

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

Чтобы представить продукт

Видео прекрасно подходят для представления пользователям своего продукта или услуги, не подавляя их списком особенностей длинной в одну милю. Вспомните SaaS веб-сайты: на скольких из них вы можете увидеть вводное видео, которое объясняет продукт или услугу немного больше?

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

Парой отличных примеров этого являются сайты приложений Clear и Paper.

Clear

Clear — приложение для создания списков задач (TODO lists). Их веб-сайт — это отличный пример использования видео, как фокусной точки, но так же посыл приложения прослеживается и без видео.

Видео расположено в шапке сайта, сразу после ссылок на скачивание приложения, и по клику загружает видео в небольшой оверлей.

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

Paper

Paper — приложение, которое позволяет делать наброски и красивые рисунки на вашем iPad.

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

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

Чтобы радовать пользователей

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

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

Несколько веб-сайтов, использующих это с большим эффектом — Handheld Conf и Playground Inc.

Handheld Conf

Handheld Conf — это конференция, которая описывает себя как «большие идеи для небольших устройств». На главной странице веб-сайта Handheld Conf вы найдете ряд восхитительных докладчиков и их темы выступления, а также фотографии. Теперь, когда вы наводите на фотографии докладчиков — они оживают!

Это удивительное маленькое удовольствие для пользователей — этот эффект будто переносит их в мир Гарри Поттера. Как только курсор переместится в сторону от фотографий, они останавливаются в том месте, где курсор покинул фотографию. И если вы вернетесь к ним, они возобновятся.

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

Playground Inc

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

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

Чтобы повысить интерес

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

Отличный пример этого можно увидеть на веб-сайте Symbolset. 

Symbolset

Symbolset создают веб-шрифтов с иконками для всех нас. Лично я считаю, что способ работы Symbolset довольно изобретателен, как и то, как они используют видео на своем сайте.

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

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

Чтобы заменить большие фоновые изображения

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

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

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

Несколько отличных примеров с использованием больших фоновых видеороликов — Spotify и Slow Mo.

Spotify

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

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

Видео, аудио и дизайн главной страницы в целом помогают задавать тон для сервиса и помогают пользователям немного лучше понять сервис и их слоган «музыка на каждый момент», и все это достигается не говоря прямо о том, что на самом деле делает Spotify.

Slow Mo

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

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

Чтобы улучшить ваш рассказ

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

Отличным примером этого в действии является личный сайт Дэна Идена.

Daneden.me

Дэн является дизайнером, которого недавно нанял Dropbox в качестве первого Dropbox Design Intern. В разделе портфолио сайта Дэна, наряду с названием и описаниями проекта, у него также есть красивые видеоролики, которые ведут пользователя по проекту.

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

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

Задания

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

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

CSS3, веб-шрифты и иконки

Отзывчивый веб-дизайн