Загрузка...
+7 495 638-52-67 +7 495 950-57-99

Проектирование шапки сайта – нюансы

Проектирование шапки сайта – нюансы
Проектирование шапки сайта – нюансы

Проектирование шапки сайта – важные особенности

Как известно, многое, чуть ли не все, решает первое впечатление, и дизайн сайта – не исключение. Сегодня поговорим о том, что такое шапка сайта (header), и как правильно ее спроектировать.

Хедер веб-сайта – что это такое?

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

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

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

Базовый набор элементов шапки сайта

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

Дизайн шапки для сайта – особенности

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

1. Беглый просмотр страницы целиком, пока взгляд не зацепит что-то интересное. Если взор ничего не приметит, посетитель уходит с сайта. Дизайнеры, ориентирующиеся на данную категорию аудитории, проектируют шапку веб-проекта с простым информационным полем, обладающим невыраженной зрительной иерархией. Шапка, оформленная по данному типу, условно разделена на 4 активные области, визуально образующие квадрат.

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

3. Третья модель представлена в виде F-образной схемы движения взгляда. Как правило, ей типично подробное и медленное изучение материалов веб-ресурса.

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

Возврат к списку

Заполните форму
Ваше имя*
Ваш E-mail*
Сообщение*
Защита от автоматических сообщений
CAPTCHA
Введите слово на картинке*