Тренд на Hero Image в веб-дизайне

Hero-изображения на сайте

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

Крупные заголовки

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

На самом деле, трудно найти что-либо, что опишет сайт лучше, чем фотография. По статистике, именно она мотивирует пользователя ознакомиться с сайтом более подробно, изучить его контент. Это отлично демонстрирует сайт фотографа Andrew Elsass.

Hero-оформление сайта Andrew Elsass

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

Раздел «Обо мне» на сайте Andrew Elsass

Трендовые Hero-картинки отлично сочетаются со многими стилями дизайна сайтов.

Hero-дизайн сайта компании Cleverbird Creative

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

Дизайн одностраничного сайта

Крупные полноразмерные фоновые изображения и hero-изображения могут быть использованы довольно эффективно в дизайне одностраничного сайта. Обычно на лендингах или паралакс-сайтах мало контента для отображения. Немного добавить визуального веса странице смогут те самые крупные бэкграунды и hero-изображения.

Hero-изображения на сайте Gladz

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

Галереи

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

Крупные тематические изображения в разделах

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

Использование ярких слайдеров в оформлении сайта

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

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

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