Один из самых популярных направлений в веб-дизайне в настоящее время является использование больших изображений. И не только крупных, но совершенно негабаритных образов, которые, кажется, оживают на экране. При использовании таких изображений в верхней части страницы это называют hero header. Он является, как-будто главным персонажем на странице, а вокруг него происходят события.
Как вы можете воспользоваться новым трендом? Какие инструменты вам нужны, чтобы начать? Мы покажем вам удачные примеры hero header, советы по использованию их на сайтах, прекрасные примеры сайтов, которые уже на вершине тренда и даже несколько бесплатных вариантов для вас, чтобы загрузить и пользоваться.
Каков он, hero header?
Hero header использует главное изображение, текст и навигационные элементы на домашней странице или в верхней части любой веб-страницы. Заголовок герой может быть использован в виде различных способов: в виде изображения или изображения с текстом, движущегося изображения, неподвижного изображения, видео- или анимации. Дизайн может быть реалистичным или нарисованным.
Основное изображение — это первое, что вы видите на веб-сайте и дизайн, чтобы привлечь вас на страницу. Он должен иметь сильный акцент и вызывать визуальный интерес.
Hero header делает сильный акцент на визуальный эффект и часто основывается на простом шрифте, минимальном выборе цвета и элементах пользовательского интерфейса с основными формами. Большинство элементов дизайна располагаются на верхней части изображения, которая часто удобно разработана таким образом, чтобы текст помещался в определенном положении на экране. Часто логотип, навигация и другие инструменты расположены вокруг внешних краев — как правило, вверху слева и справа в углу, чтобы держать в центре внимания само изображение.
Hero header работает в самых разнообразных конструкциях веб-сайта и практически с любым стилем дизайна. Ключевой момент во всех конструкциях и вариациях — это тщательно подобранное изображение.
Советы по использованию hero header
Как только вы решили использовать hero header, есть несколько вещей, которые нужно иметь в виду при проектировании. Дизайн должен быть чистым и элементы не должны мешать основному изображения или видео. Разделение элементов может иметь жизненно важное значение в этом стиле дизайна. Вот несколько вещей, которые стоить иметь в виду при разработке заголовка с изображением:
- Вставить логотип или название бренда. Обычно он расположен в верхнем левом углу. Выбирайте товарный знак или логотип в белых или черных цветах, а не что-то с большим разнообразием оттенков.
- Используйте жирный шрифт в заголовке. На большой фотографии надпись поможет привлечь внимание пользователей.
- Используйте более тонкий шрифт, когда дело доходит до навигационных элементов и текста вторичного типа. Придерживайтесь одного большого изображения и одного большого куска текста; пусть все остальное отступит на задний план в дизайне.
- Будьте в курсе цветовых вариантов. Если вы используете цветное изображение, придерживайтесь черного и белого для всего остального. Если изображение черно-белое, выбирайте одну простую цветовую палитру для текста.
- Поместите текст так, чтобы он не мешал визуальному потоку изображения. Не закрывайте лица или жизненно важные части изображения.
- Рассмотрите тип шрифта — крупный, но не жирный. (Это модно и довольно легко читается.)
- Подумайте об использовании кнопки призрака.
- Используйте фиксированную навигацию. Сделайте ее легкой для пользователей, чтобы просматривать и перемещаться по страницам. Поиграйте с навигацией, которая расположена на главном изображении и за ее пределами.
- Используйте оттенки, чтобы помочь тексту дополнить изображения а не забивать его. Все тексты должнs быть читаемыми, чтобы быть эффективными.
- Дизайн hero header должен быть организован таким образом, чтобы пользователи знали, что делать дальше — нажать или прокрутить. Включите визуальные подсказки. Помните, hero header не должен полностью заполнять экран; это только самая верхняя его часть.
- Создавайте hero header, который не влияет на быстродействие в веб-среде. Подумайте о том, как она будет выглядеть на небольших экранах. Какой образ и текст будет показывать?
А теперь пришло время для вдохновляющих примеров. Примеры великих заголовков героев можно найти по всему Интернету. Эта коллекция включает в себя живые веб-сайты и незавершенные работы.
Халява
Если вы только начинаете экспериментировать с большими заголовками, вы можете рассчитывать, как правило, на некоторое количество свободных ресурсов. Выбирайте сделанные из реальных изображений или трехмерных или рисунков. В зависимости от проекта, любой стиль может работать хорошо.
При загрузке hero header обращайте внимание на разрешение (изображение должно быть больше максимальной ширины экрана), тогда у вас будет возможность редактирования, формата и использование смарт-объектов (если вы хотите перемещать элементы). Используя любой свободный элемент дизайна, проверьте лицензию и убедитесь, что вы согласны с ее условиями. Халява часто хороший способ, чтобы использовать для личных проектов, но коммерческие проекты требуют плату; изучайте все детали любого элемента перед использованием.
Две бесплатные презентации hero header
Настольный набор
Два винтажных изображения hero header
Творческий пакет
Бесплатное изображение
Платные ресурсы
Среди многочисленной халявы есть довольно мало высококачественных ресурсов. Если вы всерьез заинтересовались этим вопросом, стоить обратить внимание на платные ресурсы, где можно найти действительно качественный продукт за скромную цену. Предлагаем вам несколько вариантов.
16 Hero header изображения Vol. 1 ($ 20)
Макет набор еды # 3 ($ 20)
Мега Комплект 87 ($ 35)
Плоские инструменты для творчества и работы ($ 11)
Деревенские фото ($ 20)
Элементы для создания сцены ($ 12)
Вывод
Hero header являются одними из лучших и наиболее визуально привлекательных направлений в веб-дизайне, которые мы видели за все время. Привлекательным в этой технике является то, что она работает практически с чем угодно. Хотите, проектируйте в плоском стиле, или в стиле минимализма, или ретро. Используйте hero header.
Используете ли вы hero headerи в ваших проектах? Поделитесь с нами в комментариях. Мы хотели бы видеть проекты, с которыми Вы работаете.
Источник: designmodo.com/hero-headers
😊 Донат. На чаёк с печеньками! ☕ 🍪