Как называется верхняя часть сайта

Header и footer: основные принципы создания шапки и подвала сайта

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

Шапка и подвал сайта: что такое, назначение

Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.

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

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

Пример футера сайта:

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

Что размещают в хедере сайта

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

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

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

Рассмотрим несколько примеров хедеров и остановимся на их особенностях.

Примеры дизайна шапки сайта

Классический вид

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

Двойное меню

В тех случаях, когда ресурс крупный и содержит множество страниц, прибегают к такому приему, как двойное меню.

В интернет-магазине как правило большое количество товаров и категорий, поэтому магазин «Эльдорадо» разбил меню на две части: основное и выпадающее при наведении.

Большое изображение: фото личности или продукта

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

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

Анимация

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

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

Меню «гамбургер»

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

После нажатия на значок, появляется страница с меню:

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

Шапка на главном экране

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

Шапка-иллюстрация

Иногда дизайнеры отходят от стандартного представления шапки профиля и встраивают навигацию в виде иллюстрации, где ссылки размещены на отдельных объектах. Например:

Это интересное дизайнерское решение, однако, клиент не сразу понимает, как взаимодействовать с интерфейсом, поэтому нужно использовать такие приемы с осторожностью.

Стилизованная шапка

В том случае, если дизайн сайта выполнен в каком-то определенном стиле, нередко шапку сайта также делают стилизованной. На этом примере в хедере расположены известные здания Москвы, с ссылками на страницы с описаниями:

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

Страница без шапки

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

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

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

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

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

1. Обращайте внимание на типографику

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

2. Принимайте во внимание стиль сайта и его назначение

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

3. Обращайте внимание на расположение элементов

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

4. Уделите внимание кнопке и веб-форме обратной связи

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

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

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

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

Зачем нужен подвал сайта

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

Зачем нужен футер?

1. Визуально завершает дизайн

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

2. Помогает совершить целевое действие

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

3. Направляет пользователя

Дочитав очередную статью пользователь может не возвращать к шапке сайта, а найти нужную информацию в футере.

4. Предоставляет пользователю нужную информацию о компании

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

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

Примеры дизайна подвала сайта

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

Карта сайта

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

Контактная информация

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

Элементы навигации

Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:

Ссылки на социальные сети

Социальные сети — один из основных инструментов продаж для многих компаний. Разместив ссылки на основные группы и профили компании в социальных сетях, можно получить дополнительный приток клиентов и удерживать внимание пользователей через соцсети, оповещать об акциях, рассказывать о товарах и прочее. Обычно ссылки оформляются как кликабельные иконки.

Призыв к действию

Чтобы подтолкнуть клиента к целевому действию, некоторые дизайнеры размещают в подвале блок с призывом к действию:

Стилизованное оформление

Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:

Без футера

Как и в случае с хедером, некоторые решения не предусматривают использования подвала сайта:

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

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

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

1. Делайте футер отличным от общего контента сайта

Чтобы выделить элемент навигации, обратить внимание на контактные данные, дизайнеры обычно делают футер темного цвета или как-то выделяют его из общего фона.

2. Обращайте внимание на типографику

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

3. Учитывайте важность иерархии

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

Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».

Строение сайта. Из чего он состоит?

К вопросу о строении сайта можно подойти с разных сторон: с технической точки зрения (профессиональной) и визуальной (пользовательской). В классическом виде любой сайт технически состоит из нескольких элементов:

• дизайн;
• верстка;
• программный код;
• серверная часть;
• клиентская часть;
• контент;
• система управления содержимым или CMS;
• доменное имя;
• хостинг.

Рассмотрим основные технические компоненты и строение сайта.

1. Дизайн сайта отвечает за визуальное представление и организацию информации, способствует взаимодействию ресурса с его посетителями. Отвечающим за создание дизайна специалистом обычно является веб-дизайнер. Именно он должен спроектировать логическую структуру всех страниц сайта, разработать способы подачи материала и проработать внешнее оформление ресурса. Для каждой страницы дизайн разрабатывается отдельно в зависимости от ее функций. Например, у сайта интернет-магазина есть страница, где представлен товар, а также страница с пользовательской корзиной. Естественно, что эти директории по логике своего оформления должны быть разными. Цель размещения корзины — способствовать быстрому и удобному совершению покупок, а страницы, представляющей товар, — ознакомление со свойствами продукта, сравнение его с другими товарами.
2. Верстка представляет собой процесс написания особого кода для браузеров. У такого файла расширение html, и отображается он только в браузерах. Нужно следить, чтобы сверстанный макет одинаково выглядел во всех браузерах, будь то Opera, Mozilla Firefox, Google Chrome или Internet Explorer. Дополнительно можно узнать о таком термине, как «валидность верстки» в специальной статье о ней.
3. Программирование составляет примерно 50-70% работы над сайтом. Программная часть ресурса – довольно обширное понятие. Программирование отвечает за то, чтобы многочисленные страницы сайта отображались с одинаковым дизайном, но разным содержимым. Также программный код ответственен за визуальные эффекты и многое другое. Благодаря ему сайт становится «живым» и динамичным.
4. Веб-сервер – это компьютер с установленным на нем программным обеспечением, которое предназначено для того, чтобы отвечать на запросы веб-клиента круглосуточно в режиме реального времени. Под веб-клиентом подразумевается браузер, который отправляет серверу запрос на определенную страницу, и если она доступна, то пользователь может увидеть ее. Чтобы пользователь увидел нужную ему страницу, его браузер должен получить от сервера соответствующий html-код. После чего код и все визуальные элементы распознаются и предстают перед пользователем в виде готовой понятной любому страницы.
5. Клиентская часть представляет собой код, загружаемый вместе с кодом html. Это может быть CSS, JavaScript, ActionScript.
6. Контент сайта, то есть все содержимое сайта. Сюда входят тексты, картинки, видео, flash и прочие файлы. Контент часто путают с элементами дизайна, но это совершенно разные вещи. Оформление сайта отвечает на вопрос «как разместить», а контент отвечает на вопрос «что разместить». Что касается текстового наполнения, то именно оно наполняет любой веб-ресурс смыслом, благодаря которому пользователи могут найти сам сайт в поисковых системах. Интересный контент – это ключ к увеличению посещаемости, читаемости и коммерческих показателей, таких как звонки, продажи или подписки на e-mail рассылки.
7. CMS тоже можно отнести к одному из элементов сайта. Система управления содержимым позволяет управлять всеми элементами ресурса через административную часть. Использование CMS не обязательно, однако оно необходимо всем, кто хочет самостоятельно контролировать и редактировать содержимое сайта. Существует целый ряд разнообразных CMS, отличающихся друг от друга удобством пользования, набором свойств и принципами работы.
8. Доменное имя и хостинг. Доменное имя – это уникальный адрес сайта в Сети (например, www.site.by). А хостинг – это услуга, которая предоставляется специальными компаниями, хранящими на своих серверах все необходимые для работы сайта данные. Без этих компонентов строение было бы неполным, а сам сайт — недоступен для пользователей и посетителей. Хостинг предполагает выделение свободного места на сервере для размещения и хранения какого-либо сайта. Чтобы владелец был уверен в том, что его сайт всегда виден пользователям Интернета, он обязательно должен обзавестись уникальным доменным именем, а также надежным хостингом. Чтобы выбрать правильный хостинг, предлагаем Вам прочитать нашу статью с более подробными рекомендациями.

Визуальные части сайта

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

Верхняя часть. Шапка. Что и зачем?

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

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

Боковые части. Левая или правая – как лучше?

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

Центр – лучшее место для контента

Центральная часть любого сайта или body (с англ. — тело) представляет собой самый большой блок, на котором лучше всего разместить необходимый контент: видео, картинки, текст и прочие полезные пользователям материалы. В центральной части сайта пользователи визуально проводят наибольшее количество времени. Если проводить аналогию с известной пословицей, то по шапке сайт встречают, а провожают по телу. Действительно, если контент ресурса неинтересен или неуникален, то каким бы хорошим он ни казался с первого взгляда, пользователь все равно из него уйдет.

Нижняя часть – место для того, что не уместилось выше

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

Послесловие

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

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

Составные части сайта

Большинство сайтов состоят из нескольких частей. В зависимости от стиля страницы и её задач, этих частей может быть больше или меньше, но обычно они включают в себя следующее:

• шапка — верхняя часть страницы
• главная часть — место, где расположена информация по теме страницы
• подвал — нижняя часть сайта
• навигация — инструмент дизайна, который позволяет пользователям переходить из одного раздела сайта к другим

Шапка

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

Главная часть

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

Подвал

Подвал — это нижняя часть сайта. В нём обычно размещают информацию, которая не нужна пользователю сразу, но которая может быть полезна после просмотра главной части. Это может быть дополнительное меню, элемент call to action, который побуждает клиента приобрести описанный продукт, или новые записи в блоге, которые дают пользователю повод задержаться на сайте.

Навигация

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

Меню

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

Навигация гиперссылок

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

Свяжитесь с нами

улица Лачплеша, д. 87,
город Рига, LV-1011, Латвия
+371 2893 6776
Отправить нам письмо

Как называется шапка сайта – почему так важен верх веб страницы

Как называется верхняя часть сайта и зачем она нужна? Как называть неподвижную часть web ресурса в самом верху экрана? Зачем создана это область — главное предназначение и причина появления.

Так называемая «шапка» сайта или одностраничника (landing page), называется – «хедер» (от англ. «head» – глава). Подобную терминологию, чаще всего, используют веб мастера и специалисты по созданию сайтов. Люди, не имеющие отношения к сайтостроению, так и называют верхнюю часть — «шапкой».

Верхняя часть сайта, хедер – зачем нужен

Рассмотрим этот вопрос со стороны обыкновенного пользователя. Человека, не имеющего отношения к реализации веб площадок.

Хедер – неподвижная, верхняя часть сайта, в которой, как правило, располагается самая важная информация: логотип, адрес компании, контактные номера телефонов.

Именно поэтому «шапку» закрепляют и делают ее неподвижной, титульной на всех страницах сайта. Ведь, разумно, когда все главное располагается «на виду».

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

«Зачем узнавать?» — спросите вы. Ведь, находясь на сайте человек и так понимает, что читает и где находится.

На самом деле, при органическом поиске через различные системы Яндекс или Гугл – пользователь сразу попадает на запрашиваемую страницу, минуя «главную» страничку или раздел «о нас».

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

Как вы поняли, подобная структура особенно актуальная для крупных информационных порталов, досок объявлений, образовательных ресурсов.

Хедер – а что за ним?

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

Как в примере о Википедии, выпадающее меню вполне может размещаться прямо в середине шапки сайта. Но, это скорее исключение из правил.

После основного, верхнего меню, располагается остальная информация и «тело» статьи.

Современные сайты предполагают кликабельные хедеры:

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