Как называется меню сайта вверху
Хедер
сайтаХедер – это верхняя плашка, шапка Сайт Название «header» также используется в значениях «заголовок» и «колонтитул». Одним словом – элемент, который находится выше остальных. В сайтостроении и веб-дизайне под хедером понимают область страницы выше контентной части.
Если использовать аналогию с архитектурой, то подвал – это футер, стены дома с окнами и дверьми – это область контента, а крыша – хедер.
В маркетинге и веб-дизайне шапка сайта выступает первым элементом, на который обращают внимание посетители. У хедера в распоряжении 3-4 секунды, чтобы заинтересовать пользователя. Далее мы в деталях разберем, почему так важна эта область на странице? Рассмотрим основные принципы создания запоминающейся шапки сайта в теории и на примерах.
Почему хедер так важен
Можно ли обойтись без шапки сайта? Да, можно. Но – зачем? Давайте разбираться. Коммерческие сайты, да и вообще любые ресурсы в сети создаются с какой-то целью. В первую очередь – привлечь внимание посетителей. А далее – вызвать интерес контентной частью и побудить человека к целевому действию – покупке, заказу, звонку.
Всё точно как по формуле AIDA: (A) внимание – (I) интерес – (D) желание – (A) действие.
Так вот хедер на сайте – это как раз область захвата внимания посетителей. Давайте рассмотрим, как новый пользователь видит сайт. Многочисленные исследования вывели три модели восприятия контента на странице:
Диаграмма Гутенберга – посетитель изучает страницу зигзагом. Сначала он фиксирует взгляд на левом верхнем углу шапки сайта, затем проводит глазами слева направо в правую точку страницы. Дойдя до конца строки, спускается по диагонали в нижнюю точку и завершает свое ознакомление просмотром подвала сайта слева направо. Получается Z-фигура. Так вот первые впечатления в мозгу человека формируются на этапе просмотра хедера сайта. Если информация не нашла отклика у посетителя, он в 90% закроет страницу.
Z-паттерн – модель схожа с диаграммой Гутенберга. Посетитель также просматривает страницу зигзагом, но этих зигзагов больше одного. Такая модель восприятия часто встречается на ресурсах с блоковой структурой контентной части.
F-паттерн – пользователь изучает контент слева направо, начиная с шапки сайта. Затем он переходит вертикально вниз на одну ступеньку, как бы спускаясь с крыши. Этажом ниже он также изучает информацию горизонтально, то есть слева направо. Соответственно если два первых этажа не заинтересовали пользователя, дальше он читать не будет.
Как вы заметили, при любой модели восприятия, знакомство с сайтом начинается с хедера. Страница, которая не сумеет приковать взгляд посетителя и доходчиво объяснить суть за 3-4 секунды, будет провальной. В условиях жесточайшей конкуренции в интернете, второго шанса создать хорошее впечатление может и не представится.
Именно поэтому шапка сайта – обязательный элемент на каждой странице сайта. Но здесь важно понимать, что хедер на главной и на внутренних страницах должен отличаться. Речь идет не о новом дизайне, а о полном и сокращенном варианте отображения. Например, на главной используйте шапку с максимальным набором элементов. А вот на внутренних страницах применяйте сокращенный вариант. Достаточно отобразить лого, меню, телефон.
Что размещают в хедере?
С важностью шапки сайта разобрались. Рассмотрим, что может и должно быть в хедере для лучшего восприятия страницы пользователем.
Это блоки контента, которые встречаются в 95% хедеров сайтов. Landing Page и одностраничники могут быть и без меню.
Вы уже догадались, что попытка «впихнуть» все элементы в шапку сайта – это признак безвкусицы. Хедер должен привлекать, но в тоже время он не должен отталкивать посетителя от главной информации. Всегда помните о трех золотых правилах при создании шапки сайта – стильно, просто, функционально!
Главные принципы создания хедера
Чтобы создать действительно привлекательный и функциональный хедер придерживайтесь следующих принципов:
Каким должен быть header с точки зрения дизайна? Шапка должна сочетаться с общим оформлением сайта. Хорошо, когда дизайнеру предоставляется брендбук компании. Тогда он может использовать готовые фирменные цвета, шрифты и другие элементы визуальной айдентики.
Что делать, когда фирменного стиля, как такового, нет? В этом случае изучите тематику проекта, подберите подходящие изображения и цветовую гамму. Например, для корпоративной среды подходят приглушенные тона: серо-голубой, серый, белый и другие цвета.
А вот если разрабатывается хедер для ниши B2C, то стоит использовать яркие цвета и тематические изображения. Например, лендинг по обслуживанию стиральных машин может иметь шапку в бело-голубой гамме. Не лишним будет в хедере отобразить фото стиральной машинки и рядом мастера с улыбкой на лице. Это поможет идентифицировать сайт за 2-3 секунды.
Уделите также особое внимание созданию логотипа. Он должен сжато, но максимально понятно отображать суть проекта, бизнеса. Например, для сервиса стиральных машин – это может быть схематичное изображение стирального барабана и разводного ключа. Конечно, существуют темы, которые сложно отобразить графически. Скажем, маркетинг или реклама. В этом случае на помощь приходит название бренда, описание и слоган.
Дизайн шапки на примерах
Рассмотрим несколько примеров хедеров разной направленности.
Header для медиаперсоны
Известная личность, звезда экрана, шоумен или шоувумен – словом, человек-бренд – всегда отображает на главной странице свой образ.
На сайте Ани Лорак видим, собственно, саму медиа-персону и довольно минималистичный дизайн с меню, логотипом-именем звезды. Ниже ссылки на аккаунты в соцсетях и переключатель языковой версии сайта.
Другой пример хедера медиаперсоны – сайт Ольги Бузовой.
Еще более минималистичный дизайн. Фото телезвезды, имя в качестве логотипа, ссылки на аккаунты в соцсетях. Ниже телефон для связи с администратором Бузовой по вопросам творческой и общественной деятельности.
Хедер для интернет-магазина
Задача шапки в онлайн-магазине – привлечь внимание посетителей и направить их в каталог или на страницу популярных товаров. Смотрим пример интернет-магазина обоев.
Мы видим интерьер комнаты со стильными обоями. Логотип помещен посередине, справа контакты и кнопка/ссылка «Заказать звонок». Слева – описание, что это интернет-магазин стильных обоев. Маркетологи попытались позиционировать онлайн-магазин на элитную аудиторию. Посередине кнопка «Получить каталог».
Другой пример зарубежного сайта с шапкой в минимализме.
Здесь мы видим слева логотип и название бренда, справа – меню, поиск и корзину. Ниже два изображения товара из коллекции, кнопка перехода в каталог. В правом нижнем углу кнопка «Написать сообщение». Всё!
Шапка для сервисных сайтов
Рассмотрим пример сайта компании, которая оказывает мелкий и срочный ремонт на дому – «муж на час».
Видим логотип посередине хедера, слоган. Справа – описание деятельности, слева телефон и кнопка «Заказать звонок». Ниже картинка улыбающегося мастера с «золотыми руками» и рядом оффер с кнопкой «Получить консультацию». Всё просто, но эффективно.
Более сложный пример с клининговой компанией.
В шапке стандартно слева направо размещены логотип, описание деятельности, телефоны и ссылка на карту «Как до нас добраться». Ниже помещается довольно большое меню. Под ним тематическая картинка: кухня блещущая чистотой и сам мастер чистоты с инструментами. Также слева дополнительное вертикальное меню.
Ещё один пример сервисного сайта – грузоперевозки.
Хедер для корпоративного сайта
Рассмотрим один пример шапки сайта компании по оказанию консалтинговых услуг в сфере IT.
Обратите внимание на цветовую гамму хедера. Серые и зеленые тона. Серый цвет придает ощущение стабильности, а зеленый – фирменный цвет компании. В левом верхнем углу располагается логотип, посередине описание деятельности, справа область контактов и обратной связи. Здесь размещается и поле поиска. Меню расположено ниже. Удачно подобраны картинки – улыбающиеся сотрудники располагают к заказу консультаций.
Резюме
Мы изучили, что такое хедер сайта. Познакомились с его ролью для поисковых систем и посетителей. Рассмотрели основные принципы создания шапки, и примеры реализации этих правил. Важно запомнить простую аксиому: если человека встречают по одежке, то сайт – по хедеру.
Из чего состоит сайт в интернете?
Здравствуйте уважаемые посетители! С вами на связи Максим Обухов и сегодня вы узнаете, из чего состоит сайт?! Данная информация будет полезной для людей решивших заниматься веб-сайтами!
Что такое web-сайт в интернете? Это место где располагается информация в виде текста, графики, видео и других подобных элементов, помогающих пользователю ответить на нужный вопрос.
Основная задача веб проекта – это дать человеку то, что он ищет!
Строение веб сайта
Стандартный интернет ресурс состоит из нескольких основных частей и элементов. Я выделяю 2-а модуля, это внешний и внутренний.
Из чего состоит внешняя часть сайта?
Состав внешнего модуля:
Ниже для наглядности нарисована схема из чего состоит сайт
Из этого рисунка прекрасно видно как устроен интернет ресурс, точнее его лицевая оболочка. Это простая стандартная блоговая модель. На самом деле элементы сайта могут находиться в разных местах. Но как не крути без той же контентной части или шапки с футером не обойтись.
Верхняя часть сайта
Следующее что входит в его состав это контентная часть.
Средняя часть сайта (контент)
Что такое контент? Это текст, картинки, видео и прочее. Основа это чаще текст. Он должен быть хорошо написан и быть структурированным. Но главное что бы отвечал на вопрос пользователя. Давал ему то, что он хочет.
Интернет проект должен содержать равномерное количество картинок. Не должно быть слишком много рекламы.
Итак, какая же структура должна быть у статьи?
Вот стандартная структура:
Titel – Заголовок статьи
H1 – Главный заголовок в статье
Абзац №1
H2 – под заголовок
Абзац №2
H3 – подзаголовок второго заголовка то есть H2
Абзац №3
Главное не нарушайте эту иерархию.
Подвал сайта или футер
Это самая нижняя часть веб-сайта. Чаще всего в нее помещаются какие-то не очень важные страницы. Это может быть карта сайта или краткое описание об авторе, политика конфиденциальности и прочее. Иногда там можно разместить рекламу.
Еще в футер помещают предупреждение о том, чтобы не копировали материал или копировали, но оставляли обратную ссылку на статью. И еще некоторые вебмастера указывают дату создания сайта. Таким образом, футер неплохо подходит для выше перечисленных нужд.
Боковики сайта или сайтбары
Чаще всего в боковых областях размещают рубрики, в которых владелец помещает статьи. Кроме этого туда можно поместить картинки, видео, рекламу, гаджеты, музыку, флеш игры и многое другое.
Иногда вебмастера обходятся без боковиков и в некоторых случаях это правильно.
Меню web сайта
Неотъемлемой частью является меню. Оно может располагаться над контентом, под контентом, в подвале, в сайд барах.
Я использую меню вверху и в боковиках в других областях сайта меню пока не использовал.
Дизайн веб сайта
О внешнем виде ходит много слухов и легенд. Многие утверждают, что он влияет на продвижение и поисковики такие веб проекты ранжируют выше. Но я с этим не совсем согласен. Не важно, какой вид у интернет ресурса, главное, что бы доступ к информации ни чего не преграждало. То есть нормальным должен быть шрифт, цветовая гамма и структура. Что бы до нужной информации человек смог дотянуться в пару кликов.
Конечно, у красивого дизайна есть плюс. Пользователи будут дольше оставаться на сайте. Если вы будете писать и наполнять проект статьями достаточно часто, то красивый дизайн себя оправдает. Ну а если раз в месяц, то смысла в нем нет. Но красивый вид как я уже ранее сказал, не очень важен. Если у вас хороший полезный контент, то пользователи к вам и так будут заходить пачками.
Фавикон или иконка
Этот элемент сайта придает ему узнаваемость и выделяет среди всей остальной массы. Обычно он имеет прямоугольную форму 32*32 пикселя. Но может быть и другой величины. Поисковая система Яндекс учитывает наличие фавикона.
Наверняка вы замечали, в поиске выходят сайты и напротив каждого появляется картинка. Это и есть иконка веб ресурса.
Логотип сайта
Это некая эмблема, можно сказать символ. Чаще всего он встраивается в шапку, в которой уже есть картинка. Либо шапка пустая и тогда виден один логотип. В качестве логотипа можно использовать и шапку. Просто в некоторых шаблонах Word Press есть возможность вставить логотип, а в некоторых нет.
Ну, вот вы и узнали, из чего состоит веб-сайт снаружи, а теперь рассмотрим что в нутрии!
Из чего состоит внутренняя часть сайта?
Состав внутреннего модуля не заметного для глаза пользователя:
Доменное имя или название сайта
Доменное имя web сайта, по сути, это его адрес. Например, у моего блога адрес выглядит так: webmixnet.ru. Ру означает зону интернет ресурса и говорит о том, что основная аудитория это население России. Есть еще зоны com, net, ua и многие другие.
Каждый приобретает себе домен в той зоне, которая ему наиболее подходит. Основные требования к домену: 1) Он должен быть не слишком длинным до 12 символов; 2) И желательно, чтобы в нем был основной ключ вашей темы, но это не так критично; 3)Он должен быть хорошо запоминающимся.
Хостинг сайта
Это место где хранятся все файлы проекта. Web сайт может быть создан на компьютере, и даже статьи можно сразу залить. Но что толку от файлов на компе? Дальше идем в любой регистратор хостингов, самый удобный это beget.com
Выбираем тариф, берем и загружаем туда все файлы сайта. Кстати на Бегете дается 30 дней бесплатно! Конечно, этого мало что бы проект заработал, нужно еще привязать домен. В связке эти два элемента дают нам возможность пользоваться полноценным интернет ресурсом.
Движок или система управления контентом
На чем же работает сайт? А работает он на CMS или движке. Подобная штукенция нужна для того, что бы быстро получить доступ к вашему проекту. Это очень удобно, в пару кликов мышкой можно опубликовать статью или добавить рекламный блок.
Вот варианты движков:
Использование этих движков зависит от ваших нужд. Если вам нужен блог или сайт то, пожалуйста, WordPress и ему подобные движки к вашим услугам. Ну а если вам нужен интернет магазин используйте OpenCart.
Движок для сайта позволяет упростить работу и сделать ее комфортней! Таким образом теперь вы знаете из состав виртуального проекта!
Строение сайта html
Подобное строение ничем особым не отличается от проекта на движках. Ведь у всех сайтов один и тот же скелет, выполненный на Html.
Вот основной стандартный код простейшего сайта без всяких стилей:
Header и footer: основные принципы создания шапки и подвала сайта
Шапка и подвал сайта: что такое, назначение
Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.
Пример футера сайта:
Что размещают в хедере сайта
В шапку сайта могут помещать следующие разделы:
Не все элементы должны присутствовать в хедере. Дизайн шапки профиля ограничивается только представлениями дизайнера, нет каких-то обязательных объектов. Однако, некоторые элементы существенно повышают уровень конверсии: если в шапке размещены контакты и кнопка для обратной связи, вероятность отклика пользователя значительно повышается, так как эти элементы видны клиенту в первую очередь.
Рассмотрим несколько примеров хедеров и остановимся на их особенностях.
Примеры дизайна шапки сайта
Классический вид
Двойное меню
В тех случаях, когда ресурс крупный и содержит множество страниц, прибегают к такому приему, как двойное меню.
В интернет-магазине как правило большое количество товаров и категорий, поэтому магазин «Эльдорадо» разбил меню на две части: основное и выпадающее при наведении.
Большое изображение: фото личности или продукта
Например, так выглядит сайт Ани Лорак. Внимание обращено на личность певицы, поэтому размещаются ее фотографии крупным планом. При скроллинге шапка трансформируется и превращается в обычную горизонтальную линию:
Анимация
Чтобы сделать дизайн более привлекательным и запоминающимся, некоторые дизайнеры прибегают к нестандартным решениям и вставляют в хедер анимированные изображения. На примере качается инструмент для сбора металла:
Такой подход тоже имеет место быть, однако, такие анимации занимают много места, поэтому необходимо заранее продумать расположение элементов.
Меню «гамбургер»
После нажатия на значок, появляется страница с меню:
С точки зрения юзабилити сайта нельзя сказать, что это плохой вариант. Такое меню пришло из мобильной разработки и уже привычно пользователям. Гамбургер подойдет промо-сайтам, где основной акцент идет на качественное представление продукта с помощью фото или видео. Для интернет-магазинов такой вариант не подходит, так как клиенту важно иметь в быстром доступе корзину, избранные товары и поле поиска.
Шапка на главном экране
Иногда дизайнеры не выделяют шапку сайта как отдельный блок и встраивают ее в главный экран. Обычно это минималистичное решение, где представлены только ссылки на основные разделы сайта и логотип компании. Особенно такой прием используется в дизайне лендингов.
Шапка-иллюстрация
Иногда дизайнеры отходят от стандартного представления шапки профиля и встраивают навигацию в виде иллюстрации, где ссылки размещены на отдельных объектах. Например:
Это интересное дизайнерское решение, однако, клиент не сразу понимает, как взаимодействовать с интерфейсом, поэтому нужно использовать такие приемы с осторожностью.
Стилизованная шапка
В том случае, если дизайн сайта выполнен в каком-то определенном стиле, нередко шапку сайта также делают стилизованной. На этом примере в хедере расположены известные здания Москвы, с ссылками на страницы с описаниями:
Некоторые бренды под каждый праздник разрабатывают новую шапку для создания атмосферы праздника на сайте. Мы писали об этом в статье, посвященной подготовке сайта к Новому году.
Страница без шапки
Некоторые дизайнеры отходят от традиционных понятий дизайна и не делают шапку сайта в принципе. Например, заменяют верхний блок необычной навигацией, как на этом примере:
Очень сложно оценивать такие решения с точки зрения юзабилити. После перехода на сайт первое время нужно понять, как устроена навигация и что сайт предлагает посетителям. О том, что лучше выбрать, креативность или юзабилити, читайте здесь.
Основные принципы создания хедера
Создавая дизайн хедера, веб-дизайнеру нужно помнить, что это первый элемент, который видит пользователь, и один из самых используемых в интерфейсе. Поэтому необходимо подходить к созданию шапки с особой тщательностью и помнить о юзабилити.
Как оформить шапку, которая будет удобна для клиента, вписываться в стиль всей страницы и способствовать увеличению конверсии? Дадим несколько советов по созданию дизайна хедера.
1. Обращайте внимание на типографику
В первую очередь клиент читает названия разделов и предоставленную компанией информацию: контактные данные, интересные предложения. Поэтому нужно выбрать читабельный шрифт, который не будет ухудшать восприятие.
2. Принимайте во внимание стиль сайта и его назначение
3. Обращайте внимание на расположение элементов
4. Уделите внимание кнопке и веб-форме обратной связи
5. Сделайте хедер фиксированным, если это не нарушает общую концепцию дизайна
Этот пункт больше относится к разработке, однако, дизайнер тоже должен его учитывать. Фиксация хедера означает его перемещение вместе со скроллингом. На нашем сайте при скролле шапка как будто прилипает к верху страницы и всегда находится перед глазами пользователя:
Зачем нужен подвал сайта
1. Визуально завершает дизайн
Бесконечный скроллинг давно не приветствуется в дизайне сайта, так как создает у пользователя ощущение незавершенности. С помощью подвала сайта мы даем клиенту понять, что контент закончен и предлагаем перейти к следующему разделу.
2. Помогает совершить целевое действие
Дополнительные контактные данные или призыв к действию помогает подтолкнуть клиента к совершению покупки или заказу услуги, подписке на рассылку.
3. Направляет пользователя
Дочитав очередную статью пользователь может не возвращать к шапке сайта, а найти нужную информацию в футере.
4. Предоставляет пользователю нужную информацию о компании
Нередко в футере размещают сведения о компании, документы и сертификаты, политику конфиденциальности и прочее.
Примеры дизайна подвала сайта
Рассмотрим, какие элементы могут размещаться в подвале сайта и какой подвал может быть с точки зрения дизайна.
Карта сайта
Контактная информация
В отличие от шапки сайта, в подвале можно предоставить более подробные сведения: несколько телефонов для связи, полный адрес компании и ее расположение на карте. Например, в нашем футере мы разместили адрес и схему проезда до нашего офиса в Москве:
Элементы навигации
Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:
Ссылки на социальные сети
Призыв к действию
Чтобы подтолкнуть клиента к целевому действию, некоторые дизайнеры размещают в подвале блок с призывом к действию:
Стилизованное оформление
Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:
Без футера
Как и в случае с хедером, некоторые решения не предусматривают использования подвала сайта:
Основные принципы создания футера
Правильно оформленный футер может не только украсить сайт и привести страницу к логическому завершению, но и принести клиенту пользу, увеличить уровень конверсии сайта.
Несколько рекомендаций по разработке дизайна футера.
1. Делайте футер отличным от общего контента сайта
Чтобы выделить элемент навигации, обратить внимание на контактные данные, дизайнеры обычно делают футер темного цвета или как-то выделяют его из общего фона.
2. Обращайте внимание на типографику
Как и при создании хедера, нужно использовать хорошо читаемые шрифты, следить за интервалами и отступами, чтобы ссылки не сливались друг с другом.
3. Учитывайте важность иерархии
При разработке футера разбивайте его на несколько блоков, сделайте понятными списки и заголовки разделов, учитывайте границы между элементами. Так пользователь легко разберется в содержимом и найдет нужную информацию.
Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».