Что такое шапка сайта и как ее оформить

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

Что такое шапка сайта

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

Шапка сайта должна удержать внимание человека. Также у нее есть «технические» функции:

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

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

1. Модель Гутенберга. Визуально повторяет букву Z. Сначала человек смотрит в левый верхний угол, затем — в правый верхний. После этого взгляд по диагонали спускается в левый нижний угол и снова переходит вправо.
2. Z-паттерн. Более сложная схема. По сути, это тоже модель Гутенберга, но повторенная несколько раз. Так получается, когда на странице много блоков, и взгляд повторяет фигуру Z.
3. F-паттерн. Человек смотрит в левый верхний угол, затем — в правый верхний. Потом спускается взглядом на уровень ниже и опять смотрит слева направо. Если после этого он не нашел ничего интересного для себя, он закрывает ресурс. Получается, человек взглядом повторяет букву F.

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

Элементы шапки сайта

Условно все компоненты шапки веб-сайта делят на две категории — основные и дополнительные. Первые добавляют всегда, вторые — по желанию. Рассмотрим обе группы.

Основные

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

Следующий элемент — контакты. Укажите номера телефонов для связи, ссылку на чат в мессенджерах, email, физический адрес. Контактные данные помогают продвижению сайта в Яндексе и Google, так как поисковые системы сканируют информацию из хедера.

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

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

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

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

Дополнительные

Рассмотрим элементы, которые добавлять необязательно, но они могут улучшить хедер:

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

5. Гамбургер-меню. Минималистичный значок ведет в меню в виде выпадающего списка. Гамбургер позволяет освободить место в шапке и создать минималистичный дизайн.
6. Кнопка авторизации. Если на сайте есть личный кабинет, и пользователи активно пользуются им, есть смысл разместить кнопку для входа в хедере.
7. Рекламный баннер. В шапке пользователи точно его заметят. Например, баннер со скидками и акциями.

8. Выбор города. Такая функция может пригодиться крупными интернет-магазинам, особенно, если город влияет на скорость и стоимость доставки, каталог.
9. Дополнительная информация. Это режим работы, описание деятельности бизнеса и т. д.
10. Изменение версии. Это функции переключения языка, переход в версию для слабослышащих и т. д.
11. Преимущества или УТП. Главное здесь — краткость. Можно в нескольких словах подсветить основные плюсы компании.

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

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

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

Информативность

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

Понятность

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

Доступность

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

Простота

Избавьтесь от лишних деталей и элементов: это касается и создания функционала. Так, не все элементы нужно вшить в шапку сайта — добавьте только самые важные. А дизайн должен быть простым, чтобы пользователь не уставал, смотря на хедер.

Привлекательность

Хедер нужно сделать заметным и приятным для просмотра. К примеру, с фоном в виде картинки или фотографии. При этом оформление не должно мешать восприятию информации.

Единообразность

Дизайн header не должен отличаться от оформления остальной страницы. Используйте одинаковые шрифты, оттенки и стиль.

Высокая скорость загрузки

Шапка во многом влияет на скорость загрузки всего сайта. Поэтому убедитесь, что анимация, видео, графика и другие «тяжелые» элементы не замедляют работу ресурса. Если сайт будет долго загружаться, пользователь, скорее всего, закроет его. К тому же динамичные элементы сложнее воспринимать, чем статичные. При создании header лучше сделать акцент на инструментах CSS и HTML.

Адаптивность

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

Компактность

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

Есть несколько рекомендаций относительно размера хедера для разных типов сайтов. Например, для информационников и коммерческих сайтов (магазинов, салонов, клиник и т. д.) — 100–200 пикселей. Для лендингов — 300–400 пикселей, так как здесь нужно разместить больше элементов, например, кнопки, калькулятор, обратный отсчет.

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

Как сделать шапку для сайта: пошаговая инструкция

Чтобы сделать шапку на сайте с любой тематикой, действуйте по такому алгоритму:

1. Выберите необходимые элементы. Остановитесь на самых важных, чтобы не перегружать хедер.
2. Подберите простой шрифт. Если есть корпоративный шрифт, используйте его. Важно, чтобы любой текст можно было легко прочитать.
3. Добавьте логотип. Иконка должна быть четкой, без размытий, чтобы пользователю не приходилось вглядываться в нее.
4. Расположите элементы привычно для пользователя. Например, меню — слева, значок корзины — справа, а поисковую строку — в центре.
5. Зафиксируйте шапку сайта в верхней части экрана. Многие фиксируют хедер, чтобы он оставался на месте, когда посетитель пролистывает вниз. Так все самое важно будет у пользователей перед глазами.

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