В хедере программы что это

Хедер: какой должна быть шапка сайта

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

Хедер: что это такое

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

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

Курс HTML/CSS Advanced | HTML5-теги main, header, section, aside, footer, article

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

Что размещать в шапке сайта

При разработке хедера для сайта вы можете добавить в него следующее:

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

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

Обратите внимание!

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

Многофайловый проект | Изучение С++ для начинающих. Урок #139

Как сделать хедер для сайта: главные принципы

Для создания действительно удачной шапки сайта соблюдайте эти правила:

1. Размещайте контакты, логотип, оффер на видном месте , чтобы их сразу заметили. Логотип обычно помещают по центру или в верхнем левом углу, а кнопки входа/регистрации и переключения языков – в верхнем правом углу.

2. Соблюдайте рекомендуемый размер шапки. Для информационных ресурсов высота хедера должна быть в пределах 100-200 пикселей, для корпоративных сайтов, лендингов и одностраничников ее можно увеличить до 300-500 пикселей.

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

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

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

Источник: dzen.ru

Хедер сайта

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

Навигация по статье:

1. Определение хедера
2. Основные элементы хедера
3. Советы по составлению хедера
4. Фиксированный (липкий) заголовок
5. Содержание шапки веб-сайта
6. Изображения в хедере
7. Видео, анимация
8. Продуманный призыв к действию
9. Оформление текста для хедера
10. Заключение

Определение хедера

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

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

Основные элементы хедера

Основные элементы заголовка веб-сайта:

• логотип или идентификатор бренда;
• призыв к действию;
• текст или заголовок;
• элементы навигации;
• поиск.

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

Минималистичный дизайн хедера включает только логотип компании и ссылки на основные разделы сайта. Эта модель особенно хорошо подходит для создания целевых страниц.

Советы по составлению хедера

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

1. Размер. Стандартного размера шапки нет, так как современные веб-сайты разрабатывают её для экранов любого размера. Два одинаковых по размеру экрана могут иметь разное разрешение (количество пикселей), поэтому пользователи видят не одно и то же. Высота заголовка не должна мешать восприятию контента. Для информационных ресурсов подходит небольшой хедер, в лендингах он может быть более объемным.
2. Визуальная иерархия. Согласно распространенной теории F-образного паттерна чтения контента, человек, который зашел на новый незнакомый сайт, начинает чтение страницы с левого верхнего угла экрана. Если он не найдет там нужной информации, то веб-страница автоматически определяется как нестандартная и сложная для восприятия.
3. Логотип. Согласно исследованиям, лучше запоминаются бренды, логотипы которых расположены слева, чем расположенные по центру или в правой части.
4. Навигация. Этот раздел шапки не рекомендуется загромождать ссылками, так как это отталкивает посетителей. Структура веб-сайта выстраивается таким образом, чтобы освободить место для наиболее важных категорий. Для направления пользователей при навигации используют эффекты наведения.
5. Призыв к действию (CTA). Призыв к действию, помимо текстового контента, выделяют также путем реализации принципов визуальной иерархии.

Фиксированный (липкий) заголовок

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

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

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

Изображения в хедере

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

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

Присоединяйтесь к
Rush-Analytics уже сегодня

7-ми дневный бесплатный доступ к полному функционалу. Без привязки карты.

Видео, анимация

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

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

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

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

Оформление текста для хедера

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

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

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

Заключение

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

Источник: www.rush-analytics.ru

Хедер

Хедер – это верхняя плашка, шапка “Сайт”. Название «header» также используется в значениях «заголовок» и «колонтитул». Одним словом – элемент, который находится выше остальных. В сайтостроении и веб-дизайне под хедером понимают область страницы выше контентной части.

Если использовать аналогию с архитектурой, то подвал – это футер, стены дома с окнами и дверьми – это область контента, а крыша – хедер.

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

Почему хедер так важен?

Можно ли обойтись без шапки сайта? Да, можно. Но зачем?

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

Всё точно как по формуле AIDA (Attention, Interest, Desire, Action) : (A) внимание – (I) интерес – (D) желание – (A) действие.

Хедер на сайте – это как раз область захвата внимания посетителей. Давайте рассмотрим, как новый пользователь видит сайт. Многочисленные исследования вывели три модели восприятия контента на странице:

• Диаграмма Гутенберга. Посетитель изучает страницу зигзагом.Сначала посетитель фиксирует взгляд на левом верхнем углу шапки сайта, затем проводит глазами слева направо в правую точку страницы. Дойдя до конца строки, спускается по диагонали в нижнюю точку и завершает свое ознакомление просмотром подвала сайта слева направо. Получается Z-фигура. Так вот первые впечатления в мозгу человека формируются на этапе просмотра хедера сайта. Если информация не нашла отклика у посетителя, в 90% он закроет страницу.
• Z-паттернМодель схожа с диаграммой Гутенберга. Посетитель также просматривает страницу зигзагом, но этих зигзагов больше одного. Такая модель восприятия часто встречается на ресурсах с блоковой структурой контентной части. Здесь хедер также отвечает за первое впечатление.
• F-паттернПользователь изучает контент слева направо, начиная с шапки сайта. Затем он переходит вертикально вниз на одну ступеньку, как бы спускаясь с крыши. Этажом ниже он также изучает информацию горизонтально, то есть слева направо. Соответственно если два первых этажа не заинтересовали пользователя, дальше он читать не будет.

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

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

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

Элементы хедера

Что может и должно быть в хедере для лучшего восприятия страницы пользователем?

Основные элементы

К основным элементам относят:

• Айдентика бренда, компании, персоны. Это обязательно – логотип, название или слоган, корпоративные цвета, фирменный стиль
• Контактная информация. Данный блок важен не только для посетителей сайта, но и для поисковых систем. Роботы поисковых систем сканируют информацию о местонахождении компании с контактов, указанных в шапке. После чего уточняют данные на странице «Контакты». Обычно в хедере прописывают телефон, e-mail. В редких случаях указывают физический/юридический адрес или как добраться до офиса
• Горизонтальное верхнее меню. Шапка придает стильности странице, привлекает внимание и предоставляет пользователям удобную навигацию по сайту

Это блоки контента, которые встречаются в 95% хедеров сайтов. Landing Page и одностраничники могут обходиться и без меню.

Второстепенные элементы

Ссылки на популярные соцсети. Элемент используется для связи сайта с группами компании в социальных сетях.

• Поле/кнопка поиска. В интернет-магазинах, а также на больших информационных ресурсах, в шапке размещают поле для ввода поисковых запросов. С его помощью посетители могут быстрее находить нужную информацию, товар
• Кнопка обратного звонка, форма подписки на обновления или рассылку. Довольно часто под телефоном размещают кнопку с предложением «Перезвоним» или «Заказать обратный звонок»
• “Гамбургер-меню”. Элемент больше актуален для мобильной версии шапки сайта, но может использоваться и при отображении на ПК. Смысл выпадающего меню в том, что этот небольшой блок освобождает много места в шапке для более важных элементов. Кроме того, “гамбургер-меню” удачно смотрится в минималистичном дизайне сайта
• Блоки информации. Время работы, краткое описание деятельности, ссылки на мобильную версию и другое

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

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

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

1. Размещать контакты и элементы айдентики (лого, название бренда, слоган) на видном месте. Не используйте картинки для отображения имени компании и контактной информации. Графика не мешает восприятию хедера человеком, но сильно затрудняет работу поисковых роботов. Поисковики первым делом считывают региональную привязку сайта с контактов в шапке
2. Не использовать много графических элементов, анимацию и «тяжелые» изображения в хедере. Это тормозит загрузку страницы и, зачастую, раздражает посетителей. Оптимальный вариант – использовать возможности HTML и CSS. Допускается для увеличения функционала хедера подключать динамические элементы на скриптах
3. Не использовать одинаковые заголовки H1 на всех страницах сайта. Это затрудняет поисковикам возможность поднятия ресурса в выдаче. Достаточно использовать тег заголовка на главной странице, чтобы выделить её для роботов поисковых систем
4. Меню должно быть только в виде текста. Следует исключить любые варианты с флеш-анимацией и графикой. Что будет, когда потребуется добавить или изменить пункт меню? В любом не текстовом варианте придется повторно обращаться к дизайнеру и программисту, чтобы внести малейшие изменения
5. Настроить высоту шапки. Хедер на сайте играет важную роль, но он не должен мешать восприятию контента. Поэтому для новостных или информационных порталов шапка должна быть в пределах 100-200 пикселей. Корпоративные ресурсы, Landing Page и одностраничники могут иметь хедер повыше. Например, 300-500 пикселей

Хедер с точки зрения дизайна

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

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

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

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

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

В этом случае на помощь приходит название бренда, описание и слоган.

Дизайн шапки на примерах

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

Header для медиаперсоны

Известная личность, звезда экрана, шоумен или шоувумен – словом, человек-бренд – всегда отображает на главной странице свой образ.

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

Другой пример хедера медиаперсоны – сайт Ольги Бузовой.

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

Хедер для интернет-магазина

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

Мы видим интерьер комнаты со стильными обоями. Логотип помещен посередине, справа контакты и кнопка/ссылка «Заказать звонок». Слева – описание, что это интернет-магазин стильных обоев. Маркетологи попытались позиционировать онлайн-магазин на элитную аудиторию. Посередине кнопка «Получить каталог».

Другой пример зарубежного сайта с шапкой в минимализме.

Здесь мы видим слева логотип и название бренда, справа – меню, поиск и корзину. Ниже два изображения товара из коллекции, кнопка перехода в каталог. В правом нижнем углу кнопка «Написать сообщение». Всё!

Шапка для сервисных сайтов

Рассмотрим пример сайта компании, которая оказывает мелкий и срочный ремонт на дому – «муж на час».

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

Более сложный пример с клининговой компанией.

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

Ещё один пример сервисного сайта – грузоперевозки.

Меню нет. Логотип в левом углу, контакты и «обратный звонок» — в правом. Картинка и оффер отражают тематику сайта. Ниже форма заказа.

Хедер для корпоративного сайта

Рассмотрим один пример шапки сайта компании по оказанию консалтинговых услуг в сфере IT.

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

Удачно подобраны картинки – улыбающиеся сотрудники располагают к заказу консультаций.

Выводы

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

Источник: okocrm.com

Все про хедер (шапку сайта): назначение, дизайн и проектирование

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

• Что это и какие элементы включает.
• Почему хедер важен для вас?
• Проектирование и варианты реализации.

Заметка является переводом статьи с uxplanet, за нее авторам большое спасибо.

Что такое хедер сайта?

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

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

Comics Shop Website

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

Что входит в шапку сайта?

Данный блок может включать в себя различные объекты:

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

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

Ниже приведены примеры размещения подобных элементов:

Bjorn Website (проект студии дизайна интерьера)

В верху макета находится фиксированная (прикрепленная) шапка сайта на странице, что позволяет ей оставаться постоянно видимой в процессе прокрутки. Слева она содержит логотип бренда, а справа — ссылки «Продукты», «Студия», «Новости» + иконку «Магазин». Центральная пустая область визуально разделяет эти два блока.

Event Agency Website

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

Почему важен header для сайта?

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

• модель Гуттенберга;
• Z-образная;
• F-образная.

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

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

Достаточно часто пользователи демонстрируют следующий подход:

• Вначале взгляд движется горизонтально, как правило, по верхней части — первая полоса F-образной модели.
• Затем взор посетителя опускается ниже, и страница снова «сканируется» горизонтально, но охватывается более короткая область, чем в первом движении. Это дополнительный элемент F-схемы.
• Наконец, взгляд перемещается к левой стороне экрана, которая просматривается вертикально. Иногда данный процесс довольно медленный и систематический, что выглядит как сплошная полоса на тепловой карте движения глаз. В других случаях взгляд двигается быстрее. Это последний элемент, создающий стебель буквы F.

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

Как указывается в статье Богдана Санду, «сайт должен притягивать взгляд сразу, иначе он станет всего лишь большим провалом».

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

Проектирование хедера сайта

Читаемость и визуальная иерархия

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

Daily Bugle magazine

В концепте текущего новостного шаблона увидите меню в шапке сайта с двумя активными ссылками на категории публикаций, линком на «живой» эфир и полем поиска. Логотип по центру, как в одном из примеров выше.

The Big Landscape

Здесь используется популярный тренд веб-дизайна 2017 с разбитой абстрактной сеткой, а header для сайта удачно его дополняет: левая часть визуально длиннее, состоит из логотипа и трех ссылок; правая — покороче, с элементами поиска и подписки.

Нужно помнить о том, что в процессе перемещения пользователя по странице шапка сайта может по разному себя вести:

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

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

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

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

Здесь показан вариант «компактного» меню в шапке сайта, содержащего много ссылок и поддерживающего простой общий стиль шаблона. Кроме него в хедере имеется две области: слева выделены красным цветом бренд и краткая информация о проекте; в правой зоне размещены иконки социальных сетей и значок поиска. Центральная часть остается свободной, добавляя легкость и баланс всему макету.

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

И хотя данное решение все еще вызывает активные споры, оно по-прежнему используется в качестве навигации header’а сайта. Его противники указывают на то, что этот блок может запутать неопытных интернет-пользователей новичков. Именно поэтому желательно принимать решение о внедрении «гамбургер» кнопки только после исследования целевой аудитории.

Фиксированный (липкий) хедер сайта

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

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

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

Двойное меню

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

На гифке ниже увидите «липкий» хедер, состоящий из двух «строк»:

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

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

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

Если есть что добавить по статье из личного рабочего опыта, пишите ниже — интересно почитать. Какой вариант реализации header вам больше понравился?

Источник: dsgnmania.com