Что такое Hero Header и как его использовать

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

Есть множество вариаций Hero Header’ов: просто изображение, изображение с текстом, слайдер, закрепленное изображение, видео или анимация.

wanderlust-travel-hero-images-o

Hero header — первое, что бросается в глаза посетителю сайта, поэтому изображение для него должно притягивать взгляд и вызывать зрительный интерес.

Правила Hero Header

Screen Shot 2014-12-23 at 19.46.12

  • При разработке hero header’а важно помнить некоторые основные правила. Дизайн не должен быть перегружен и элементы не должны отвлекать внимания от главного изображения или видео.
  • Используйте логотип. Обычно его располагают в верхнем левом углу. Предпочтение отдается черно-белой гамме. Логотип не должен пестреть яркими красками.
  • Не бойтесь использовать форматирование текста жирным. Так буквы не затеряются на фоне изображения.
  • Не выделяйте навигационные элементы и вторичный текст, они должны оставаться на заднем плане.
  • С умом подходите к выбору цветовой палитры. Если ваше основное изображение цветное, остановитесь на черно-белой гамме для остальных элементов hero header’а. И наоборот, если изображение черно-белое, для текста используйте какой-нибудь один яркий цвет.
  • Не располагайте текст поверх лиц или других важных частей изображения.
  • Используйте крупные и тонкие буквы (такой текст легче воспринимается)
  • Использование призрачных кнопок (‘ghost button’) добавит вашему дизайну утонченности.
  • Фиксированные навигационные элементы упростят для пользователя изучение странички. «Поиграйте» с навигацией, которая живет и внутри hero header’а, и за его пределами.
  • Используйте цветовые переходы и полутона, чтобы выделить текст — он не должен сливаться с изображением.
  • Глядя на Hero Header, пользователь должен знать, что нужно делать дальше — кликать или прокручивать страницу вниз. Используйте визуальных подсказки. Помните, что hero header не обязательно должен заполнять всю видимую часть экрана.
  • Ваш Hero Header должен быть адаптивным. Обратите внимание, как он отображается на экранах с меньшим разрешением.

 

Примеры для вдохновения

grainandmortar.com
Screen Shot 2014-12-23 at 19.48.53

wearecuppa.com
Screen Shot 2014-12-23 at 19.49.44
А еще мы собрали для вас набор Hero Header’ов, используя которые вы сможете привлечь еще больше внимания к вашему проекту!

6 бесплатных винтажных Hero Header

В архиве вас ждет небольшой бонус :-)

25-hero-header_1

Скачать 6 бесплатных винтажных Hero Header

Flat Hero Header Kit

Flat Hero Header Kit

Скачать Flat Hero Header Kit

Freebie Hero Image

Freebie Hero Image

Скачать Freebie Hero Image

Creative Bundle Set

Creative Bundle Set

Скачать Creative Bundle Set

87 Hero Header images

Мега-набор из 87 Hero Header’ов, который доступен для покупки на Creativemarket.

87 Hero Header images

[O_U user_role=»Subscriber»]Скачать 87 Hero Header images[/O_U]

Статьи по теме

0 комментариев