«Смени шапку!»: 20 лучших примеров, как оформить хедер сайта

шапка сайта баннер

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

Из каких элементов состоит шапка сайта

Шапка — ключевой элемент в дизайне сайта. Оформление шапки напрямую влияет на юзабилити (удобство использования). Говоря условно, шапка — это дорожная карта, по которой пользователь в первые несколько секунд понимает возможности сайта и то, какие действия на нем можно осуществить.

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

Взгляните на следующий шаблон с изображениями стандартных иконок. Вы без труда смогли бы обойтись и без надписей под ними, чтобы понять их значение, не так ли?

Как сделать шапку сайта стильной и удобной

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

1. Продумайте привлекательный визуал шапки сайта

Главное, что вы должны сделать при создании шапки — сделать так, чтобы у пользователя возникло желание остаться на сайте и исследовать его. Приятный визуал должен поддерживать удобный интерфейс. В ином случае пребывание на странице может оказаться утомительным (независимо от того, насколько хорошо вы продумали меню).

2. Сделайте шапку сайта источником вдохновения

Навигация по разделам сайта Seasons Project выстроена не по горизонтали, а по вертикали. Это не значит, что у сайта нет хедера. Это лишь один из возможных вариантов его расположения. Обратите внимание, что баннеры с фото и со ссылками для перехода на отдельные страницы расположены не абсолютно симметрично. Они имеют разные размеры, и между ними достаточно много свободного пространства. Такое расположение ассоциируется с отдельными бумажными вырезками для доски настроения.

Пример шапки сайта Seasons

Источник: Seasons

3. Используйте в оформлении хедера узнаваемые символы

Иконка в виде трех параллельных горизонтальных полос в левом верхнем углу хедера легко распознается пользователями как кнопка меню. Из-за внешнего сходства с тремя слоями гамбургера ее так и называют — «гамбургер». Кнопка часто используется как полноценный элемент шапки. Используйте эту иконку, если хотите упростить навигацию по разделам сайта.

4. Сообщите о важном коротким объявлением в шапке сайта

На сайте интернет-магазина H&M максимально подробное горизонтальное и вертикальное меню. Но здесь мы хотим обратить внимание на отдельный контрастный баннер с заголовком «Бесплатная бесконтактная доставка от 2000 рублей».

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

Шапка сайта H&M

Источник: H&M

5. Акцентируйте внимание на категориях товаров в шапке сайта

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

6. Сообщайте шапкой сайта о новых акциях

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

Пример шапки сайта Кораблик

Источник: Кораблик

7. Придерживайтесь единого стиля для баннеров в шапке сайте

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

8. Поместите в хедер лучшее из своего портфолио

Вариант для дизайн-студий, креативных агентств и всех, кто занимается творчеством. Если не знаете, чем бы таким украсить шапку сайта, покажите лучшее из своих работ, как это сделала команда Sapunova Food & People. По мере реализации новых проектов вы можете менять визуалы, следуя принципу «ты хорош настолько, насколько хороша твоя последняя работа».

Шапка сайта Sapunova Food & People

Источник: Sapunova Food & People

9. Покажите свою команду

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

О том, как поддерживать эффективный уровень коммуникации в команде в непростые времена, читайте в статье «Как пользоваться Microsoft Teams: возможности, советы, лайфхаки».

10. Экспериментируйте с фоновыми композициями

На сайте магазина косметики SOKO GLAM мы видим яркие динамичные баннеры с коллажами из разных фото. Такой дизайн выглядит нарочито небрежным, но при этом очевидно, что все элементы композиции подобраны аккуратно и со смыслом.

Шапка сайта Sokoglam

Источник: Sokoglam

11. Создайте минималистичный дизайн шапки сайта

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

12. Отвечайте требованиям времени

Подумайте, как вы можете адаптировать к новому времени ваш бизнес и сайт. Для примера возьмем рестораны Папа Джонс. Они придумали интересный ход, чтобы поддержать уровень продаж в кризис, а заодно и приободрить клиентов. На сайте появилась возможность добавить к заказу наборы для настольных игр. Благодаря баннеру в шапке сайта мы узнали об этом за доли секунды.

Шапка сайта Папа Джонс

Источник: Папа Джонс

В поисках свежих идей, как развлечься в период самоизоляции, загляните на страницу нашего блога «„Скучно не будет!“: 19 лучших настольных игр для тех, кто дома».

13. Закрепите лого и меню в хедере

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

14. Используйте в шапке сайта шокирующие визуалы

Если у вас достаточно фантазии и ресурсов для подобных экстраординарных фотопроектов, как у Золотого Яблока, дерзайте! С таким визуалом в шапке сайта взрыв трафика вам обеспечен.

Шапка сайта Золотое яблоко

Источник: Золотое Яблоко

15. Попробуйте оформление шапки сайта в стиле колорблокинг

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

16. Поместите кнопку с призывом к действию на главном баннере

Вариант для самых амбициозных и уверенных в своем продукте. Если вы готовы сократить путь клиента от первого посещения сайта до покупки, «взять его холодным», следуйте примеру Ritual. При просмотре этой шапки сайта первый взгляд падает на синюю кнопку «Купить все» на ярко-желтом фоне. И лишь после этого блуждающий взор замечает ссылки на разделы «Магазин» и «Ознакомиться».

Шапка сайта Ritual

Источник: Ritual

17. Объясните в трех словах в шапке, как работает ваш сайт

Если ваш продукт или услуга еще не так хорошо известны, но идея быстро подвести пользователя к целевому действию пришлась по душе, попробуйте описать процессы короткими тезисами и поддержать их смысл инфографикой. Так холодный клиент получит представление, что его ждет за кнопкой «Заказать».

18. Покажите товар не только лицом

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

Шапка сайта Epica

Источник: EPICA

19. Создайте эффект присутствия оформлением шапки сайта

Если хотите вызвать максимум доверия у пользователей, покажите внутреннюю кухню (в прямом или переносном смысле, в зависимости от деятельности). Конечно, делать это стоит максимально эстетично. Не поскупитесь на хорошего фотографа или видеографа — вот увидите, эти затраты оправдают себя.

20. Вовлекайте пользователей в игру

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

Попробуйте, но не забудьте вернуться к нам — ниже мы составили пару полезных списков.

Шапка сайта Talormade

Источник: Talormade

Как настроить шапку сайта

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

  • Tilda (на русском языке);
  • Wix (на русском языке);
  • Wordpress (на английском языке);
  • Squarespace (на английском языке);
  • Site123 (на английском языке).

Если вы только начинаете онлайн-проект, прочтите также статью «Интернет-бизнес: 26 идей для новичков».

Дизайн сайтов: больше ресурсов для вдохновения

В поисках других примеров, как сделать красивую шапку сайта, загляните на следующие сайты:

  • SiteInspire;
  • Pinterest (поиск по запросам «хедер сайта» или «site header»);
  • Behance (поиск по запросам «шапка сайта» или «site header»);
  • Dribbble (поиск по запросу «site header»);
  • Tilda (раздел #madeontilda).

Делайте свои проекты в интернете заметными вместе с Canva!

Подписывайтесь на обновления в Телеграме, Фейсбуке, ВКонтакте и Яндекс Дзене, чтобы всегда быть в курсе трендов графического дизайна и возможностей Canva, которые помогут воплотить их в жизнь!

Ваше секретное средство для потрясающих дизайнов