+7(982) 597-7179

Шапка сайта

25ukns4o8v

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

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

 

«Шапка сайта — это титульная часть дизайн-макета веб-страницы.  Основное назначение этого элемента – дать четкое обозначение начала страницы.» sem-online.ru

 

С точки зрения маркетинга и дизайна.

Шапка —  это первый экран сайта. То, что посетитель  видит в первую очередь. Поэтому впечатление, которое оказывает первый экран и будет решающим фактором в просмотре дальнейшей информации.

 

С точки зрения юзабилити.

Сайт по своей структуре отдаленно напоминает книгу.  Логотип, содержание — меню, заголовок, основной текст и т.д. есть и в книге, и в сайте. Шапка сайта должна содержать основную (краткую) информацию о своей структуре и о сайте в целом.

 

Примеры шапок сайта

 

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

шапка сайта шапка сайта шапка сайташапка сайта5

 

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

 

Правила цепляющей шапки

Логотип.

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

 

Контакты.

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

 

Навигация.

Меню с основной навигацией обязано находится в шапке. Даже в одностраничнике(loading page) дизайнеры вставляют ссылки с якорями. Рекомендуют основное меню сделать горизонтальным. А вертикальные меню обычно делают для каталогов и интернет-магазинов.

 

Фон шапки.

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

 

Девиз.

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

 

 Ошибки и их решения по шапкам сайтов

 

Большая шапка.

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

 

Искажения изображений.

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

 

Избыток картинок.

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

 

Плавающая шапка

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

 

Реклама в шапке.

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

 

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


Приглашаем поучавствовать в обсуждении статьи:

Комментариев 0

Войти с помощью: