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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Делайте свои проекты в интернете заметными вместе с Canva⁠(открывается в новой вкладке или окне)!

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