Футер — это элемент интерфейса, которым должна завершаться любая страница сайта. Он объединяет в себе навигацию, контактную информацию, юридические данные, полезные ссылки и т. д. Футер является полноценным навигационным центром, особенно это заметно на одностраничных сайтах, и нужен для того, чтобы пользователь мог быстро найти важную информацию и ссылки.
Несмотря на значимость футера для навигации, его дизайн должен быть визуально второстепенным по отношению к основному контенту. Это достигается за счет сдержанной цветовой схемы, меньшего размера шрифта и четкой структуры с понятной иерархией элементов.
Структурная сетка
Чаще всего футер имеет модульную структуру и делится на блоки, которые могут включать навигационные колонки, контактную информацию, форму подписки, ссылки на социальные сети и нижнюю строку с юридической информацией. Между этими блоками необходимо поддерживать четкие интервалы, а ширина колонки должна быть определена по модульной сетке.
Распределение пространства
Основу футера составляют навигационные блоки, обычно занимающие 60-70% пространства. Каждая колонка имеет заголовок и список ссылок, сгруппированных по смыслу. Контактный блок обычно занимает 20-25% и может включать физический адрес, телефон и форму для подписки.
Система отступов
На начальных этапах обучения веб-дизайну можно использовать следующую систему: отступы между колонками — 40-60px, между группами ссылок — 24-32px, между отдельными ссылками — 8-16px, вертикальные отступы футера от основного контента составят 80-120px сверху и 40-60px снизу. Однако, данная система может адекватно видоизменяться.
Базовые состояния
Как вам уже известно, каждый интерактивный элемент имеет четыре состояния: обычное, при наведении, при фокусе и при нажатии. Основными элементами футера являются текстовые ссылки, которые могут подчеркиваться или менять цвет при наведении, кнопки, обычно меняющие фон, и поля ввода, получающие заметную обводку. Более подробная информация описана в главах, посвященных этим компонентам.
Взаимодействие с формой
Форма подписки на рассылку включает валидацию email-адреса, контекстные подсказки и сообщения об ошибках. Успешная подписка сопровождается анимированным подтверждением.
Мобильные взаимодействия
На мобильных устройствах футер должен перестроиться либо в аккордеон, либо просто стать вертикальным. Если вы отдали предпочтение аккордеону, следите за тем, чтобы анимация раскрытия происходила примерно за 300-400ms с плавным изменением высоты и прозрачности содержимого.
Мобильная версия
Если говорить об адаптиве для мобильного устройства подробнее, можно добавить, что стоит перестроить кнопки в один столбец, приоритет отдать контактной информации и разделам навигации, а второстепенные ссылки сгруппировать в раскрывающиеся блоки или переместить в нижнюю часть футера.
Планшетная версия
На планшетах в основном используется двухколоночный макет. Навигационные блоки группируются попарно, а контактная информация и социальные сети образуют отдельный блок внизу.
Десктопная версия
На широких экранах раскрывается полная структура футера. При большой ширине появляется возможность добавления дополнительного контента: карты проезда, галереи социальных сетей или расширенные контактные данные.
