Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Выбираем фон для сайта: фото или видео?

30 мая 2014 | Опубликовано в статьюшечки | 1 Комментарий »

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

 

 


Image vs. Video Background in Web Design - MeCre Mechanical Creatures

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

Для начала определим плюсы и минусы видео в качестве фона для сайта.

Плюсы и минусы видео-фона для сайта

Плюсы видео-фона

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

Brand & interactive Design Team WAAAC

Image vs. Video Background in Web Design - Brand & interactive Design Team WAAAC

Advertising Agency Paradowski

Image vs. Video Background in Web Design - Brand & interactive Design Team WAAAC

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

NYC Investment Firm Bienville Capital Management

Image vs. Video Background in Web Design - NYC Investment Firm Bienville Capital Management

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

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

Life According to Sam Movie

Image vs. Video Background in Web Design - Life According to Sam Movie

Jack The Giant Slayer Movie

Image vs. Video Background in Web Design - Jack The Giant Slayer Movie

• Сайт-портфолио оператора — это то самое место, в котором видео-фон будет смотреться более чем уместно. Если вы занимаетесь созданием видео, то этот тренд просто создан для вас. Покажите в фоновом видео свою работу, свой стиль и свою креативность. Вот несколько примеров для вдохновения:

The Music Bed

Image vs. Video Background in Web Design - The Music Bed

Production House Profilm Portfolio Site

Image vs. Video Background in Web Design - Production House Profilm Portfolio Site

Прежде чем перейти к недостатками видео-фона, насладиетесь действительно достойными примерами применения этого тренда:

Industrial Website of the Company that Builds Rail

Image vs. Video Background in Web Design - Industrial Website of the Company that Builds Rail

Coffee and Tea BrandPromotional Website

Image vs. Video Background in Web Design - Coffee and Tea BrandPromotional Website

Tyoulip Sisters Leather Handbags

Image vs. Video Background in Web Design - Tyoulip Sisters Leather Handbags

LeigensPiscines

Image vs. Video Background in Web Design - LeigensPiscines
Хороший сайт с различными видео на каждой странице.

Laquadra Brand Movies

Image vs. Video Background in Web Design - Laquadra Brand Movies
Шикарный сайт со множеством полноэкранных видео.

Names Not Numbers

Image vs. Video Background in Web Design - Names Not Numbers
Сайт-провокация, который дает вам 60 секунд для приятия решения.

Eagle Adventure Tours

Image vs. Video Background in Web Design - Eagle Adventure Tours
Сайт, который показывает скорость и просто не может быть спроектирован иначе.

Минусы видео-фона

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

Passion for Sochi

Image vs. Video Background in Web Design - Passion for Sochi
Можно вздремнуть пока загружается сайт.

• Полноэкранное видео вполне может заставить остальной контент выглядеть скучно. Но ведь владельцам сайтов есть что сказать пользователю помимо видео! Так что когда вы решаете добавить на ваш сайт полноэкранное видео в качестве фона, учтите что нужно сделать еще немало изменений: изменить размер и цвет типографики, правильно выровнить и расположить контент. Если вы не можете сделать этого идеально, лучше не портите сайт видео-фоном.

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

Плюсы и минусы использования изображений как фона

Плюсы использования фоновых изображений

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

MeCre Mechanical Creatures

Image vs. Video Background in Web Design - MeCre Mechanical Creatures

Day Dream Designs Creative Agency

Image vs. Video Background in Web Design - Day Dream Designs Creative Agency

Farmerhaus Restaurant Website

Image vs. Video Background in Web Design - Farmerhaus Restaurant Website

Colette Malouf Online Shop

Image vs. Video Background in Web Design - Colette Malouf Online Shop

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

University of San Diego – School of Business Administration

Image vs. Video Background in Web Design - University of San Diego - School of Business Administration

Prestigious Italian Furnishing CompanyGiellesse

Image vs. Video Background in Web Design - Prestigious Italian Furnishing CompanyGiellesse

Florist’s Website

Image vs. Video Background in Web Design - Florist's Website

Cars Website

Image vs. Video Background in Web Design - Cars Website

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

GDC Company Website

Image vs. Video Background in Web Design - GDC Company Website
Сотрудники компании улыбаются с фоновых изображений.

Electronic Music ArtistHenry Saiz

Image vs. Video Background in Web Design - Electronic Music ArtistHenry Saiz

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

Charles-Axel Pauwels Design Portfolio

Image vs. Video Background in Web Design - Charles-Axel Pauwels Design Portfolio

Software Engineering Website

Image vs. Video Background in Web Design - Software Engineering Website
• Фотографам нравится декорировать сайты-портфолио своими работами. Фон является отличным местом для того, чтобы показать посетителям свои творения. Это простое решение может помочь потенциальным клиентам выбрать именно вас. Также вы можете разместить на фоне не просто статичное изображение, но целую галерею.

Sam Docker’s Portfolio Site

Image vs. Video Background in Web Design - Sam Docker’s Portfolio Site

Photography Portfolio Website Design

Image vs. Video Background in Web Design - Photography Portfolio Website Design

Минусы использования фоновых изображений

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

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

Chicago Shirts

Image vs. Video Background in Web Design - Chicago Shirts

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

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

Автор статьи Julia Blake

Перевод — Дежурка

Смотрите также:




Комментарии

Оставить ответ


два + = 3

Вставить изображение