Шапка сайта: что должно быть в header

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

Ключевые элементы и связи показаны в единой схеме.

Коротко: принцип и границы

Рабочий принцип: эффективный header = узнаваемость + понятный путь + доступное основное действие − визуальный шум.

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

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

Оглавление

• Определить задачу шапки
• Выбрать обязательные элементы
• Построить информационную иерархию
• Спроектировать навигацию
• Настроить sticky-поведение
• Собрать мобильный header
• Обеспечить доступность
• Проверить скорость
• Измерить результат

Определить задачу шапки

На сервисной странице header быстрее ведёт к услуге и контакту, в магазине — к каталогу, поиску и корзине, в кабинете — к рабочим разделам.

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

Практические действия:

• описать пользовательскую задачу для этапа «определить задачу шапки».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Определить задачу шапки» по теме «шапка сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Выбрать обязательные элементы

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

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

Практические действия:

• описать пользовательскую задачу для этапа «выбрать обязательные элементы».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Построить информационную иерархию

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

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

Практические действия:

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

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

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

Процесс ведёт от пользовательской задачи к макету и реализации.

Спроектировать навигацию

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

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

Практические действия:

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

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

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

Настроить sticky-поведение

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

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

Практические действия:

• описать пользовательскую задачу для этапа «настроить sticky-поведение».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Настроить sticky-поведение» по теме «шапка сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Собрать мобильный header

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

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

Практические действия:

• описать пользовательскую задачу для этапа «собрать мобильный header».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Собрать мобильный header» по теме «шапка сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

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

Обеспечить доступность

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

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

Практические действия:

• описать пользовательскую задачу для этапа «обеспечить доступность».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

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

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

Проверить скорость

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

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

Практические действия:

• описать пользовательскую задачу для этапа «проверить скорость».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Проверить скорость» по теме «шапка сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Измерить результат

Проверяют успешность задач, использование меню, поиск, клики по CTA и ошибки, а не только субъективную красоту.

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

Практические действия:

• описать пользовательскую задачу для этапа «измерить результат».
• подставить реальный контент и крайние значения.
• согласовать поведение на десктопе и мобильном экране.
• зафиксировать проверяемый критерий приёмки.

Для раздела «Измерить результат» по теме «шапка сайта» в макет и ТЗ передают состав, источник данных, правила переполнения, состояния, адаптивное поведение и владельца актуальности.

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

Как внедрить решение на сайте

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

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

Материалы по теме:

• как создать прототип сайта
• как оформить кейсы на сайте
• как проверить адаптивную вёрстку

Частые вопросы

Зачем прорабатывать шапка сайта отдельно?

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

Что обязательно передать разработчику?

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

Как проверить решение на мобильном устройстве?

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

Какая ошибка встречается чаще всего?

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

Вывод

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