Как оформить хедер сайта?

Автор /  Elena Rabkina

26 апреля 2018

Как оформить хедер сайта?

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

 

 

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

 

В классическом макете header находится на самом верху страницы и содержит самую основную информацию о вашем продукте, а также ключевые элементы навигации:

 

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

 

 

юкрафт сайт сумки

https://www.ucraft.ru/demo/kashve

 

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

 

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

 

 

Основные элементы хедера сайта

 

1. Логотип

 

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

 

юкрафт баскетбольный сайт

https://www.ucraft.ru/demo/o-neal

 

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

 

 

2. Краткое описание компании или продукта

 

2-3 слова или короткий девиз обычно располагают под логотипом или справа от него. Этот текст является своеобразным уникальным торговым предложением, которое должно показать пользователю, чем именно вы занимаетесь. Если у вас еще нет слогана, обязательно придумайте его. И сделайте небанальным.

 

юкрафт сайт продуктов

https://www.ucraft.ru/demo/jungleband

 

 

3. Номер телефона и часы работы

 

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

 

Если вы работаете на несколько регионов, подключите бесплатный для звонков клиентов номер 8-800 и укажите в хедере, что номер бесплатный. Нелишним будет написать номер текстом, а не вставлять его в виде картинки: так люди смогут скопировать номер, а не набирать вручную.

 

Работает круглосуточно и по выходным? Подчеркните это надписью в шапке.

 

 

4. Навигация

 

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

 

юкрафт сайт спа

https://www.ucraft.ru/demo/clair-de-lune

 

 

Необязательные элементы шапки сайта

 

К информации, которую можно и не размещать в хедере, относится:

  • адрес;
  • личный кабинет;
  • корзина;
  • поиск по сайту;
  • кнопка call-to action;
  • фотография или изображение в качестве фона.

 

Правила оформления хедера:

 

  1. Высота шапки должна доходить до 250 пикселей. Не стоит делать ее слишком большой.
  2. Не используйте теги H1-H6, так как это может повлиять на оптимизацию, а также следите за количеством шрифтов в заголовке — лучше, если он будет один.
  3. Если на лендинге более 10 товаров и много текста и других страниц, в шапке должен присутствовать поиск.
  4. Шапка должна правильно отражаться не только на дэсктоп-версии сайта, но и в мобильной.

 

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

 

 

#Заметка

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