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

Главная / Статьи / Как правильно оформить шапку сайта


Шапка сайта
Советы web дизайнеров по правильному оформлению и содержанию шапки сайта

Шапка сайта очень важна

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

Обязательные элементы дизайна

01

Логотип

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

Не делайте логотип «центровым» элементом главной страницы — вашему клиенту важно решить свою проблему, а не оценить старания дизайнера. Самое важное — это соответствие запросу и ожиданиям;  релевантность  главной страницы и сайта вообще, если объявление контекстной рекламы ведет сюда.

С первого взгляда на шапку пользователь должен понимать, куда пришел и что может получить здесь.

 

02

Краткое описание

Оно всегда расположено рядом с логотипом. Это емкий текст о том, чем именно занимается или почему выгодно сотрудничество с компанией/магазином (уникальное торговое предложение).

 

03

Номер телефона

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

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

 

04

Часы работы

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

 

05

Адрес

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

 

06

Обратный звонок

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

 

07

Корзина, Личный кабинет

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

 

08

Кнопка

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

 

Дизайн сайтов Сумы

 

Общие рекомендации

  • Шапка не должна занимать весь первый экран, даже если это изображение вам очень нравится. Высота, по возможности, до 250 пикселей.
  • Не используйте теги H1-H6 для текста шапки, т. к. это может повлиять на оптимизацию.
  • Если у вас много текстовых материалов и ассортимент свыше 10-ти товаров, в шапке сайта должен присутствовать поиск.
  • Помните, что шапка будет одинаковой на всех страницах сайта. Следите за тем, чтобы она не контрастировала с другими страницами.
  • Пункт меню «Главная» сохраните, т. к. не все кликают по логотипу, чтобы вернуться на главную.
Поделитесь:
Теги:

Заказать разработку сайта

Хотите бесплатную консультацию
по созданию сайта?

Укажите номер телефона
и мы Вам перезвоним: