Шапка на сайт: Что такое шапка сайта?

Содержание

Шапка сайта — что это и как правильно оформить

Natalia Shpitula

Обновлено 24 апреля, 2022

Loading…

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

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

Что такое шапка сайта и зачем она нужна

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

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

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

Какие элементы входят в хедер

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

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

Получите логотип для шапки сайта за пару секунд!

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

Меню. Обеспечивает простую навигацию, а значит, улучшает опыт взаимодействия с брендом.
Заголовок. Коротко передает основной месседж: преимущества компании, выгоду или специальное предложение.
Иллюстрации. Фото, видео, рисунки или анимация дополняют информацию, размещенную в заголовке.
Кнопки призыва к действию. «Купить», «заказать», «узнать больше» — эти и другие фразы ведут потенциальных покупателей по воронке продаж.
Панель поиска. Упрощает пользование платформами с большим объемом информации (актуально для информационных ресурсов или разветвленных каталогов товаров).
Корзина. Необходима интернет-магазинам, чтобы упростить процесс покупок.
Панель авторизации. Нужна для входа в систему с расширенными возможностями: например, постоянным клиентам интернет-магазинов или эксклюзивным подписчикам блога.
Ссылки на социальные сети. Переводят трафик в соцсети, если вы хотите привлечь новых подписчиков.
Языки. Для многоязычных сайтов полезна функция переключения между языковыми версиями, чтобы читатели быстро перешли на удобный язык.

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

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

Какие приемы сделают шапку привлекательной

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

Визуальная иерархия

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

Паттерны. Существует два основных способа сканирования страницы: по траекториям букв F и Z. По данным исследовательской компании Nielsen Group, F-паттерн — самый распространенный. Но в обоих случаях ключевой является верхняя строка. Именно там стоит располагать ключевые элементы: название, логотип, контактную информацию.
Размер. Крупные надписи и изображения обращают на себя внимание в первую очередь.
Цвета. Яркие оттенки и контрастные решения более заметны. А блоки, выполненные в одном цвете, выглядят как взаимосвязанные.
Пустое пространство. Чем больше «воздуха» вокруг текста и изображения, тем больше они выделяются. Также пробелы подчеркивают связанность или разделенность компонентов.

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

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

Эффект наведения: подменю раскрывается при наведении курсора на основные разделы.

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

Заголовок

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

Дизайн

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

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

Текст

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

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

компания по производству возобновляемой энергии Green Mountain Energy напрямую обращается к потенциальным клиентам, играя словами: «Нам нравится ваша энергия!»;

маркетинговое агентство Ckonecta лаконично излагает коммерческое предложение: «Стратегии для развития вашей компании»;

веб-студия Okb Interactive Studio создает эмоциональный посыл: «Сделай что-нибудь классное»;

магазин по продаже косметических средств Baxter of California размещает несколько сменяющихся заголовков с актуальными предложениями: новыми продуктами, акциями, скидками.

Иллюстрации

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

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

Интерактив. В тренде — ожившие рисунки, которые привлекают внимание. Дистрибьютор продуктов и напитков Green Spoon Sales изображает картинку с падающими в тарелку фруктами. При наведении курсора она превращается в анимацию, поддерживая размещенный выше слоган «Shake» («Встряхни»).

«Спецэффекты»: липкая шапка и параллакс

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

Фиксированная или липкая шапка. Блок с полезными элементами, который следует за посетителем по мере прокрутки. Для интернет-магазинов это корзина и контактные телефоны, для сайтов услуг — выгодное предложение и призыв к действию.
Параллакс. Эффект игры с углом зрения: по мере прокрутки одни компоненты двигаются медленнее, чем другие. Благодаря параллаксу дизайн выглядит глубже и объемнее.

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

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

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

Заметной. Разместите ее на видном месте, выделите контрастным цветом и оставьте вокруг «воздух».
Понятной. Сформулируйте короткое четкое сообщение, смысл которого понятен даже при беглом прочтении.
Написанной на языке целевой аудитории. Не всем подойдут стандартные фразы вроде «Зарегистрироваться» или «Узнать больше». Так, компания по созданию мобильных приложений для финтех-стартапов All Front мягко обращается к будущим клиентам: «Расскажите нам о том, что вам нужно».

Единство дизайна

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

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

Вывод

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

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

#Дизайн #Разработка

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

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

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

Разработка сайтов для бизнеса

Подробнее

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

Первостепенные элементы, которые должны быть в хедере сайта:

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

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

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

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

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

Дизайн шапки сайта

в 2020 году: лучшие практики и примеры | Костя Степанов

Катя Шокурова, копирайтер Шакуро

Иллюстрация Элени Дебо

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

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

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

«Жизнь — это первое впечатление. Вы получаете один шанс на это.
Сделай это вечным».
― J.R. Rim

Концепция веб-сайта производителя чая

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

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

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

Архитектурная платформа Home

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

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

Основными элементами шапки веб-сайта обычно являются:

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

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

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

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

Дизайн домашней страницы для фрилансеров

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

Давайте пройдемся по основным моментам.

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

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

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

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

Webdesigner Site Concept

Nielsen Norman Group впервые сформулировала свою теорию о F-образном паттерне чтения в сети в 2006 году, и она не потеряла своей актуальности и по сей день.

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

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

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

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

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

Призыв к действию. Реализуйте принципы визуальной иерархии для естественного выделения CTA.

Страница продукта Street Fashion

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

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

Интернет-магазины — корзина всегда перед пользователем.
Сервисные сайты — постоянно отображается номер телефона или CTA.

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

Веб-сайт производителя чая

Перед созданием шапки продумайте общий стиль веб-сайта и его основную цель.

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

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

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

Выбор зависит от цели конкретного сайта.

Концепция магазина 3D-моделей

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

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

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

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

Домашняя страница сайта Builddie

Не зацикливайтесь только на статичных изображениях.

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

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

Мотоциклетный магазин Triumph

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

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

Концепция редизайна лиги Drone Racing

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

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

Веб-страница безопасности связи

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

Домашняя страница службы питания

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

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

Skate Store Универсальность Кейс

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

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

Адаптивный дизайн мебельного магазина

Сайт представлен шапкой. Это как уникальная визитная карточка. Поэтому при разработке сайта максимальное внимание уделите шапке.

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

Примеры и рекомендации │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:

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

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

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