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

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

Footer (подвал сайта) – самая нижняя часть сайта, предназначенная для логического завершения страницы, размещения дополнительных разделов и облегчения навигации.

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

В шапке сайта могут быть размещены следующие элементы:

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

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

1. Не забывайте о типографике. Посетитель в первую очередь прочтет названия разделов и предоставленную на сайте информацию: предложения товаров и услуг, описания преимуществ, контактные данные. Поэтому выбор читабельного шрифта, улучшающего восприятие информации, является очень важным.
2. Учитывайте назначение и стиль сайта. Если сайт предназначен для презентации продуктов и услуг компании, дизайн хедера может быть ограничен ссылками на основные разделы сайта. В случае с торговыми платформами, службами доставки, интернет-магазинами, этого недостаточно. Пользователь должен легко ориентироваться на сайте, иметь возможность легкой связи с диспетчером или менеджером, а также возможность доступа к личному кабинету.
3. Уделите особое внимание расположению элементов. Логотип компании лучше размещать в левом верхнем углу или в центре, а кнопку для обратной связи и контактные данные — в правом. Это существенно улучшает юзабилити и облегчает ориентирование, поскольку такое расположение элементов является общепринятым.
4. Разработайте особый дизайн для кнопки и формы обратной связи. Создавая хедер сайта, дизайнер размещает в нем кнопку призыва к действию и связанную с ней форму для внесения данных. Для привлечения внимания посетителя и совершения ним целевого действия кнопка должна содержать понятную надпись и быть заметной среди основного контента. Форма обратной связи должна содержать только необходимые поля и, по возможности, препятствовать ошибочному заполнению.

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

• предоставляет посетителю информацию о компании и ее услугах;
• направляет посетителя;
• помогает совершить целевое действие;
• визуально завершает дизайн.

В подвале сайта могут размещаться следующие элементы:

• карта сайта – список всех страниц на сайте с указанием разделов. Этот элемент является одним из важнейших для навигации на сайте. Если количество страниц сайта велико, применяется выпадающее меню или размещаются ссылки на наиболее популярные разделы;
• элементы навигации – для улучшения навигации в футере могут размещаться дополнительные элементы, облегчающие перемещение по сайту;
• ссылки на социальные сети – размещение ссылок на группы и профили компании в социальных сетях обеспечивает дополнительный приток посетителей и удерживает внимание пользователей, оповещает их об акциях, рассказывает о товарах и прочее. Как правило, ссылки оформляются в виде кликабельных иконок;
• призыв к действию – некоторые дизайнеры размещают в подвале блок с призывом к действию, чтобы еще раз подтолкнуть клиента к акцепту предложения компании;
• контактная информация – в подвале как правило размещается развернутая информация: несколько телефонных номеров различных операторов, адрес электронной почты, связь через мессенджеры, полный адрес компании и ее расположение на карте;
• стилизованное оформление – сайт может быть завершен оформленным в корпоративном стиле подвалом с контактными данными.

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

Приведем несколько рекомендаций по разработке дизайна футера:

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