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

logo

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

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

Зачем нужен хедер?

Шапка сайта выполняет несколько важных функций:

  • Дает пользователю понять, куда он попал. Хедер предоставляет первичную информацию о проекте ― логотип, название сайта/компании/проекта, слоган и базовые элементы брендинга. 

  • Указывает основную контактную информацию.

  • Формирует первое впечатление о проекте.

  • Является элементом навигации: на логотипе в шапке внутренних страниц сайта обычно размещается ссылка на главную страницу, что повышает удобство навигации по сайту.  

Что размещать в шапке сайта

К основным элементам шапки сайта относятся:

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

  • Слоган или очень короткое описание проекта. Оно должно помещаться в несколько слов. Например, «аренда авто» или «ремонт телевизоров». 

  • Регион работы. Если вы работаете только в одном городе или определенном регионе, то желательно это указать в шапке сайта. 

  • Основные контактные данные. Укажите номер телефона с кодом города и время работы компании, чтобы клиенты могли быстро с вами связаться. При наличии физического магазина укажите его адрес в хедере. Если бизнес предполагает частое общение по электронной почте, то добавьте в шапку сайта адрес корпоративного почтового ящика для общих вопросов. 

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

  • Личный кабинет. На сайте предусмотрен личный кабинет? Тогда добавьте кнопку входа в него в шапку сайта ― обычно все привыкли находить её в правом углу.

  • Корзина. В шапке интернет-магазинов размещается кнопка корзины с индикатором количества выбранных товаров.

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

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

Что не стоит размещать в хедере

Следующие элементы для шапки сайта не подходят:

  • Соцсети. Ни к чему сразу уводить клиента с сайта на внешние площадки. Поэтому ссылки на социальные сети компании лучше оставить в подвале сайта.

  • Крупные изображения. Хорошая шапка сайта отличается своей компактностью, она не мешает пользователю знакомиться с основной информацией страницы.

    8-800-5555-864

    Бесплатно по РФ

    +7 (495) 662-87-59

    Для звонков из Москвы

    +7 (812) 309-68-23

    Для звонков из Санкт-Петербурга