Как спроектировать полезный и гармоничный футер

В 80% из 100 новички либо игнорируют футер, либо не знают, как его организовать и допускают одни и те же ошибки.

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

Что должен содержать футер:

1. Основные разделы сайта, а также дублирует логотип компании

2. Контактная информация

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

4. Соцсети

5. Ссылки на договоры оферты / пользовательские соглашения

Рассмотрим некоторые типичные ошибки при проектировании футера:

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

Выделим несколько ошибок (отмечено красным):

1. Столбцы НЕ выровнены по сетке. Из-за этого не считывается сетка и рушится гармоничный вертикальный ритм.

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

3. Справа вышла несбалансированная пустота, из-за чего нарушается композиция блока.

Попробуем исправить допущенные недочеты:

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

Какие бывают футеры? От чего отталкиваться.

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

Вариант первый:

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

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

Второй вариант:

Симметрия. Этот вариант подходит, когда пунктов в футере относительно не много и хочется сделать акцент на логотипе:

Вариант третий:

Когда в футер хочется вставить новостную рассылку. Этот вариант особенно актуален для онлайн-магазинов и новостных сайтов:

Вариант четвертый:

Или почти полное копирование хедера. Отличается небольшой высотой и простотой:

Итоги:

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