Тренд: «эпичные изображения»

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

Огромные заголовки

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

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

На главной странице фоном стоит его огромная полноэкранная фотография. Цвета приятно гармонируют с макетом, делая дизайн своеобразным. Прогуливаясь по сайту, вы заметите на каждой странице тоже фоновые фото с заголовками. Например, на странице «обо мне» он использует другую свою фотографию.

Огромные заголовки есть хлеб насущный эпичных изображений.

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

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

Одностраничный дизайн

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

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

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

Полноэкранный фон

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

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

На сайте August digital marketing agency применяется альтернативная и при этом красивая техника. Заголовок на главной не совсем полноэкранный, но он занимает значительную часть экрана. Что интересно, на фоне стоит не фото, а оригинальная иллюстрация.

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

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

Миниатюры постов

За последние несколько лет резко возросло количество блогов и журналов. WordPress на данный момент — одна из самых функциональных платформ для публикации, которую многие сайты используют для управления контентом. С тех пор как в WordPress появились миниатюры записи (featured images), произошёл наплыв необычных оформлений онлайн-журналов.

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

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

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

Слайдер

Некоторые дизайнеры предпочитают делать своих героев динамичными — да, это отсылка к Бэтмену и Робину (прим. авт. — Dynamic Duo — Динамическая пара). Также как пояс с гаджетами Бэтмена, слайдеры предлагают богатое разнообразие вариантов и решений. Вы можете вставлять туда фото человека, здания, офиса или творческой работы.

Хороший пример можно найти на сайте брендингового агентства Matter of Form. Их полноэкранные изображения в слайдере позволяют посетителям самостоятельно переключать контент. Это увлекательно и помогает глубже взглянуть в душу компании.

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

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

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

И напоследок ещё один пример: портфолио Мелиссы Роберт. Меняющиеся изображения ведут на внешние страницы, что показывает прагматичное отношение Мелиссы к контенту. Но подобный концепт дизайна по-прежнему превыше всего ставит акцент на контент и UX.

Заключение

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

Изучив самые популярные тренды, вы можете проанализировать причины их популярности и определить их достоинства применительно к вашим работам. Поэтому попробуйте придумать что-то своё с эпичными изображениями. Пусть Брюс Уэйн гордится тем, что может назвать себя героем, достойным Готэма.