Что такое хедер и футер?

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

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

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

Шапка сайта обычно вмещает в себя:

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

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

Разнообразие оформления хедера:

• Классическое:логотип слева сверху, внизу – горизонтальное меню с иконками для улучшения восприятия и украшения, также присутствует кнопка поиска и корзины.
• Двойное меню:содержит основное и всплывающее меню, которое открывается при наведении. Оно подходит для крупных сайтов с большим количеством страниц.
• Большое изображение:используется для сайта, цель которого презентация товара или личности. Это хороший способ обратить пристальное внимание.
• Анимация: многие современные дизайнеры прибегают к использованию анимаций, чтобы усилить эффект привлекательности и запоминания. Но нужно быть с этим осторожными, так как этот инструмент подходит не для всех сферах деятельности.
• «Гамбургер»:понятие, которое используется по отношению к меню сайта. Это небольшой значек в виде трех полосок, нажимая на который открывается полное меню. Он используется для того, чтобы не красть внимание от главного акцентного элемента сайта. Это выглядит просто и лаконично.
• Стилизованное оформление или шапки в виде иллюстраций: нестандартный способ подачи информации точно запомниться, но нужно быть очень осторожным с этим, так как пользователь может не сразу понять как этим пользоваться.

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

Что может содержаться в футере:

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

Основные принципы создания хедера и футера:

1. Обратите внимание к типографике: правильно подобранные шрифты, которые будут хорошо читаться, интервалы и отступы.
2. Если концепция дизайна позволяет, сделайте хедер фиксированным, а футер отличительным от общего контента.
3. Учитывайте важность иерархии: обдумайте наличие и расположение всех элементов, которые планируете поместить, чтобы пользователю было легко разобраться и найти необходимую ему информацию.
4. Кнопки и поля обратной связи должны содержать понятную для пользователя надпись и быть заметной среди других элементов.

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