Что такое шапка сайта: Элементы шапки сайта

Что такое хедер или шапка сайта, для чего нужна, примеры

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

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

Header — так называется шапка сайта на английском языке. Это информационный блок в виде узкой полосы в верхней части каждой web-страницы.

Термин в web пришел из полиграфии. В печатных изданиях header и footer — это общепринятые названия верхнего и нижнего колонтитула — сквозной строки сверху или снизу страницы с дополнительной информацией: об авторе, номере страницы, параграфе, названии книги и т.п. Header от слова head — голова, footer от слова foot — ноги. Из полиграфии терминология переползла в верстку сайтов, хотя в русском языке наравне с хедером и футером прижились «шапка» и «подвал» сайта.

Зачем нужна шапка сайта

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

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

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

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

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

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

В первую очередь, нужно решить, какого размера должна быть шапка сайта. Ширина может меняться от 1024 px до 1920 px (для мониторов с высоким разрешением). По высоте размер стандартной шапки не должен перекрывать половину экрана и мешать знакомству с контентом на сайте, обычно достаточно от 100 до 250 пикселей.

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

• Выберите из перечня стандартных элементов шапки (об этом речь пойдет далее) наиболее важные и подходящие для вашего проекта пункты.
• Подберите читаемый, четкий шрифт. Если в компании разработан корпоративный стиль, то используйте фирменные шрифты, это станет дополнительным элементом идентификации бренда. Информация в шапке должна хорошо читаться людьми с разным зрением и с разного расстояния. Уделите внимание типографике — правилам оформления текста.
• Шапка должна соответствовать назначению сайта и гармонично вписываться в общий стиль web-ресурса.
• Поставьте в шапку логотип компании. Он должен быть в высоком разрешении.
• Избавьтесь от всех лишних элементов, отвлекающих от самого главного. Воспринимайте хедер, как навигацию на вокзале: чем чище и точнее схема, тем она понятнее. Продумывайте не только наличие нужных элементов, но и их расположение. Пользователи привыкли, что контакты обычно находятся в правой части шапки сайта, а логотип и название компании — в левой.
• Зафиксируйте шапку, чтобы она не исчезала при скроллинге страницы. Это поможет пользователям всегда иметь перед глазами важную информацию.

Стандартные элементы шапки сайта

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

Контакты компании

Телефон и e-mail обычно располагаются в правой части шапки. Сюда же можно поместить кнопки мессенджеров для быстрой связи с менеджерами. Желательно иметь хотя бы один городской номер телефона. Исключительно сотовые номера могут вызвать у пользователей подозрения в ненадежности компании.

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

Адрес

Если для вашего бизнеса важно физическое расположение офиса или магазина, то адрес нужно указывать в шапке (а если не важно, помните о том, что адрес компании в хедере – фактор ранжирования). Адреса сети магазинов или офисов оформляются выпадающим списком. Для онлайн-сервисов адрес не имеет значения, поэтому его можно спрятать в разделе «Контакты» или в подвал.

Обратный звонок

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

Меню

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

Личный кабинет

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

Корзина

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

Избранное и список сравнения

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

Отличительные знаки компании

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

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

Поле для поиска и другие элементы навигации

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

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

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

Поле для выбора региона

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

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

Кнопки с призывом к действию увеличивают конверсию. Кнопка CTA (Call-To-Action) может быть рассчитана на долгосрочную перспективу, например, «Связаться с нами», или размещаться на время проведения акции: «Получить скидку 5%».

Нужна или нет такая кнопка в шапке, зависит от целей и характера проекта.

Краткая информация о продукте

Иногда уместно разместить подзаголовок с кратким описанием товара или услуги, если сайт рекламирует какую-то схожую группу продуктов.

Кнопки переключения языков

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

Горизонтальное меню шапки

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

В горизонтальное меню должны попасть самые важные разделы вашего сайта. Перечислим наиболее распространенные:

• Каталог товаров или услуг.
• Акции.
• Портфолио, отзывы клиентов.
• Условия оплаты, доставки, гарантии, возврат товара.
• Блог, статьи, новости.
• Раздел о компании.
• Контакты.

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

Советы по оформлению горизонтального меню:

• максимум 5–7 разделов, исключение — каталог с категориями товаров и услуг, его можно оформить, как вариант выпадающего меню в шапке сайта;
• не использовать кнопки типа «Еще» или «…», за которыми прячется еще десяток ссылок;
• все, что не влезло, нужно объединять в тематические группы и оформлять выпадающим списком;
• цветом подсвечивается раздел, в котором сейчас находится пользователь, поэтому не нужно делать разноцветные кнопки в горизонтальном меню.

В хедере не принято размещать дополнительные разделы:

• политику обработки персональных данных;
• вакансии;
• карту сайта.

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

Виды дизайна шапки сайта

• Классика.

  Слева — логотип, справа — корзина и контакты, по центру — ссылки на разделы сайта.

• Двухуровневое меню.

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

• Большое изображение.

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

• Анимация.

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

• «Гамбургер».

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

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

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

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

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

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

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

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

Почему важно правильно оформить шапку сайта

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

• Модель Гуттенберга, характерна для страниц с однородной структурой текста: верхний и нижний абзац по прямой, тело страницы по диагонали.
• Z-образная модель, характерна для страниц с визуально разделенными блоками контента.
• F-образная модель, когда горизонтальное сканирование страницы затухает по ходу движения вниз.

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

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

Если вы решили заказать шапку для сайта, нужно определить, какую задачу должен выполнять ваш web-ресурс.

• Продвижение личности: музыканта, специалиста, преподавателя, врача, консультанта и т.п.

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

• Продвижение бизнеса.

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

• Шапка сайта интернет-магазина.

  В сервисах онлайн-торговли хедер играет ключевую роль, т.к. покупатели активно с ним взаимодействуют.

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

  Кроме обязательного горизонтального меню и корзины в шапке магазина должны быть:

  • логотип — заметный, но не крупный.
  • дескриптор — краткое описание специализации компании;
  • номер телефона: городской или федеральный на 8-800;
  • если еще осталось свободное место, поставьте в хедер график работы.

Ошибки в создании шапки

• Траблы с картинками: мыльное изображение, искажения при трансформации, недостаточное разрешение, наоборот, слишком высокое разрешение, из-за которого картинка медленно подгружается.
• Неудачный шрифт: избитый, типа Arial, нечитабельный, слишком витиеватый, со слипающимися буквами.
• Низкая контрастность цветов, из-за которой не читается текст.
• Ссылки в горизонтальном меню физически являются картинками: все слова должны быть сверстаны как текст.
• В верстке шапки использованы теги h2–H6.
• Хедер собран из картинок или флеш-элементов: правильная шапка должна быть сверстана в HTML.

Заключение

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

 

Рекомендации по созданию шапки сайта

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

Шапка сайта или хедер (от анг. header — заголовок) — это элемент навигации, который находится в самом начале страницы. Это первый элемент, на который обращает внимание пользователь при переходе на сайт. Именно поэтому важно проработать его оформление.

Зачем нужна шапка сайта:

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

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

Что разместить в шапке сайта: основные элементы

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

Логотип

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

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

Описание направления деятельности компании

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

Если же текст длинный, рекомендуем расположить его справа от логотипа:

Дополнительно в описании направления деятельности компании стоит указать УТП (уникальное торговое предложение), которое поможет выделиться среди конкурентов. Например:

Подробнее о том, как сформировать УТП, рассказали здесь.

Регионы работы и/или доставки

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

Если работаете в нескольких регионах, также укажите об этом:

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

Адрес

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

Если у вас несколько офисов/магазинов, то стоит выводить их в виде всплывающего окна или выпадающего списка, как в примере ниже:

Форма поиска

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

Подробнее о том, как организовать поиск на сайте, читайте в данной статье.

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

Для быстрой связи со специалистами рекомендуем разместить в правой части шапки сайта номер телефона и рядом с ним режим работы сотрудников, чтобы сориентировать клиентов (например, из других регионов). Если работаете в b2b-сегменте, тоже стоит указать email.

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

Если предусмотрена связь через мессенджеры, рекомендуем разместить быстрые ссылки на приложения рядом с номером телефона:

Форма заказа обратного звонка

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

Подробнее о том, как создавать рабочие формы на сайте.

Личный кабинет

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

О том, каким должен быть личный кабинет, рассказали в данной статье.

Корзина

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

Избранное и список сравнения

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

Версия для слабовидящих

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

Горизонтальное меню шапки сайта

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

Какие разделы стоит разместить в горизонтальном меню:

• Каталог товаров или услуг. Можно добавить общую ссылку или список подкатегорий, если их немного.
• Акции и спецпредложения. От плюшек мало кто отказывается.
• Портфолио и/или отзывы клиентов. Данный раздел необходим для повышения доверия к сайту и компании в целом.
• Оплата и доставка, гарантии, возврат или другие страницы об условиях работы компании.
• Блог, новости или другие информационные разделы о продукции или услугах.
• Страница о компании. Также необходима для повышения лояльности пользователей к компании.
• Страница контактов. Более подробная информация с адресами и телефонами.

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

Не стоит добавлять в меню ссылки на:

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

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

Как лучше оформить горизонтальное меню в шапке сайта:

• Рекомендуем располагать в меню не более 5-7 ссылок, чтобы оно легче воспринималось. Исключение можно сделать для списка категорий каталога — тогда формируется два меню. Первое меню со вспомогательными разделами располагается над шапкой сайта, а второе меню со списком категорий — внизу:

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

• Не стоит выделять какой-либо раздел цветным фоном, чтобы не дезориентировать пользователей при перемещении по сайту. Обычно цветом выделяется раздел, в котором находится пользователь.

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

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

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

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

Большие изображения

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

Лучше ограничиться цветным фоном и не перегружать шапку сайта графикой.

Длинные тексты

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

Рекомендации по оформлению шапки сайта

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

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

Выводы

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

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

11 советов по созданию отличного заголовка веб-сайта

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

• Совет №1. Подчеркните самые важные элементы
• Совет №2. Используйте четкие, читаемые шрифты
• Совет №3. Используйте прозрачные заголовки для сайтов с впечатляющими изображениями
• Совет №4. Уменьшайте заголовок при прокрутке, чтобы основная информация оставалась видимой
• Совет № 5. Есть магазин? Поставь наверх!
• Совет №6. Используйте эффекты, чтобы показать посетителям, где они находятся и куда идут
• Совет № 7. Выберите макет, который подходит логотипу  
• Совет № 8. Используйте элементы дизайна, которые выражают индивидуальность компании
• Совет №9. Используйте расширяемые меню, чтобы изображения сияли
• Совет № 10. Рассмотрим боковую панель — подходит ли она для вашего сайта?
• Совет №11. Измените их, чтобы ваши веб-сайты оставались свежими

ВО-ПЕРВЫХ, ЧТО ТАКОЕ ЗАГОЛОВОК ВЕБ-САЙТА?

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

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

Совет №1. Подчеркните самые важные элементы

Учитывайте главное, что вы хотите, чтобы посетители сайта делали на сайте, и убедитесь, что этот элемент хорошо виден в шапке. Например, для некоммерческих сайтов используйте значок «Пожертвовать сейчас»; для сайтов ресторанов используйте значок «Забронировать столик».

Как правило, заголовки содержат информацию, облегчающую взаимодействие посетителей с сайтом, в том числе:

• Навигационные ссылки
• Логотип компании
• Призыв к действию (Забронируйте столик, Пожертвуйте, Позвоните нам)
• Контактная информация
• Иконки социальных сетей
• Слоган
• Многоязычный переключатель
• Корзина для покупок

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

Логотип компании: всегда будет укреплять ваш бренд. Очень важно, чтобы ваш логотип был на шапке.

Призыв к действию (Забронируйте столик, Пожертвуйте, Позвоните нам): Это в конечном итоге побудит браузеры использовать вас и увеличить конверсию на вашем сайте.

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

Иконки социальных сетей: Предлагая легкий доступ к социальным каналам, вы увеличите количество подписчиков и вовлеченность в них.

Слоган: Здесь вы можете укрепить ценности своего бренда.

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

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

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

Родственный:

Duda против WordPress: сравнение бок о бок

Совет №2. Используйте четкие, удобочитаемые шрифты в заголовке вашего веб-сайта

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

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

Совет №3. Используйте прозрачные заголовки для сайтов с впечатляющими изображениями

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

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

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

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

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

Совет №5. Есть магазин? Поставь наверх!

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

 

Чтобы узнать больше, проверьте Основы веб-дизайна в Университете Дуда.

Совет № 6. Используйте эффекты, чтобы показать посетителям, где они находятся и куда они идут. Выбирайте эффекты, достаточно заметные, чтобы привлечь внимание, но не настолько заметные, чтобы отвлекать внимание. Обратите внимание, что некоторые эффекты видны только на компьютере, поэтому обязательно выберите эффекты (например, изменение цвета или подчеркивание), которые будут видны на мобильных устройствах.

Наведение / выбранные эффекты показывают пользователям, где они находятся на сайте.

Совет №7. Выберите макет заголовка сайта, который подходит к логотипу

 

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

 

Круглые и квадратные логотипы отлично смотрятся посередине.

Совет №8. Используйте элементы дизайна, которые выражают индивидуальность компании

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

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

Совет №9. Используйте расширяемые меню, чтобы изображения сияли

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

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

Совет №10. Рассмотрим боковую панель — подходит ли она для вашего сайта?

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

Заголовки боковой панели — отличный способ показать якорные ссылки посетителям в любом месте сайта.

Совет №11. Меняйте их, чтобы ваши веб-сайты оставались свежими

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

 

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

 

 

Связанные: Duda и WordPress: сравнение

 

Примеры и рекомендации │Elementor

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

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

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

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

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

Итак, как сделать так, чтобы максимально увеличить вовлеченность?

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

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

Содержание

• Что такое шапка сайта?
• Типы заголовков веб-сайтов
• Что должен включать заголовок веб-сайта?
• Рекомендации по дизайну шапки веб-сайта

Что такое заголовок веб-сайта?

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

Например, это заголовок на веб-сайте Elementor:

Заголовок является важной частью каждого веб-сайта, поскольку он: 

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

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

Типы заголовков веб-сайтов

1. Однострочный заголовок с логотипом, выровненным по левому краю

Этот заголовок на веб-сайте The Dog Bar является наиболее распространенным дизайном заголовка веб-сайта:

Логотип находится в крайнем левом углу сторона экрана и меню навигации, значок электронной коммерции и CTA находятся в крайнем правом углу.

2. Оптимизированный для мобильных устройств заголовок с гамбургер-меню

HubSpot показывает нам, как выглядит типичный заголовок мобильного веб-сайта: 

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

3. Гибридный заголовок для настольных и мобильных устройств

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

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

4. Заголовок с мега-меню

Веб-сайты с большим количеством контента не всегда могут позволить себе выбрать, какие категории или страницы попадают в заголовок. Вот почему вы получаете мегаменю, подобное тому, что есть на веб-сайте Digital Agency Network:

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

Когда вы заглянете в меню верхнего уровня «Лента», мы увидим похожую, хотя и не идентичную структуру мегаменю:

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

Кстати, если вам нужно создать один из них, вы можете легко сделать это с помощью Elementor и JetMenu.

5.

Выровненный по левому краю вертикальный заголовок

Ресторан, отмеченный звездой Мишлен The Inn at Little Washington использует боковую панель, выровненную по левому краю, для хранения своего заголовка: другие сервисные предприятия.

6. Заголовок со служебной панелью

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

7. Заголовок с панелью уведомлений

Некоторые веб-сайты могут прикреплять рекламную панель или панель уведомлений к заголовку. В этом примере Urban Outfitters показано, как включить рекламную и служебную панель: 

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

8. Верхний колонтитул с многосайтовой навигацией

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

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

Что должен содержать заголовок веб-сайта?

Давайте посмотрим, что именно относится к дизайну шапки вашего сайта.

Хотите повысить узнаваемость бренда? Тогда логотип должен быть самым первым, что посетители увидят на сайте.

Cosmopolitan — хороший пример для подражания:

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

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

Навигационные ссылки

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

В зависимости от размера вашего веб-сайта вам придется решить, сколько и какие типы навигации вам нужны. Есть основная навигация, вроде той, что вы видите здесь, в заголовке Dollar Shave Club:

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

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

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

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

Massage Envy делает это здесь:

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

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

Это объясняется принципом проектирования Serial Position Effect, который гласит, что люди запоминают первый и последний элементы в серии больше, чем остальные. Таким образом, когда они будут готовы совершить конверсию, им не придется искать призыв к действию в содержании сайта. Они будут знать, что могут перейти непосредственно к заголовку, чтобы сделать это.

Панель поиска

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

Mashable — одно из таких цифровых изданий, которое делает следующее: 

Здесь следует отметить несколько моментов.

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

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

Электронная торговля

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

В дальнем правом углу есть три элемента электронной коммерции: 

1. Войти/Учетная запись (значок персоны)
2. Список желаний (значок сердца)
3. Корзина (значок корзины)

Многие раз эти ссылки электронной торговли представлены только значками. Однако, если вы не уверены, легко ли узнаваемы разработанные вами значки или они выиграют от сочетания с ярлыком, проведите их A/B-тестирование.

Рекомендации по дизайну шапки веб-сайта

Заголовок — это доверенная часть веб-сайта. Хотя вы хотите дать ему индивидуальное вращение, вы не хотите слишком сильно отклоняться от установленных норм.

Вот несколько советов по достижению правильного баланса:

1. Используйте пустое пространство с умом

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

Давайте посмотрим, как пустое пространство повлияло на заголовок BBC:

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

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

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

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

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

Вы можете редактировать поля и отступы вокруг каждого элемента в вашем заголовке, а также отступы вокруг каждого элемента внутри блока (например, в навигации пример выше).

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

Как правило, Google предлагает, чтобы версия веб-сайта для мобильных устройств и компьютеров содержала один и тот же контент. Я не спорю с этим. Заголовок на рабочем столе должен иметь тот же логотип, ссылки и информацию, что и на мобильном устройстве.

Тем не менее, их дизайн должен отличаться.

В качестве примера возьмем Chick-fil-A. Вот как выглядит заголовок рабочего стола, когда открыта вложенная навигация по меню:

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

Неважно, 4 ссылки или 14. Такая навигация не влезет в шапку мобильного сайта. Итак, вот почему мобильный сайт делает это:

Значок гамбургера в левом углу открывается, чтобы показать полноразмерный вертикальный заголовок. Панель поиска, навигационные ссылки, членская зона Chick-fil-A One и CTA находятся здесь.

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

Для этого вы можете использовать конструктор пользовательских заголовков Elementor:

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

3. Держите заголовок хорошо организованным и хорошо структурированным

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

Давайте посмотрим, как это делает Asana:

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

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

Это не единственный способ, которым Asana хорошо справляется с организацией содержимого заголовков. Это то, что «Почему Асана?» под-навигация выглядит так:

Мега-меню отформатировано почти так же, как вы отформатировали бы веб-страницу. Структура выглядит следующим образом: 

• Тег h3: Почему Asana?
• Теги h4: ОБЗОР, ХАРАКТЕРИСТИКИ, ВСЕ ПЛАНЫ
• Теги h5: Заголовки, выделенные жирным шрифтом под h4s

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

Кстати, вы также можете применить эту идею порядка и иерархии при разработке дополнительных полос, которые будут сопровождать заголовок. Вот хороший пример с сайта East Bay Inn:

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

4. Выбирайте простые шрифты, которые легко читать

Заголовок — не место для творчества при выборе шрифта. Кроме логотипа, конечно.

Возьмите Dribbble, например:

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

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

Еще две вещи, о которых следует помнить: 

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

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

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

5. Экономно используйте визуальные элементы

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

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

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

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

Вот действительно отличный пример от MINI USA:

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

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

Чего следует избегать, так это видео. Видео предназначены для просмотра, и заголовок просто не идеальное место для длительных встреч (даже если это всего 30 секунд).

6. Добавьте анимацию только в навигацию

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

Давайте рассмотрим несколько примеров.

Это с веб-сайта Аквариума Флориды:

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

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

Target – это еще один веб-сайт, использующий анимацию для привлечения внимания к навигации: 

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

Вы можете легко применить анимацию к своей навигации независимо от того, разрабатываете ли вы собственный шаблон заголовка или вставляете меню навигации на страницу из конструктора страниц Elementor:

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

7. Приклейте

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

У NNG есть несколько полезных советов о том, как создавать липкие заголовки, чтобы они не мешали вашим посетителям и не мешали им: 

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

Веб-сайт Champion следует этим правилам, и вы можете увидеть, как это может помочь улучшить качество покупок:

Если вы хотите попробовать этот липкий эффект, вам нужно уметь редактировать свой код (немного).

8. Учитывайте соотношение заголовка и контента при использовании вертикальной навигации

Компания NNG рассказала о вертикальной навигации несколько замечательных вещей: .

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

Их легче сканировать, так как посетители привыкли смотреть в левую часть веб-сайта.

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

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

Но есть проблема с пространством, о которой стоит подумать.

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

Навигация в стиле боковой панели не имеет такой роскоши, если только она не предназначена для отображения только тогда, когда кто-то щелкает значок меню-гамбургера. Как этот для The Alfond Inn:

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

Ширина боковой панели всего 250 пикселей по сравнению с 1200 пикселями на сайте.

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

9. Делайте заголовок прозрачным только тогда, когда это имеет смысл

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

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

Тем не менее, есть некоторые веб-сайты, на которых этот выбор дизайна работает.

Вот как Conti di San Bonifacio решает эту проблему:

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

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

Привлеките внимание и увеличьте вовлеченность благодаря индивидуальному дизайну заголовка

Заголовок — один из самых важных элементов вашего веб-сайта, так как соотношение между занимаемым им пространством и преимуществами, которые он дает, не имеет себе равных.

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

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