Шапка (header)

Определение: Шапка (header) — это верхняя часть страницы, в которой обычно находятся ключевые элементы навигации и “первого контакта”: логотип, меню, телефон, кнопка заявки и иногда поиск. Задача шапки — помочь пользователю быстро понять, где он находится и куда нажать дальше.

Зачем это нужно

• Даёт ориентиры с первых секунд: логотип, название, основные разделы.
• Помогает быстро перейти в нужный раздел через меню и ссылки.
• Ускоряет заявки и звонки: контакт и CTA доступны на любом экране (обычно).
• Повышает доверие: можно показать контакты, график, город, важные “якоря”.
• Делает сайт удобным на мобильных: бургер-меню и понятные кнопки упрощают навигацию.
• Поддерживает единый стиль: шапка повторяется на всех страницах и “склеивает” сайт.

Пример

Пример кода:

<div><a href="/">Логотип</a> | <a href="/создание-корпоративных-сайтов/">Услуги</a> | <a href="/контакты/">Контакты</a> | <a href="/#form">Оставить заявку</a></div>

Скриншот

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

Частые ошибки

• Перегружать шапку: слишком много пунктов, баннеров и элементов — сложно понять главное.
• Спрятать контакты слишком глубоко: пользователю нужно “искать телефон”.
• Непонятные названия пунктов меню (“Решения”, “Продукты”) без конкретики.
• Сломанная мобильная версия: меню не открывается, кнопки слишком мелкие, перекрытия.
• Нет явного CTA: человеку не очевидно, как сделать следующий шаг.

Связанные термины

• Меню
• CTA (призыв к действию)
• Хлебные крошки
• Навигация сайта
• UX
• Первый экран
• Логотип

Наши услуги

• Создание корпоративных сайтов — спроектируем шапку так, чтобы она вела к заявке и не мешала контенту.
• Доработка сайтов — улучшим шапку: меню, контакты, CTA, мобильную версию и удобство.
• Техническая поддержка сайта — поддержим корректную работу шапки после обновлений и изменений контента.