что такое футер сайта пример
Футер
Футер сайта (другое название – подвал) – это сквозной структурный элемент, расположенный в нижней части страниц. Противоположен хедеру (шапке) – сквозной верхней части ресурса.
Используется в основном как блок дополнительной информации и перелинковки, реже как вспомогательный инструмент для сбора лидов.
Что размещать в футере
В подвале сайта обычно указывается информация, которую необходимо легко найти на любой странице, поэтому там может частично дублироваться содержание хедера. Конкретный набор данных зависит от типа сайта, тематики, дизайна, содержания других блоков и т. д. Типичные примеры размещаемого внизу страницы контента: контакты, навигация, правовая информация.
Сведения об авторстве
В футере сайта традиционно указывают копирайт, условия использования и распространения контента, информацию о разработчике ресурса.
Информация о партнерах
Можно написать в футере, кто поддерживает проект, взаимодействует с компанией и т. д. Это может работать на повышение уровня доверия, являться удобным решением, если партнерские ссылки размещаются по договору на каждой странице сайта и т. д. Примером могут быть и собственные дочерние проекты, поддомены, ссылки на мобильные приложения.
Дублирование контактов
В хедере обычно указывают только телефон, а на странице контактов все расписано очень подробно. В футере сайта часто создают некий средний вариант: размещают адрес, телефон, электронную почту.
Социальные сети
Кнопки на группы в социальных сетях или виджеты, где видно количество участников, логически примыкают к блоку контактов, но в то же время и отличаются от них. Поэтому их часто размещают именно в футере или дублируют, если они уже есть в хедере или боковых блоках.
Обратная связь и другие лид-формы
Добавление в футер возможности непосредственно связаться или каким-то другим образом оставить свои контакты (заказ обратного звонка, подписка) повышает удобство для пользователей и одновременно помогает собирать базу заинтересованных посетителей сайта.
Карта
Размещение в футере интерактивной карты повышает удобство для пользователей, если им важно точное положение компании (например, ищут что-то рядом с домом). Также это может способствовать повышению уровню доверия, как бы подтверждая, что фирма действительно существует за пределами интернета.
Политика конфиденциальности и защита персональных данных
Если на ресурсе предусмотрена регистрация или каким-то образом собираются сведения, попадающие под определение персональных данных, на нем необходимо размещать соответствующие правовые документы: об использовании Cookies, пользовательское соглашение, политику конфиденциальности и т. д. Ссылки на них, как правило, добавляют в подвал.
Возрастное ограничение
Если на сайте требуется указание, на какой возраст пользователей рассчитаны материалы, это часто публикуется в футере.
Другая информация
В футере можно писать сведения о регистрации, сообщение, что ресурс не представляет собой публичную оферту, информацию о наличии противопоказаний и все подобное, что по закону обязано сопровождать любые материалы и публикации в определенной тематике.
Карта сайта
Ссылка на карту сайта – страницу с кликабельным перечнем всех материалов с соблюдением иерархии – традиционно размещается в подвале.
Дополнительное меню
Может полностью или частично дублироваться основное меню. Чаще выносятся наиболее важные или популярные разделы сайта, независимо от уровня вложенности. Если информации много, она разбивается на столбики с поясняющими заголовками.
Облако тегов
Используется для дополнительной навигации по записям блога. В подвал сайта добавляются только наиболее популярные или важные теги, чтобы не было нагромождения.
Наверх
Кнопка «Наверх» добавляется для удобства пользователей, чтобы им не нужно было скроллить страницу обратно.
Счетчики
Размещаются в доступном для просмотра виде, как правило, только на информационных проектах, где по данным о посещаемости могут судить о привлекательности площадки для размещения рекламы.
Оформление
Подвал сайта оформляется в стиле, гармонирующем с хедером, телом страницы и ее элементами. Для дизайнерских решений простор огромный. Но, как правило, ориентируются на универсальные рекомендации.
При создании футера нужно ориентироваться на удобство пользователя и возлагаемую задачу, не перегружать элемент излишней информацией, но предоставлять необходимую. Размер нижнего блока может сильно варьироваться – от пары строк до нескольких экранов, если это оправданно.
Футер сайта: для чего он нужен и как правильно его оформлять
Одним из главных элементов каждого веб-ресурса является футер сайта. Хотя некоторые владельцы своих проектов пренебрегают им. Однако он позволяет предоставить пользователям больше информации о компании или человеке (в зависимости от того, чему посвящен сайт). Создавая оформление ресурса, необходимо также тщательно продумывать дизайн футера. Чтобы он гармонично сочетался с общим дизайном. Кроме того, нужно подумать, какие именно элементы включить в него. Правильно созданный подвал сделает оптимизацию ресурса более эффективной.
В этой статье я подробно расскажу не только, как сделать футер сайта, но и что писать в нем. Сразу же напомню – я регулярно провожу бесплатные четырехдневные онлайн тренинги, на которых рассказываю, как сделать сайт своими руками. Если вы уже давно мечтаете о личном проекте – записывайтесь. Обещаю, даже без знаний программирования, но под моим руководством вы гарантированно создадите свой работающий сайт.
Футер сайта: почему он так важен для каждого веб-ресурса
В этом разделе вы не только узнаете, почему важен футер подвал сайта, но и поймете, что писать в футере сайта.
1. Акцентирует внимание
Красивый, правильно оформленный стильный подвал обязательно привлечет внимание посетителей. Поэтому с его помощью можно сделать правильный акцент на определенном контенте.
2. Предоставляет полезную информацию
Любой футер подвал сайта поможет поделиться с посетителями действительно полезной и важной информацией. Например, это могут быть ссылки на конкретные страницы или упоминание доноров проекта.
3. Захватывает внимание
Посредством стильного, креативного дизайна подвала можно окончательно удержать внимание пользователей. Он станет своеобразным финальным аккордом! В нем можно размещать разнообразные картинки, и даже другие интерактивные элементы. Среди которых – видео-ролики.
4. Приводит лидов
Как это сделать? Очень просто! Разместите в подвале:
5. Помогает в навигации
Если пользователь пролистал главную страницу и уперся в футер сайта, вероятно, он так и не нашел, что ему нужно. Помогите ему решить проблему – в подвале разместите ссылки на главные разделы проекта.
Футер подвал сайта и как его оформлять: 10 крутых вариантов
Я проанализировал множество разнообразных проектов, собрал тонны информации. И выбрал 10 классных вариантов для оформления подвала. Если вы не знаете, как сделать футер своего проекта действительно крутым, ознакомьтесь с моими предложениями.
Совет! Только прошу – не смешивайте все 10 идей в одном подвале!
1. Без футера вообще
«Как же так? Ты же сам писал – что футер очень важно!», — возмущенно воскликнете вы. И будете правы.
Есть ситуации, когда действительно можно отказаться от футера. И, тем самым, выделиться на фоне остальных.
Удалите футер с главной страницы, но оставьте его на всех остальных. Это будет круто и оригинально.
2. Минималистическое оформление
Рассмотрите вариант всего с 2-3 основными элементами на футере. Например, это могут быть:
3. Футер сайта: уникальность
Теперь о том, как сделать футер сайта уникальным. Проявите креатив, выделитесь оригинальностью. Например, вам в этом поможет один из следующих вариантов:
4. Карта сайта
Если не знаете, что писать в футере сайта, поместите в нем карту сайта! Не стоит недооценивать данный элемент. Как показывают профильные исследования, достаточно много посетителей кликают по ней.
Но даже если пользователи не будут там нажимать, карта сайта поможет в индексации проекта и его продвижению в поисковой выдаче.
5. Обычная карта
Она поможет сформировать большее доверие к компании. Интегрировав карту, вы покажите, что не скрывается за дизайном, продемонстрируете пользователям, что вас всегда можно найти в конкретном месте.
6. Контактная форма
… или рассылка новостей.
И первый, и второй вариант – хорошее решение.
Поставьте ссылку на контактную форму и обязательно проверьте, что она работает корректно. Только не нужно проставлять ссылки непосредственно на адрес электронной почты – вы спровоцируете поток спама.
Форма подписки на рассылку новостей – идеальный выбор для интернет-магазинов. Обязательно подпишите, что именно будут содержать такие рассылки. Добавьте, сколько именно пользователей уже подписались на них.
7. Контактная информация
Не понимаете, что писать в футере сайта? Рекомендуют оставить там всю контактную информацию. Каждая ссылка на контакт должна быть кликабельной, чтобы можно было отправить письмо или сообщение одним кликом.
Обратите внимание! Номер телефона указывайте с кодом страны. Это поможет поисковым роботам идентифицировать ваш регион деятельности, что поспособствует оперативному продвижению.
8. Футер сайта: навигация
Такой подвал станет настоящей «находкой» для пользователей, которые «потерялись». Они опустились слишком далеко вниз, но так и не поняли, как найти то, что им нужно.
Правильно расставленные ссылки на основные разделы помогут посетителям сориентироваться. Рекомендуется проставлять отметки на самые посещаемые разделы или страницы.
9. Призыв к действию
Легкое, обычное, простое обращение к пользователям поможет вам. Например, может быть:
Если рядом будет еще и контактная форма или форма подписки на новости – идеальный вариант.
10. Социальные сети
Наличие иконок социальных сетей, ведущих на официальные страницы вашей компании, позволит вам привлекать пользователей в сообщества и группы. Иконки сделают футер еще и более привлекательным визуально.
Как сделать футер сайта: 3 совета
Теперь о том, что писать в футере сайта и как его правильно оформить. Руководствуйтесь моими советами и вы гарантированно создадите качественный и эффективный, привлекательный подвал ресурса.
1. Футер сайта: главные элементы
Внимательно изучите свой проект, его структуру, что позволит вам точно понять, где именно и как расположить футер, что именно в него вписать.
Совет! Не забудьте о том, что подвал должен быть «отзывчивым» для мобильных устройств.
Еще один хороший вариант – для каждой страницы сделать свой подвал. Расположите там нужные элементы.
2. Футер сайта: сделайте проект
Формируя проект футера, предусмотрите следующие моменты:
Каждый раздел, столбик должен располагаться в зависимости от значимости. Учитывайте приоритеты разделов и интересы посетителей. К примеру, информация с контактами должна размещать либо в правой части, либо в центре подвала.
Обратите внимание! Еще один вариант – привязать подвал. То есть, сделать его положение фиксированным. Чтобы он оставался на месте и в зоне видимости при скроллинге страницы.
3. Футер сайта: наличие уникальных элементов
Чтобы сделать футер сайта интересным, полезным и уникальным, добавьте соответствующие элементы:
Крайне желательно, чтобы подвал гармонично вписывался в общее оформление сайта, его дизайн. Однако если он будет резко выделяться, это тоже хороший вариант, но лишь в случае стильного оформления подвала.
Футер сайта: личный совет
Я подробно рассказал вам, каким может быть подвал веб-ресурса. При его создании также учитывайте такие важные моменты, как:
Прислушавшись к моим рекомендациям, вы создадите неповторимый, но привлекательный футер.
Много прочей полезной информации о том, каким должен быть сайт, я рассказываю на своем бесплатном авторском четырехдневном тренинге, как сделать сайт своими руками. Тренинг рассчитан на новичков. Во время обучения вы убедитесь, что самостоятельно сделать сайт можно даже без навыков программирования. После окончания обучения у вас будет собственный работающий проект, готовый к наполнению и продвижению. Если вы продолжите работать с ним, довольно скоро получите отличный источник стабильного пассивного дохода!
Футер сайта — что это и зачем нужен
Сайты строятся по определенной логике и структуре. Это удобно и пользователям, которые привыкают к стандартной «логике» — например, большинство станет искать разделы меню вверху справа или слева, информацию о товарах в корзине на сайте интернет-магазина — справа в углу.
Программистам тоже подобная стандартизация облегчает задачу создания сайта, верстки, а поисковые роботы и другие «искусственные интеллекты», без которых трудно представить функционал современного интернета, анализируют разметку и делают выводы о комфортности внешнего вида веб-ресурса для посетителя.
Это влияет на ранжирование.
Что такое футер
Футер — он же «подвал». Заставшие «Web 1.0» в начале нулевых годов помнят, что тогда никаких «подвалов» не было, а самая важная информация, например, о том, как связаться с владельцем ресурса могла располагаться где угодно.
Учитывая тогдашнюю скорость загрузки страниц и ограничения по трафику — удовольствие искать способы связаться с производителем, например, заинтересовавшего товара оставалось весьма сомнительным.
Затем на смену «дикого интернета» первого поколения пришли маркетологи, дизайнеры и другие специалисты.
Они вывели с помощью анализа восприятия человеком различных данных оптимальную формулу структуры веб-страницы. Подвал или футер — это та часть, которая располагается в самом низу.
Футер такой же обязательный элемент, как и хедер. Так же, как у человека должна быть голова и должны быть ноги, у сайта требуются хедеры и футеры.
Элементы сквозные. Это означает, что на крупном многостраничном сайте, включая магазины с большим количеством товаров, футеры будут находиться «на своем месте», куда бы ни заглянул посетителей, в какую «глубь» или «даль» не забрался.
Таким образом, вместе с хедером футер становится крайне важным элементом навигации: «выбраться», если пользователь заблудился будет намного проще, чем неизвестно сколько раз нажимать кнопку «назад» в браузере.
Футеры есть и на компьютерном отображении веб-ресурса, и в мобильной версии. Элементы считаются обязательными, поэтому крайне важно следить за вариантом загрузки под мобильные телефоны и планшеты.
Футер — это элемент перелинковки, в нем можно поставить ссылки на основные разделы.
Интернет-магазин зачастую использует выпадающее меню, но оно не всегда удобно, особенно если пользователь уже прокрутил до самого конца, а теперь ему придется вновь возвращаться к началу. Гораздо удобнее использовать аналог внизу страницы.
Также в «подвале» традиционно размещаются контакты, которые помогают связаться, уточнить правовую информацию и многое другое.
Можно ли обойтись без футера
Откройте сайт apple.com. Откройте сайт Сбербанка или главного новостного агрегатора в России Lenta.Ru. Можете попробовать другие сайты, чтобы убедиться: футеры есть практически везде.
«Обойтись» без футера можно в следующих случаях:
В целом, «подвал» обязателен хотя бы на уровне «Все права защищены» (копирайта). Впрочем, профессионалы в области маркетинга предлагают не только использовать футер как обязательный элемент с сообщением о том, что сайт оригинальный и принадлежит своему владельцу, но и как полезный маркетинговый инструмент, отказываться от которого имеет смысл только в том случае, если точно знаешь, зачем это делается.
SEO-значение футера
SEO-оптимизаторы используют каждую возможность сделать сайт более «видимым» для поисковых роботов. А те, в свою очередь, все больше требований предъявляют к анализируемым сайтам.
Процесс закономерный: согласно статистике, каждый час в интернете появляется до 10 000 новых сайтов, лендингов, страничек.
Безусловно, значительный процент из них не проживет и нескольких дней, лишь немногие «протянут» хотя бы год, но объемы информации грандиозные.
SEO-оптимизация становится настоящей «битвой» за попытку выиграть хорошие позиции. Футеры могут служить прекрасным SEO-инструментом в следующих случаях:
SEO-значение футера трудно переоценить. Это один из важнейших, наряду с хедером, инструментов повышения ранжирования сайта в поисковых системах.
Необязательно делать его объемным, главное — информативность, корректность, польза для посетителей и правильный грамотный код.
Что лучше всего разместить в «подвале
Статистическое исследование, которое было проведено агентством Chartbeat, принесло неожиданны результаты: пользователи не слишком часто обращают внимание на хедер.
Большинство начинает прокручивать сайт даже еще до того, как он полностью загрузится, таким образом, основная часть внимание попадает на середину и чуть ниже. Агентство отметило, что самая «горячая» часть страницы расположена приблизительно в 500 пикселях от верха.
А еще эта же статистика показала, что футер смотрят в 4 раза чаще, чем хедер. Впечатляющие новости для тех, кто привык размещать в «подвале» только самое необходимое и считает, что туда вообще никто не заглядывает.
Тем не менее, исследование уже «взято на вооружение», есть несколько прекрасных идей того, что можно поместить в футере страницы.
Среди базовых идей следующие:
Карта сайта
В первую очередь, это отличный инструмент перелинковки, а значит, SEO-оптимизации. Разделы будут вести на соответствующие рубрики лендинга или внутренние подразделы веб-ресурса, что хорошо «распознается» поисковыми роботами.
Такой подход, по мнению оптимизаторов, «улучшает» отношение роботов к сайту, поднимает его в позициях относительно конкурентов. Не говоря уж о том, что пользователям, которые промотали далеко вниз и оказались в «подвале» будет удобно вернуться, выбрать интересующий раздел — ведь хедер они в 25% пропустили.
Контакты
Огромное количество пользователей нетерпеливы, не хотят искать способы добавить товар в корзину, не хотят читать характеристики. Они предпочитают позвонить и поговорить с менеджером, который все объяснит «на пальцах». Поэтому в футер полезно поместить способы связаться, в идеале это должны быть и опции «позвонить».
Время работы
Актуально для интернет-магазинов. Не все магазины могут позволить себе круглосуточную поддержку с оплатой ставки «живых» операторов.
Поэтому в футере можно поместить отрезок времени, в который доступны менеджеры, а также необходимо добавить, что делать, если потенциальный клиент заглянул в три часа ночи, ему очень хочется получить информацию о товаре. Вполне вероятно, что пользователь оставит запрос и свои контакты, можно будет перезвонить или написать посетителю наутро.
Карта с расположением офиса
Актуально для любых офлайн-услуг или магазинов, которые располагаются не только в интернете, но и в «реальности». До сих пор, несмотря на ограничения и пандемии, очень многие предпочитают «живое общение», а товар надо обязательно «потрогать и пощупать», прежде чем совершать покупку. Отказывать в подобной возможности клиентам нет смысла — поэтому карта поможет сориентироваться.
В футере она не будет никому мешать. Размещать карту в «подвале» лучше, чем на отдельной странице: до выделенной «территории» придется еще несколько раз кликать, а те люди, которым проще приехать, не любят совершать лишние действия онлайн.
Политика конфиденциальности, условия обработки личных данных и др.
Это не вопрос паранойи — о «безопасности в сети» твердят везде и всюду. Если предполагается опция онлайн-оплаты, то посетителю точно не повредит знать, что данные его кредитной карточки не окажутся в свободном доступе, где их сумеют забрать мошенники, а его паспортные данные — там, где ими сумеют воспользоваться, чтобы взять кредит. Нейтральный текст политики конфиденциальности поможет успокоить людей и убрать страх перед совершением онлайн-покупок.
Ссылки на соцсети
Вести социальные сети — хороший тон для любой компании. Кроме того, соцсети гораздо проще и быстрее обновлять, сообщать актуальные новости — не потребуется участие программиста или иного специалиста, как на официальном сайте.
В соцсетях можно быстрее отвечать, поддерживать «живую беседу» с потенциальными клиентами. Те, кто пойдет общаться в соцсети, почти наверняка хотят совершить покупку, но им нужна дополнительная информация, поэтому иконки в соцсетях — полезный инструмент маркетинга для подобных ситуаций.
Информация об оплате
Если магазин поддерживает оплату разными системами, есть смысл добавить такую информацию в футер. Это могут быть иконки-символы MasterCard, Visa, Юмани, Webmoney, Биткойн и другие способы платежей.
Иногда люди уходят, не совершив покупку, только потому что не уверены в том, что смогут заплатить комфортным способом, а «заморачиваться» обменом, например, Webmoney на карту Visa совершенно не хочется. Чем больше средств платежа — тем лучше. И сообщить о такой возможности тоже крайне желательно.
Это основные детали футера. Дополнительно можно добавить копирайты, ссылки на «зеркала» и многое другое.
Правила создания футера
Футер не самый сложный элемент сайта, поэтому правила по его созданию тоже довольно простые:
Заключение
Футер — это общепризнанный и необходимый элемент, который требуется для корректного отображения и восприятия сайта.
Он нужен и для поисковых роботов, которые уже достаточно «умные», чтобы опознавать «подвалы», и для людей, чтобы помогать ориентироваться в навигации страницы. Кроме того, футер является хорошим маркетинговым инструментом.
Header и footer: основные принципы создания шапки и подвала сайта
Шапка и подвал сайта: что такое, назначение
Некоторые элементы веб-страницы более важны для создания первого впечатления, юзабилити и восприятия дизайна сайта в целом. Такими элементами является header и footer.
Пример футера сайта:
Что размещают в хедере сайта
В шапку сайта могут помещать следующие разделы:
Не все элементы должны присутствовать в хедере. Дизайн шапки профиля ограничивается только представлениями дизайнера, нет каких-то обязательных объектов. Однако, некоторые элементы существенно повышают уровень конверсии: если в шапке размещены контакты и кнопка для обратной связи, вероятность отклика пользователя значительно повышается, так как эти элементы видны клиенту в первую очередь.
Рассмотрим несколько примеров хедеров и остановимся на их особенностях.
Примеры дизайна шапки сайта
Классический вид
Двойное меню
В тех случаях, когда ресурс крупный и содержит множество страниц, прибегают к такому приему, как двойное меню.
В интернет-магазине как правило большое количество товаров и категорий, поэтому магазин «Эльдорадо» разбил меню на две части: основное и выпадающее при наведении.
Большое изображение: фото личности или продукта
Например, так выглядит сайт Ани Лорак. Внимание обращено на личность певицы, поэтому размещаются ее фотографии крупным планом. При скроллинге шапка трансформируется и превращается в обычную горизонтальную линию:
Анимация
Чтобы сделать дизайн более привлекательным и запоминающимся, некоторые дизайнеры прибегают к нестандартным решениям и вставляют в хедер анимированные изображения. На примере качается инструмент для сбора металла:
Такой подход тоже имеет место быть, однако, такие анимации занимают много места, поэтому необходимо заранее продумать расположение элементов.
Меню «гамбургер»
После нажатия на значок, появляется страница с меню:
С точки зрения юзабилити сайта нельзя сказать, что это плохой вариант. Такое меню пришло из мобильной разработки и уже привычно пользователям. Гамбургер подойдет промо-сайтам, где основной акцент идет на качественное представление продукта с помощью фото или видео. Для интернет-магазинов такой вариант не подходит, так как клиенту важно иметь в быстром доступе корзину, избранные товары и поле поиска.
Шапка на главном экране
Иногда дизайнеры не выделяют шапку сайта как отдельный блок и встраивают ее в главный экран. Обычно это минималистичное решение, где представлены только ссылки на основные разделы сайта и логотип компании. Особенно такой прием используется в дизайне лендингов.
Шапка-иллюстрация
Иногда дизайнеры отходят от стандартного представления шапки профиля и встраивают навигацию в виде иллюстрации, где ссылки размещены на отдельных объектах. Например:
Это интересное дизайнерское решение, однако, клиент не сразу понимает, как взаимодействовать с интерфейсом, поэтому нужно использовать такие приемы с осторожностью.
Стилизованная шапка
В том случае, если дизайн сайта выполнен в каком-то определенном стиле, нередко шапку сайта также делают стилизованной. На этом примере в хедере расположены известные здания Москвы, с ссылками на страницы с описаниями:
Некоторые бренды под каждый праздник разрабатывают новую шапку для создания атмосферы праздника на сайте. Мы писали об этом в статье, посвященной подготовке сайта к Новому году.
Страница без шапки
Некоторые дизайнеры отходят от традиционных понятий дизайна и не делают шапку сайта в принципе. Например, заменяют верхний блок необычной навигацией, как на этом примере:
Очень сложно оценивать такие решения с точки зрения юзабилити. После перехода на сайт первое время нужно понять, как устроена навигация и что сайт предлагает посетителям. О том, что лучше выбрать, креативность или юзабилити, читайте здесь.
Основные принципы создания хедера
Создавая дизайн хедера, веб-дизайнеру нужно помнить, что это первый элемент, который видит пользователь, и один из самых используемых в интерфейсе. Поэтому необходимо подходить к созданию шапки с особой тщательностью и помнить о юзабилити.
Как оформить шапку, которая будет удобна для клиента, вписываться в стиль всей страницы и способствовать увеличению конверсии? Дадим несколько советов по созданию дизайна хедера.
1. Обращайте внимание на типографику
В первую очередь клиент читает названия разделов и предоставленную компанией информацию: контактные данные, интересные предложения. Поэтому нужно выбрать читабельный шрифт, который не будет ухудшать восприятие.
2. Принимайте во внимание стиль сайта и его назначение
3. Обращайте внимание на расположение элементов
4. Уделите внимание кнопке и веб-форме обратной связи
5. Сделайте хедер фиксированным, если это не нарушает общую концепцию дизайна
Этот пункт больше относится к разработке, однако, дизайнер тоже должен его учитывать. Фиксация хедера означает его перемещение вместе со скроллингом. На нашем сайте при скролле шапка как будто прилипает к верху страницы и всегда находится перед глазами пользователя:
Зачем нужен подвал сайта
1. Визуально завершает дизайн
Бесконечный скроллинг давно не приветствуется в дизайне сайта, так как создает у пользователя ощущение незавершенности. С помощью подвала сайта мы даем клиенту понять, что контент закончен и предлагаем перейти к следующему разделу.
2. Помогает совершить целевое действие
Дополнительные контактные данные или призыв к действию помогает подтолкнуть клиента к совершению покупки или заказу услуги, подписке на рассылку.
3. Направляет пользователя
Дочитав очередную статью пользователь может не возвращать к шапке сайта, а найти нужную информацию в футере.
4. Предоставляет пользователю нужную информацию о компании
Нередко в футере размещают сведения о компании, документы и сертификаты, политику конфиденциальности и прочее.
Примеры дизайна подвала сайта
Рассмотрим, какие элементы могут размещаться в подвале сайта и какой подвал может быть с точки зрения дизайна.
Карта сайта
Контактная информация
В отличие от шапки сайта, в подвале можно предоставить более подробные сведения: несколько телефонов для связи, полный адрес компании и ее расположение на карте. Например, в нашем футере мы разместили адрес и схему проезда до нашего офиса в Москве:
Элементы навигации
Чтобы улучшить навигацию, иногда в футере размещают другие элементы, помимо ссылок на разделы, например, кнопку «наверх», чтобы клиенту не пришлось прокручивать страницу обратно:
Ссылки на социальные сети
Призыв к действию
Чтобы подтолкнуть клиента к целевому действию, некоторые дизайнеры размещают в подвале блок с призывом к действию:
Стилизованное оформление
Иногда сайт завершают просто красиво оформленным подвалом с контактными данными:
Без футера
Как и в случае с хедером, некоторые решения не предусматривают использования подвала сайта:
Основные принципы создания футера
Правильно оформленный футер может не только украсить сайт и привести страницу к логическому завершению, но и принести клиенту пользу, увеличить уровень конверсии сайта.
Несколько рекомендаций по разработке дизайна футера.
1. Делайте футер отличным от общего контента сайта
Чтобы выделить элемент навигации, обратить внимание на контактные данные, дизайнеры обычно делают футер темного цвета или как-то выделяют его из общего фона.
2. Обращайте внимание на типографику
Как и при создании хедера, нужно использовать хорошо читаемые шрифты, следить за интервалами и отступами, чтобы ссылки не сливались друг с другом.
3. Учитывайте важность иерархии
При разработке футера разбивайте его на несколько блоков, сделайте понятными списки и заголовки разделов, учитывайте границы между элементами. Так пользователь легко разберется в содержимом и найдет нужную информацию.
Студия дизайна IDBI уделяет особое внимание разработке header и footer сайта. Мы понимаем, что не будет второго шанса произвести первое впечатление, поэтому подходим со всей тщательностью к содержимому этих двух важных элементов сайта. Примеры наших работ можно посмотреть в разделе «Портфолио».