5
мин.
Шапка и подвал встречаются на многих страницах сайта. Они помогают человеку понять, где он находится, перейти к нужному разделу и найти способ связи.
Поэтому проектировать их лучше как часть пользовательского пути. Красивое меню не поможет, если названия непонятны, а подвал с десятками ссылок не станет полезным только из-за большого объёма.
Что делает шапка сайта
Шапка, или header, обычно объединяет узнаваемость бренда, основную навигацию и важное действие. Посетитель должен быстро понять, кому принадлежит сайт и как найти нужное.
Для магазина могут быть важны каталог, поиск и корзина. Для специалиста — услуги, работы и связь. Копировать один набор элементов для всех проектов неудобно.
Логотип и название
Логотип часто ведёт на главную страницу. Проверьте, что он читается в реальном размере и не занимает место, необходимое навигации.
Если знак сам по себе не объясняет владельца сайта, рядом может быть полезно название. Доступное имя ссылки должно передавать её назначение, а не только описывать форму картинки.
Меню
Используйте названия, понятные посетителю: «Услуги», «Каталог», «Кейсы», «Контакты». Образные формулировки могут поддерживать стиль, но не должны превращать навигацию в загадку.
Расположите пункты по задачам. Если человеку чаще всего нужен каталог, не прячьте его за общим разделом «Компания».
Для вложенного меню проверьте работу не только при наведении мыши. На смартфоне и с клавиатуры основные переходы тоже должны оставаться доступны.
Основное действие
Выберите приоритетную кнопку: записаться, запросить расчёт или связаться. Несколько одинаково заметных действий могут затруднить выбор.
Не используйте общее название, если результат можно назвать точнее. «Получить расчёт» понятнее, когда кнопка открывает форму исходных данных.
Нужна ли фиксированная шапка
Закреплённая шапка может сохранять доступ к навигации на длинной странице. Но она занимает часть экрана, особенно на смартфоне.
Проверьте, не перекрывает ли она заголовки при переходе по якорям и важные элементы формы. Если меню скрывается при прокрутке, поведение должно быть предсказуемым.
Решение зависит от сценария. Не стоит добавлять фиксацию только потому, что она встречается на других сайтах.
Что делает подвал сайта
Footer помогает завершить просмотр и найти сведения, которые не обязательно держать на первом экране: контакты, дополнительные разделы и документы.
Разделы и переходы
Не обязательно повторять все пункты меню буквально. В подвале можно дать удобный путь к востребованным услугам и материалам.
Для большого сайта разделите ссылки на понятные группы. Не используйте бесконечный список ключевых фраз ради SEO: он должен оставаться навигацией для человека.
Контакты
Покажите реальные способы связи и условия ответа, если они определены. Телефон и почта должны открываться корректно на смартфоне.
Не добавляйте карты, адреса и режим работы, которые не относятся к бизнесу. Для удалённого специалиста может быть достаточно понятных контактов без вымышленного офиса.
Документы и сведения
Разместите документы и информацию, которые нужны именно вашему проекту и деятельности. Их состав зависит от сайта и применимых требований.
Подвал не заменяет проверку этих требований. Также недостаточно поставить ссылку на документ, который не открывается или не соответствует реальным процессам.
Мобильная версия
На узком экране выделите главное. Меню может открываться отдельной панелью, но посетитель должен видеть способ её открыть и закрыть.
После выбора пункта проверьте, что происходит: переход, прокрутка или закрытие панели. Фокус клавиатуры не должен теряться или попадать в скрытый интерфейс.
В подвале длинные колонки обычно удобнее перестроить вертикально. Не уменьшайте текст до нечитаемого размера, чтобы сохранить десктопную композицию.
Проверка перед запуском
- Все ссылки ведут к актуальным страницам.
- Понятно, какой пункт выбран.
- Меню работает мышью, касанием и клавиатурой.
- Панель закрывается доступным способом.
- Контакты можно использовать со смартфона.
- Фиксированные элементы не перекрывают содержимое.
- Документы и служебные страницы открываются.
- На разных страницах сохраняется общая логика.
С точки зрения разметки полезно обозначать области страницы по их назначению. Это помогает вспомогательным технологиям, но не исправляет непонятные названия ссылок.
Частые вопросы
Нужно ли одинаковое меню на всех страницах?
Единая логика обычно облегчает навигацию. Особые разделы могут иметь дополнительное меню, если оно не конфликтует с основным.
Подвал обязан быть большим?
Нет. Его объём определяется полезными сведениями и структурой сайта.
Как начать проектирование
Перечислите основные задачи посетителя и сведения, которые он ищет в конце просмотра. Затем соберём шапку и подвал, которые поддерживают эти задачи на компьютере и смартфоне.
