что это такое, как выглядит и что в нем должно быть, как сделать и оформить подвал самостоятельно — Топвизор–Журнал

Содержание

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

Например, вот так выглядит футер Топвизора:

topvisor.com

Совместно с Антоном Смирновым, создателем SEO‑студии my‑site‑support.ru, разберём, как сделать подвал сайта полезным для посетителей и SEO, что в нём размещать.

В статье мы будем показывать примеры футеров с разных сайтов. Мы не можем на 100 % утверждать, хорошие они или плохие. В каждом случае нужно исходить из целей компании и поведения пользователей на сайте. Никто, кроме вас, не знает, что хорошо или плохо для сайта. Пожалуйста, воспринимайте эту статью как рекомендацию, а не призыв к действию.

Зачем нужен

Футер — это возможность связаться с посетителями в тот момент, когда они доскроллили страницу до самого конца и, скорее всего, собираются уходить. С помощью подвала мы можем побудить их перейти на другие страницы сайта или оставить свои контакты. Поэтому здесь должна быть сконцентрирована вся важная для посетителей информация. 

Кроме того, футер — это дополнительное пространство для внутренней перелинковки сайта. С его помощью мы можем распределить внутренний ссылочный вес. 

Когда используется 

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

Дочитка 

Это когда посетитель сайта изучает и дочитывает весь контент страницы до конца. Такие пользователи, скорее всего, заинтересованы компанией или тем, что предлагается на странице. Поэтому в футере мы даём им возможность продолжить взаимодействие. Например, заполнить форму обратной связи или подписаться на email‑рассылку, посмотреть политику доставки и возврата и т. д.

Быстрый скролл

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

Навигация

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

Как влияет на SEO

Футер — это не просто пространство для ссылок на другие страницы сайта, он влияет и на рейтинг сайта в поисковых системах.

Антон Смирнов, SEO‑эксперт:

«Футер служит для улучшения одного из SEO‑факторов — юзабилити сайта (удобства для посетителей). Поэтому чем удобнее футер для посетителей, тем лучше. 

Плюс по некоторым исследованиям футер улучшает конверсию сайта, поэтому в нём часто размещают призывы к действию (CTA — Call To Action). 

Ссылки, указанные в футере, являются сквозными по всему сайту. Поэтому важно указать в анкорах этих ссылок продвигаемые фразы, но не забудьте проконтролировать, чтобы по определённым словам и фразам не было переспама на странице».

Варианты отображения

Стандартный

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

Футер с бесконечным скроллом

Иногда на сайтах можно встретить бесконечный скролл (прокрутку). Это когда при пролистывании страницы автоматически подгружается всё новый и новый контент, как при просмотре ленты новостей в соцсетях. 

В этом случае «поймать» подвал страницы сложно, приходится быстро скроллить вниз, опережая подгрузку, чтобы успеть кликнуть на нужную ссылку в футере. Это раздражает пользователей и усложняет навигацию, поэтому обычно для таких сайтов делают небольшой статичный футер сбоку от загружающегося контента. 

Контекстный футер

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

Например, сайтом интернет‑магазина могут пользоваться несколько типов аудиторий: оптовые покупатели и розничные. Для оптовиков релевантно разместить в футере условия сотрудничества, контакты отдела по работе с крупными покупателями, ссылки на оптовый прайс, реквизиты компании и т. д. А для розничных покупателей в футере будут актуальны условия оплаты и доставки, отслеживание заказов, телефон техподдержки и т. д.

Обязательные элементы

Разберём элементы футера, обязательные для любого сайта. 

Политика конфиденциальности

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

Обычно политику для сайта разрабатывает юрист, но в некоторых случаях можно использовать стандартные шаблоны. 

В июле 2022 года приняты поправки в закон об обработке персональных данных. При подготовке политики конфиденциальности их нужно учитывать. Подробно о нюансах можно прочитать в статье юриста AG‑LEGAL на vc.ru.

Политику необходимо разметить на сайте так, чтобы посетители могли легко её найти.

pro‑foood.ru

Авторское право

Это текстовое уведомление в подвале сайта, которое указывает на то, что конкретная работа (сайт, контент и т. д.) защищена авторским правом. Текст обычно включает символ © и имя владельца авторских прав. 

Цель — предупредить о том, что авторские права охраняются законом, и защитить контент от копирования. 

citilink.ru

Условия использования

Условия использования или пользовательское соглашение — это договор с пользователем об условиях использования сайта: как можно пользоваться сайтом и его контентом, а чего делать нельзя. Если юзер продолжил пользоваться сайтом или зарегистрировался на нём, то фактически «подписал» договор. Это важный документ, поэтому он также должен быть на видном для пользователя месте. Обычно — в футере.

Полезные элементы

Следующие элементы важны для удобства пользователей:

Адрес и контакты

Местонахождение и контакты на сайтах принято располагать в футере, поэтому именно там посетители и будут их искать. Кроме того, это способ сообщить поисковым системам региональность сайта. Если компания работает по всей России или миру, то указывать адрес не обязательно, но иногда в подвале оставляют адрес центрального офиса.

incity.ru

Телефон, мессенджеры (Telegram, Viber, WhatsApp) и электронную почту лучше размещать ссылками. Так пользователи мобильных устройств смогут в один клик позвонить, открыть нужный мессенджер или почтовое приложение. 

Обратная связь

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

зубыбезболи.рф

Призыв к действию

Как только пользователи долистают страницу до конца, побудите их совершить какое‑то действие, пока они не ушли. 

Какими могут быть призывы к действию:

zarina.rustandupstart.ruraketa.one

Включение призыва в футер — отличная стратегия, потому что он виден на каждой отдельной странице и призывает посетителей совершить целевое действие.

Логотип

Это не обязательно, но логотип в футере — это ещё один способ повысить узнаваемость бренда. Также под логотипом можно разместить короткий текст с вашим главным преимуществом.

flowwow.com

Антон Смирнов, SEO‑эксперт:

«Логотип в футере работает не только на узнаваемость бренда. На лого, как правило, стоит ссылка, которая ведет на главную страницу сайта. Это удобно, и многие посетители этим пользуются, чтобы вернуться на главную. Плюс это усиливает ссылочный вес главной страницы в результате внутренней перелинковки».

Социальные сети

Добавление значков соцсетей в подвал сайта поможет увеличить количество подписчиков в ваших аккаунтах и получить «теплых» клиентов. Некоторые пользователи, которые всё ещё сомневаются в покупке, могут подписаться на соцсети, чтобы понаблюдать за компанией, найти промокоды, поймать скидки, получить больше информации о продукте, посмотреть, как команда коммуницирует с пользователем. 

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

good‑vill.ru

Антон Смирнов, SEO‑эксперт:

«Ссылки на соцсети и кнопки „Поделиться в социальных сетях“ могут помочь улучшить фактор ИКС (индекс качества сайта). Если посетители пользуются ими и делятся ссылкой на страницы вашего сайта, значит, она интересна и полезна, а это ведет к повышению ИКС сайта. 

Плюс если кто‑то поделится ссылкой на ваш сайт, то оттуда может идти дополнительный трафик, что улучшает поведенческие факторы — а это один из ключевых факторов в ранжировании сайтов в поисковой выдаче».

Преимущества

В футере можно указать своё преимущество перед конкурентами. Чтобы не перегружать подвал текстом, некоторые компании добавляют краткое УТП, значки наград рядом с названием компании. Например: 

skillbox.ru

Также преимуществом могут быть высокие оценки в отзывах на Яндекс, Google и других платформах. Например:

tetrika‑school.ru

Перелинковка

Это набор ссылок на важные страницы сайта. Для каждого сайта они свои в зависимости от тематики. Например, в футере интернет‑магазина одежды можно разместить ссылки на категории каталога, таблицу размеров, условия возврата и обмена. Еще пример — сайт языковой школы: тут важны ссылки на программы обучения и расписание занятий. 

Так перелинковка улучшает юзабилити сайта, облегчает поиск информации или товаров.

easyspeak.ru

Если посетители переходят по ссылкам из футера, они больше времени находятся на сайте, отчего увеличивается время и глубина просмотра сайта. А это важный фактор улучшения SЕО.

Опциональные элементы

Эти элементы необязательны, размещаются по усмотрению, в зависимости от типа сайта:

Возраст домена

В футере принято размещать время существования сайта в таком виде: 2010–2022 © [название компании]. Первая цифра — дата создания сайта, последняя — дата обновления. Вместе они показывают возраст сайта. Это влияет, во‑первых, на доверие пользователей, а во‑вторых, на SEO.  

Чтобы в футере всегда отображался актуальный год, нужно использовать php‑функцию. Если возраст сайта небольшой, то лучше этот элемент пропустить и не выносить на сайт.

citilink.ru

Антон Смирнов, SEO‑эксперт:

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

На SEO влияет реальный возраст домена, наиболее критичен возраст для Google, у них есть негласное правило: сайт, у которого возраст домена менее 3 лет, не будет выведен в ТОП‑10 поиска в высококонкурентной нише».

Мобильное приложение

Если у компании есть собственное мобильное приложение, то в футере можно предложить пользователю скачать его. Обычно ссылки на приложение размещают в виде логотипов AppStore и Google Play. Можно также разместить QR‑код для скачивания:

laredoute.ru

Текст в подвале

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

Главное, чтобы этот текст был полезен для пользователя и описывал ваше преимущество перед конкурентами. Спамить ключами в футере не нужно.

ostin.com

Также в тексте футера указывают важные условия пользования сайтом. Например, если сайт на медицинскую тематику, то размещается текст об отказе от ответственности.

napopravku.ru

Антон Смирнов, SEO‑эксперт:

«Подвал довольно часто просматривают, поэтому там нужно размещать текст, который характеризует ваш бизнес с положительной стороны. Можно включать в текст ключевые слова, по которым продвигаетесь, но аккуратно — без переспама».

Поисковая строка

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

starclinic.ru

Способы оплаты

Для удобства пользователей в подвале можно разместить логотипы доступных платежных систем. Если покупатель видит знакомый лого VISA, МИР или QIWI, он может не искать условия оплаты и перейти к заказу, потому что знает: здесь можно оплатить его картой. 

forma21.ru

Карта сайта

Обычно в подвале можно встретить HTML‑карту сайта — это отдельная страница со ссылками на все существующие на сайте страницы. Их могут разделять на разделы или категории, чтобы облегчить навигацию для пользователей и поисковых роботов. 

Сейчас этот вид карты сайта почти не используются. Если у сайта упорядоченная структура и логичное меню, то такая карта пользователю не нужна. А для поисковых роботов лучше создать Sitemap.XML. Подробнее о ней можно прочитать в Яндекс Справке.

ebay.com

Кнопка «Вверх»

Этот элемент помогает пользователю перемещаться с конца страницы в начало одним кликом, избежав долгого скроллинга вручную.  

adriacats.ru

Ссылки на популярные статьи 

С анонсами статей нужно быть осторожнее, чтобы не перегрузить футер. Если позволяет пространство, можно добавить список самых популярных статей. Если места в подвале мало, лучше разместить одну ссылку на раздел «Блог», где пользователи могут почитать все статьи.

Антон Смирнов, SEO‑эксперт:

«Если футер переполнен информацией, то лучше этот блок убрать, если же, наоборот, футер пустой, то можно оставить. Тут еще важно смотреть на ваши продвигаемые фразы. Если в анкоре ссылок на статьи есть нужные вам продвигаемые слова, то я бы рекомендовал оставить этот блок. Главное — не забыть проверить на переспам».

mvideo.ru

Вредные элементы

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

Текст или видео о компании

Подробное описание компании лучше разместить на отдельной странице «О нас», «О компании» или составить короткое описание с УТП, как мы говорили выше.  

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

На примере ниже в подвале сайта добавлено слишком много текста о компании, но нет обязательных элементов: политики конфиденциальности, контактов, формы для обратной связи и т. д.

moreplace.ru

А здесь в футере размещено мелкое видео, которое трудно разглядеть и сразу не понятно, о чём оно и зачем его смотреть:

vazaro.ru

Теги

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

Антон Смирнов, SEO‑эксперт:

«Облако тегов уже устаревший элемент, за его применение можно получить санкции от Яндекса, так как по факту облако тегов — это набор никак не связанных между собой по смыслу ссылок, в которых, как правило, злоупотребляют ключевыми словами, что расценивается как переспам».

Карта со схемой проезда

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

Из‑за особенностей вёрстки в футере она будет либо слишком маленькой, либо займёт слишком много места и вытеснит другие полезные элементы. Например: 

oxford‑team.ru

Как оформить 

Несколько рекомендаций, как оформить футер, чтобы он хорошо смотрелся на сайте.

Определите иерархию. Позвольте юзерам быстрее ориентироваться в подвале сайта: выделяйте жирным шрифтом тематические заголовки и подзаголовки, разделяйте информацию на колонки. Например:

saray.ru

Смоделируйте списки. Делите содержимое футера на тематические списки, это поможет пользователям легче воспринимать информацию. Например, в одном списке можно разместить информацию о компании, во втором — список услуг, в третьем — контакты для связи с компанией. Например:

hoff.ru

Используйте отступы. Добавьте свободное пространство между столбцами в футере с помощью отступов. Это поможет юзеру концентрироваться на каждом отдельном блоке. 

Пространство между содержанием основной части страницы и подвалом тоже нужно разделить отступом. Например:

anecole.com

Визуально отделите от общего контента. Футер должен четко отделяться от основного контента страницы, чтобы бросаться в глаза. Можно сделать более контрастный фон: например, вся страница на светлом фоне, а футер на темном. Также подвал можно отделить длинной горизонтальной чертой. 

Например:

dns‑shop.ru

Антон Смирнов, SEO‑эксперт:

«Самая главная рекомендация — подвал сайта должен быть удобен для посетителей, корректно отображаться на всех устройствах и содержать информацию, которую посетитель ожидает там увидеть, а именно:

В анкоры ссылок включаем высокочастотные продвигаемые фразы».

Типичные ошибки 

Более двух уровней иерархии

Эта ошибка иногда встречается на крупных ресурсах, которые хотят разместить как можно больше ссылок в подвале сайта и используют несколько уровней вложенности. Например, первый уровень — «О компании», второй уровень — «История компании» и третий уровень — «Преимущества». Такое многоэтажное меню делает футер громоздким, что усложняет юзабилити. 

Пример футера со сложной иерархией

Вложенность ухудшает восприятие информации. Лучше разделить ссылки на разделы заголовками. Например, можно выделить раздел «Компания» и ниже разместить ссылки: «Контакты», «Публичная оферта» и т. д. Например:

beloris.ru

Не пытайтесь разместить вообще всю информацию в футере. Проанализируйте, какие страницы сайта более приоритетны для вас и для пользователей. Нужна ли здесь отдельная ссылка на историю компании?

Непонятные названия ссылок в футере 

По названию ссылки должно быть понятно, куда по ней перейдёт пользователь. Например, такие названия, как «Ресурсы» или «Документы», не говорят о том, что скрывается за ссылкой и в каком разделе сайта есть нужная пользователю информация. Называйте ссылки на футере так, чтобы пользователь понимал, куда он попадёт, когда кликнет на них.  

Непонятная структура

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

Например:

syomka‑s‑kvadrokoptera.ru

Скрытый или неразборчивый футер

Если ссылки в футере слишком мелкие или почти прозрачного цвета, это плохо скажется на юзабилити. Некоторые сайты вовсе скрывают подвал с помощью анимации — в этом случае он появляется только при наведении мыши на нижнюю часть экрана. 

Обычно так делают для красоты или чтобы не отвлекать пользователя от основного контента, но на самом деле мы просто скрываем от пользователя дополнительную полезную информацию. 

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

Поэтому в футере следует использовать читабельный размер и цвет шрифта. И главное: не прячем подвал сайта от пользователей.

Примеры футеров

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

holodilnik.rurf.petrovich.rudetmir.rure‑store.rucube‑fitness.rumvideo.rumdmprint.ruzub54.ru 

Вкратце: что учесть при создании футера

1. Содержимое подвала зависит от целей сайта, потребностей и поведения посетителей. Поэтому прежде чем создавать футер, подумайте, кто ваша целевая аудитория, что она ищет и куда вы хотите её направить. Исходя из ответов, вы сможете подобрать правильные элементы для подвала сайта.

2. У футера есть две основные цели: улучшить юзабилити сайта (удобство для пользователя) и распределить ссылочный вес между страницами сайта.

3. С точки зрения продвижения сайтов в футере можно указывать ключи в анкорах ссылок. Но не забудьте проверить футер на переспам, иначе получится обратный эффект.

4. Хороший футер помогает дольше удерживать пользователей на сайте и  побуждает их совершить действие: оставить заявку, подписаться на новости, заказать обратный звонок и т. д.

5. Важно правильно оформить футер, чтобы пользователи могли легко сориентироваться в содержимом и найти нужную информацию. Разбивайте контент на несколько блоков, формируйте списки, делайте заголовки разделов, добавляйте свободное пространство между элементами. 

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

15 инновационных примеров дизайна футера

Футер, пожалуй, самая недооцененная часть веб-сайта, и современные дизайн-тренды стремятся исправить эту несправедливость. Указанный элемент выполняет важную функцию — он служит контейнером для контактной информации, адресов, номеров телефонов, ссылок на социальные сети и копирайта.

Как показывает практика, мы не должны отказываться от размещения подобного контента в футере, потому что посетители привыкли находить его именно там. Дизайнеры зачастую уделяют этой части страницы не слишком много внимания. Однако сегодня мы все чаще видим интересные эксперименты и инновационные способы ее оформления.

В частности, мы замечаем, что футеры становятся больше. Ранее ограниченные самой нижней частью страницы, тонкие и незаметные, сегодня они, кажется, претендуют на значительное пространство, растут в высоту, часто занимая весь экран. Такой подход позволяет создавать аккуратные упорядоченные дизайны, а также размещать в этой области иллюстрации, анимацию и большие фрагменты визуального контента.

Большие футеры часто создаются с различными эффектами раскрытия — первоначально их содержимое спрятано под основным контентом страницы. Отодвиньте его, и вы увидете, что там находится.

Также мы встречаем минималистичные футеры, футеры, состоящие из трех и более частей, футеры с крупной типографикой и так далее.

Но изображение стоит тысячи слов, поэтому хватит болтать! Давайте лучше вместе посмотрим на лучшие примеры инновационного дизайна футера.

1. Canvas Agency

Современное и динамичное Canvas Agency оказывает услуги художникам, представляя их интересы и предлагая им всестороннюю поддержку. Скорее сообщество, чем классическое агентство, Canvas создает безопасную и вдохновляющую среду, в которой все художники могут работать, процветать и развиваться.

Сайт агентства фактически представляет собой “стену” для демонстрации работ художников и их фотографий. Они располагаются на простом светлом фоне в теплых тонах. Когда мы прокручиваем страницу вниз, фон становится темно-фиолетовым или бордовым с едва заметным логотипом агентства. В сочетании с белой типографикой и светло-розовыми элементами интерфейса это создает уютную, но элегантную атмосферу.

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

2. Sol’ace

Сайт магазина мебели и предметов интерьера Sol’ace отражает приверженность компании натуральным экологичным материалам, естественным тонам, плавным изогнутым линиям и классическому дизайну. Все элементы дизайна идеально сбалансированы и будто парят в воздушной визуальной среде. 

Пространство организовано таким образом, что внимание посетителей сразу привлекают представленные товары, и это вполне логично. Однако когда мы добираемся до футера, ситуация меняется. Если до этого момента брендинг играл второстепенную роль, то тут он проявляется в полную силу. 

Перед нами предстает большой футер коричневато-оливкового оттенка. Центральное место здесь занимают огромные буквы, набранные шрифтом Basic Commercial. Массивная типографика уравновешена тонкими линиями сетки и рамками, а также довольно мелким шрифтом, который используется для оформления ссылок меню.

3. Miti Navi

Miti Navi — это компания, предлагающая широкий спектр услуг, связанных с эксплуатацией яхт и других судов, — верфь для парусников, чартерные суда, ремонт. Основу свежей, элегантной цветовой палитры составляют темно-синий и пудрово-розовый оттенки. Она дополнена прекрасной типографикой Voyage, что придает дизайну по-настоящему изысканный вид. 

Однако самая впечатляющая часть сайта — не первый экран или контентные блоки, как это обычно бывает, а футер. Он сливается с предыдущим разделом: красивый переход от светло-розового к темно-синему напоминает нос парусника. Аккуратный элегантный лейаут выглядит сбалансированно, а тонкие линии дополнительно упорядочивают контент. 

Кроме того, футер сайта Miti Navi — это отличный пример использования шрифта GT Pressura, который в данном случае транслирует ощущение профессионализма и технического мастерства.

4. Lunchbox

Lunchbox — система, призванная охватить все, что может включать цифровая деятельность ресторана: от размещения заказа до маркетинга и программы лояльности. Перед нами забавный яркий, смелый дизайн с множеством причудливых и смешных деталей, в котором преобладает ярко-желтый цвет.

Мы снова видим довольно большой футер, который выезжает из-под основного контента, заполняет весь экран и, по сути, выглядит как отдельная страница. Ссылки меню аккуратно расположены по бокам, иллюстрация, соответствующая эстетике сайта, занимает центральное место, а главным героем секции является призыв к действию, приглашающий посетителей заказать тур по продукту. 

Завершающим аккордом нашего захватывающего и увлекательного опыта становится размещенный в самом низу крупный логотип компании.

5. Anti

Anti — дизайн-студия, которая создает лампы из вторичного сырья. Поскольку команда использует только отходы, ее миссия очевидна — циклический подход к материалам и производству, а также забота об окружающей среде. 

Сайт Anti представляет собой современную, элегантную, монохромную демонстрацию как миссии студии, так и ее продукции. Он разделен на геометрические секции и включает как горизонтальную, так и вертикальную навигацию. Благодаря этому главная страница получилась не слишком длинной, и мы быстро попадаем в футер с черным фоном, расположенный под серым разделом с продуктами.  

Футер выглядит аккуратно, здесь очень легко ориентироваться, текст отлично читается. Он содержит лишь навигационные ссылки, разделенные на четыре симметричные колонки. Названия разделов набраны шрифтом Silk Serif, а для самих пунктов используется шрифт без засечек Aeonic. Результат — простота, элегантность и точность.

6. Aquerone

Aquerone позиционирует себя как «первый в Европе роскошный концептуальный магазин CBD (прим. каннабидиол — природный экстракт конопли) и каннабиса». Великолепный сайт Aquerone был разработан нашим старым знакомым Никколо Мирандой, которому мы пели дифирамбы в статье о сайтах, вдохновленных эстетикой плаката. 

Мягкая серо-бежевая палитра, множество интересных маленьких деталей, вдохновленных древним Римом, — этот сайт выглядит в высшей степени элегантно и профессионально. Его достоинства можно перечислять очень долго, но давайте лучше сразу перейдем к футеру. 

Когда мы прокручиваем страницу вниз, контент заключенный в рамку со скругленными углами, медленно поднимается наверх, открывая футер. Самая нижняя часть сайта выглядит так, как будто она все это время была скрыта под его содержимым, а взаимодействие между разделами смотрится очень реалистично.

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

7. Zoox

Zoox — MaaS-компания (прим. mobility-as-service — мобильность как услуга), которая разработала полностью автономный беспилотный автомобиль для перемещения по городу. Нечто среднее между такси и автобусом, Zoox сочетает в себе последние тенденции дизайна транспортных средств с функциональностью и инновационными технологическими решениями.

Перед нами современный сайт в неоновых оттенках с отличной 3D-графикой. Дизайнеры решили немного (но не слишком сильно!) поэкспериментировать с концепцией футера. Это не просто конец страницы, а скорее место, откуда пользователь может перейти дальше — в данном случае на страницу «Автомобиль». Такое решение оживляет дизайн и делает его более динамичным.

8. Antinomy

Antinomy — известная, отмеченная многочисленными наградами креативная студия, которая занимается проектированием цифрового опыта. Среди ее клиентов — Visa, WeTransfer, SpaceX и Alicia Keys. Сайт агентства состоит из белых и черных секций: текстовый контент в преобладает в белых, а черные содержат полноэкранные изображения. 

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

Адрес агентства и ссылки на социальные сети — единственное, что мы видим под ссылкой Mail. Здесь нет никаких декоративных элементов или лишних деталей. Это смелый, несколько жесткий и определенно бросающийся в глаза футер.

9. Cubitts

Легкий и воздушный, но при этом содержательный и своенравный, сайт лондонского производителя очков Cubitts отлично отражает философию и дух компании. Здесь нетрудно заблудиться — просматриваете ли вы совершенно потрясающие модели очков или читаете журнал, вы точно прекрасно проведете время. Но на этот раз мы должны сразу перейти к футеру, поскольку именно он интересует нас сегодня. 

Один из фрагментов текста — тот, который предлагает посетителям связаться с компанией по указанным каналам — описывает офисы компании как «элегантно оформленные, но при этом жизнерадостные и живые» — эта характеристика на самом деле отлично подходит и для футера.

Воздушный, как и остальные разделы сайта, но с немного более темным фоном, футер содержит прекрасную иллюстрацию, несколько утверждений о бренде, ссылки, форму подписки на рассылку, а также всплывающее окно чата. Довольно стандартный контент, но он представлен элегантно и остроумно.

10. Red Company

Red Company — инновационная строительная компания, расположенная в Роттердаме, Нидерланды. Сайт представляет собой современное, профессиональное и тщательно продуманное отображение целей и миссии организации, а также ее наиболее успешных и знаковых проектов. Здесь есть интересные дизайнерские решения, например, разделы с горизонтальной навигацией, а также умеренное количество интерактивных элементов и анимации. 

В целом, сайт выглядит довольно минималистично, но его самая минималистичная часть — футер. Здесь действительно нет ничего лишнего. Состоящий только из логотипа и трех фрагментов текста, элегантный полноэкранный футер с черным шрифтом Freight на белом фоне излучает абсолютную уверенность и надежность.

11. Seed

Если вы читали нашу статью о темно-зеленых веб-сайтах, вы, вероятно, помните Seed, инновационную компанию по производству пробиотиков. Настроение на этом великолепном сайте задают несколько тщательно подобранных оттенков — некоторые из них просто однотонные, а другие имеют текстуру.

Они разделены участками белого цвета — например, секции перед футером на внутренних страницах, — что оживляет атмосферу и создает приятный контраст. Контент распределен преимущественно по краям футера, благодаря чему в нем остается много свободного пространства, и ограничен самым необходимым — сообщением бренда, контактной формой и некоторыми стандартными ссылками.

12. Vide Infra

Vide Infra — это агентство, которое занимается брендингом, веб-дизайном и дизайном продуктов с офисами в Риге и Москве. Оно получило множество наград и работало с такими клиентами, как General Electric, British Airways, DNB и Air Baltic. Монохромный сайт отличается современным и серьезным характером, а его дизайн был неоднократно отмечен профессиональными премиями.

Спустившись в футер, мы снова видим полноэкранный раздел с крупными, смелыми элементами — большая круглая кнопка, ведущая на страницу контактов, и бегущая строка с крупной надписью, приглашающей посетителя получить коммерческое предложение. Футер смотрится просто и аккуратно, но отдельные интерактивные элементы придают ему динамичность и искру.

13. Aroz Jewelry

Компания Aroz Jewelry из Бельгии не только разрабатывает и производит прекрасные ювелирные изделия, но и дает им вторую жизнь, восстанавливая и реставрируя старые украшения. Ее миссия — подходить к изготовлению ювелирных изделий так, как это делали старые мастера — с большой благодарностью и уважением как к ремеслу, так и к клиентам. 

Сайт представляет собой восхитительную, мягкую и женственную презентацию изящных украшений. Он выдержан в пастельных тонах и аккуратно разделен на сегменты тонкими линиями. Но настоящий шедевр — это футер.

Он начинается задолго до самого низа страницы и разделен на три довольно больших секции. Первая приглашает посетителя связаться с компанией. Фоном здесь служит великолепное изображение во всю ширину страницы. Средняя секция содержит ссылку на Instagram на теплом коричневом фоне. Последняя — наиболее близка к традиционному оформлению футера — простые белые ссылки и адрес компании на темном фоне.

Дизайнер сайта следует последним модным трендам на большие полноэкранные футеры, но идет еще дальше, разделяя этот элемент на три аккуратные части.

14. The Scott

У каждого сайта есть футер — один футер, верно? Ну, а у некоторых их даже два! Сайт курорта Scott в Аризоне заканчивается довольно обычным футером с формой регистрации, контактной информацией и меню со ссылками на внутренние страницы. Но это еще не все — продолжайте прокручивать страницу, и футер сдвинется вверх, открывая еще один футер. 

Последний занимает весь экран, имеет легкий, воздушный фон и содержит ссылки на все отели и локации сети Scott. У этого футера даже есть своего рода хедер, поэтому он выглядит как самостоятельная страница.

15. Union Construction

Under Construction — канадская компания, которая занимается ремонтом ванных комнат и кухонь, в первую очередь керамической плиткой и теплыми полами. Веб-сайт представляет собой минималистичную презентацию услуг и выполненных работ, с преимущественно традиционными, но элегантными дизайн-решениями.

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

По мере прокрутки контент перемещается вверх, и на экране появляется собственно футер, внутри которого есть лишь изображение, напоминающее полотенце с логотипом компании. Чтобы не отступать от привычных правил, здесь также расположены копирайт и ссылка “Наверх”. Настроение футера — довольно мрачное, но аккуратное и профессиональное.

Заключение

Прекрасные примеры из списка, безусловно, меняют наши представления об этой привычной, но часто игнорируемой части сайта. Мы увидели несколько по-настоящему замечательных решений — элегантные и утонченные, смелые и выразительные, крупные и двойные, они доказывают, что относиться к футеру как к чему-то второстепенному — большая ошибка.

Посетители всегда ценят усилия. Футер, которому уделили должное внимание, оставляет очень приятное впечатление, дополняет и завершает дизайн. Однако хотим вас предостеречь: если вы планируете создать большой, броский или необычный футер, убедитесь, что он соответствует общему настроению вашего сайта.

Футер должен завершать лейаут, а не нарушать его баланс. Если он спроектирован с любовью и заботой, ваш дизайн обязательно заиграет совершенно новыми красками.

29+ примеров нижних колонтитулов веб-сайтов и почему они так хорошо работают Там нет слишком много прокрутки, когда дело доходит до нижней части веб-страницы, пользователи найдут ее и извлекут большую часть.

Что интегрировать в футер сайта?

Во-первых, давайте посмотрим, какие элементы должны быть интегрированы в нижний колонтитул сайта. Рассмотрите один или несколько элементов из перечисленных ниже и тщательно решите, что включить в нижний колонтитул вашего веб-сайта. Исследования показали, что улучшение нижнего колонтитула веб-сайта может привести к увеличению числа конверсий на 23,77%.
Возьмем эти элементы по одному:

• Copyright

Уведомление об авторских правах, хотя и не является обязательным, все же обязательно для любого веб-сайта. Это уведомление, которое помогает предотвратить нарушение авторских прав. Если кто-то копирует элементы вашего сайта, эти лица не могут заявить о незнании. Нижние колонтитулы, содержащие только уведомление об авторских правах, выглядят просто, но элегантно.

Уведомление об авторских правах обычно включает символ © (символ авторского права), год публикации и имя владельца авторских прав.

• Условия обслуживания

Как уведомление об авторских правах, условия обслуживания не являются обязательными, но они должны быть включены в нижний колонтитул веб-сайта. Они относятся к общим правилам и рекомендациям, которым люди должны следовать при использовании вашего веб-сайта. Они могут называться как таковые («Условия предоставления услуг»), «Условия использования» или «Условия использования», как в примере с Amazon:

. Условия предоставления услуг могут быть принудительно принудительными с помощью методов browserwrap и clickwrap. Метод browserwrap означает включение Условий обслуживания через ссылку в нижнем колонтитуле веб-сайта. Однако метод clickwrap относится к размещению условий обслуживания в формах, то есть когда пользователи пытаются создать учетную запись. Когда они нажимают «Отправить», они также должны согласиться с условиями обслуживания этого сайта.

• Контакты, адрес и время работы

Одним из наиболее важных элементов нижнего колонтитула веб-сайта является контактная информация. Если людям нравится то, что они видят на странице, они захотят связаться с вами дальше. Если оставить номер телефона, адрес электронной почты и физический адрес в нижнем колонтитуле, это очень поможет им.

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

Все, что вам нужно сделать, это сообщить, что вас можно найти через некоторые точки контакта, которые легко идентифицировать в нижнем колонтитуле веб-сайта.

Нижний колонтитул ниже был создан с помощью темы Mesmerize для демонстрации ресторана Pizza.

Нижний колонтитул темы Mesmerize

• Кнопки социальных сетей

Рекомендуется размещать значки социальных сетей в нижнем колонтитуле своих веб-страниц. Вы хотите, чтобы ваши посетители оставались на сайте как можно дольше. И вы захотите направить их в другие места/группы только после того, как они примут во внимание всю информацию, представленную на сайте.

Поэтому размещать иконки соцсетей в шапке или теле страницы не совсем рекомендуется. Однако, когда они размещены в нижнем колонтитуле веб-сайта, они заставляют ваших посетителей дольше оставаться с вашим бизнесом (даже если они находятся где-то еще в Интернете).

• Виджеты

Виджеты — это небольшие приложения, с помощью которых можно вставлять различные фрагменты контента в нижний колонтитул веб-сайта. Некоторые примеры включают «Календарь», «Архивы», «Категории», «Последние сообщения», «Последние комментарии»… и этот список можно продолжить.

Ниже приведен пример нижнего колонтитула с включенными виджетами:

• Описание

Некоторые могут захотеть включить описание в нижний колонтитул своего веб-сайта. Или несколько ссылок с краткими презентациями того, что характеризует бизнес. Приведенный выше пример представляет презентацию веб-сайта, размещенную в нижнем колонтитуле. Вот еще пример — со ссылками на короткие презентации бизнеса:

• Поле поиска

Было бы полезно включить окно поиска в нижний колонтитул веб-сайта. Пользователи могли не найти в теле страницы то, что искали; когда они доходят до конца страницы, вы предлагаете им выполнить конкретный поиск предмета, который они ищут. Это признак того, что, хотя они достигли конца страницы, они не достигли конца веб-сайта. Они могут перейти дальше на веб-сайт и ознакомиться с необходимой информацией.

• Вариант подписки

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

Нижний колонтитул, созданный с помощью темы Mesmerize

• Призыв к действию

Рекомендуется включить четкий призыв к действию в нижний колонтитул веб-сайта. Теперь пришло время действовать. Не упускайте этот момент и приглашайте пользователей к дальнейшему исследованию, как в примере ниже. Призывы к действию вполне могут увеличить коэффициент конверсии, помогая сомневающимся пользователям принять решение в пользу продукта/информации/услуги и т. д.

Что вдохновляет нижний колонтитул вашего сайта?

С помощью элементов, перечисленных выше, вы можете создать сочетание визуального и письменного оформления, которое оставит у пользователей определенное впечатление о вашем веб-сайте.
Итак, что же вдохновляет читателей нижний колонтитул веб-сайта?

• Просмотр веб-сайта

Быстрый взгляд на веб-сайт может вызвать более тесную связь пользователей с этим веб-сайтом. Обзор наиболее важных страниц/информации в виде краткого списка ссылок может иметь большое значение для дальнейшего привлечения пользователей.

Источник: https://www.awwwards.com/

• Продолжить навигацию по сайту

Иногда футер может быть настолько интригующим, что не отпускает пользователя. Он предлагает ему/ей продолжить навигацию по сайту и найти ответ на ключевой вопрос: нравится ли мне этот сайт? Что вы думаете по этому поводу?

Поощрение к действию (будь то прямое или косвенное) вполне может найти свое отражение в нижнем колонтитуле веб-сайта. Shell предлагает пользователям выполнить определенное действие в зависимости от их профиля и в очень элегантной форме:

В центральном столбце кратко спрашивается «Можем ли мы помочь?» и дает список возможностей действовать в ситуации, которая лучше всего описывает определенного пользователя.

• Чувство принадлежности к сообществу

Владелец веб-сайта может по-разному оформить нижний колонтитул, чтобы выразить это чувство. В приведенном ниже примере дизайнер делает это визуально, выражая в нескольких красочных графических элементах атмосферу в определенной географической локации в данное время.

Источник: https://www.awwwards.com/

• Чистота

Соблюдая определенную иерархию информации и соответствующим образом группируя ссылки, нижний колонтитул веб-сайта может создавать впечатление организованного, аккуратного и чистого, готового к изучению. Вот что показывает приведенный ниже пример при сканировании пользователями, уже достигшими нижнего колонтитула веб-сайта:

Нижний колонтитул, созданный с помощью темы Mesmerize

• Профессионализм

Красивый футер имеет все шансы выглядеть профессионально и транслировать, что в выделенном пространстве нет лишних элементов. Ни один элемент не является лишним, и все хорошо подходит для передачи ценностей, присущих организации.

Ниже вы можете найти самые популярные типы нижних колонтитулов веб-сайтов, узнать, когда их использовать и что они делают для вашего веб-сайта.

Существует общая тенденция в веб-дизайне, которая поощряет создание нижних колонтитулов с большим количеством элементов и информации. Почему это?

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

Joulefinancial.com предлагает большое количество информации в нижнем колонтитуле, что позволяет посетителям легко находить контактные данные и знакомиться с дополнительной образовательной информацией, предоставляемой сайтом.

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

Копирайт, значки социальных сетей или кнопки подписки можно расположить под некоторыми полезными ссылками на сайты и любой другой ценной информацией.

Demicreative.com имеет простой призыв к действию, когда приглашает пользователей «Сообщите нам». За приглашением следует почтовый адрес и номер телефона, что помогает людям «высказать свое мнение» о своем бренде. Синий фон выглядит обнадеживающим и профессиональным, облегчая тем, как эти люди могут вступить в сотрудничество с Demicreative.

Bluestag.co.uk также содержит четкий призыв к действию «Наймите нас», за которым следует контактная информация. Номер телефона и адрес электронной почты кликабельны и упрощают процесс контакта для всех, кто склонен «нанять» Bluestag. co.uk.

Socialtriggers.com имеет более очевидный призыв к действию. Традиционная кнопка CTA выдающаяся — в нижнем колонтитуле веб-сайта, благодаря своему расположению и яркому цвету.

Emaildesign.beefree.io — еще один пример нижнего колонтитула, ориентированного на призыв к действию. После просмотра веб-страницы люди более склонны выбирать услуги, которые предоставляет компания. Именно поэтому кнопка «Перевести меня в редактор Bee Mail» приглашает людей попробовать услугу компании даже из нижнего колонтитула сайта.

Social Fresh имеет только ссылку в меню на страницу «О нас». Остальная часть домашней страницы заполнена статьями, которые объединяют их компетенции, поэтому при достижении нижней части страницы может возникнуть необходимость узнать больше о компании. В результате они разместили краткое описание компании в левой части нижнего колонтитула для людей, которые больше заинтересованы в их деятельности.

Wpbeginner.com имеет аналогичный нижний колонтитул, с некоторым пространством, посвященным описанию компании. Он адресован людям, которые заинтересовались одной статьей, а затем хотят узнать больше о Wpbeginner.com. Основываясь на том, насколько убедительно описание, люди решают, отмечают ли они веб-сайт как точку отсчета для будущих связанных поисков.

Этот пример нижнего колонтитула для нашего демонстрационного веб-сайта Mesmerize Fashion  был разработан таким образом, чтобы в нем было много ссылок, представляющих организацию и последние сообщения, опубликованные в блоге. Они структурированы в соответствии с простой иерархией, чтобы соответствовать стандартам чистоты и избежать беспорядка.

Нижний колонтитул, созданный с помощью темы Mesmerize

Nytimes.com имеет нижний колонтитул, в котором перечислены все категории и подкатегории журнала. Большая его часть заполнена ссылками на эти категории. После того, как люди ознакомились с некоторыми статьями непосредственно с главной страницы, они могут легко перейти из нижнего колонтитула в другой раздел и просмотреть соответствующие ему статьи.

Webflow.com/ecommerce перечисляет широкий спектр продуктов/услуг, предназначенных для разработки интернет-магазинов. Вам нужно только выбрать из различных сегментов предложений, и вы попадете на страницу с подробным описанием этих предложений.

Может быть такая вещь, как простой нижний колонтитул. Он включает только уведомление об авторских правах, без дополнительной информации.

Chobani.com содержит ссылки на Правила и условия, а также Политику конфиденциальности, действующую для веб-сайта. Так что в данном случае футер — это место для заполнения необходимой, но не такой уж интересной информации.

На сайте Architecturaldigest.com есть более подробный параграф о Пользовательском соглашении и Политике конфиденциальности. Размещение информации обусловлено двухуровневым футером, так как правила сайта представлены в виде подфутера.

Bluefountainmedia.com имеет нижний колонтитул с богатой контактной информацией: включены карты для геолокации, адреса офисов и штаб-квартиры. На заднем плане наводящее на размышления изображение, кажется, приглашает людей связаться с командой компании.

Так же очевидно, как место для подписки на новостную рассылку, значки социальных сетей приглашают пользователей следить за брендом Guerlain в социальных сетях и вносить свой вклад в сообщество компании.

Нижний колонтитул, который заставляет людей блуждать по страницам сайта

Нижний колонтитул веб-сайта Ebay предлагает ссылки, которые побуждают людей оставаться на сайте и бродить по нему в поисках большего.

Идея несуществующего футера коррелирует с бесконечной прокруткой. Он подходит для некоторых веб-сайтов с большим количеством пользовательского контента или газет, где новые статьи представляются одна группа за другой, бесконечно.

Хорошим примером этого является Mashable.com:

Чтобы собрать все это вместе

Не следует пренебрегать нижним колонтитулом веб-сайта. Согласно исследованиям и различным исследованиям, это благоприятное место для увеличения конверсии. В зависимости от типа веб-сайта и целей каждой страницы нижний колонтитул может включать в себя различные элементы, используемые посетителями. Единственное, что вам нужно сделать, это выбрать ПРАВИЛЬНЫЕ элементы для размещения в нижнем колонтитуле веб-сайта и организовать их в соответствии с четкой структурой, удобной для просмотра и извлечения выгоды.
[идентификатор sibwp_form=1]

13 уникальных примеров дизайна нижнего колонтитула веб-сайта

Дизайнеру легко разобраться с основными компонентами веб-дизайна. В конце концов, нужно придумать макет, вставить навигацию и убедиться, что все работает вместе. Когда дело доходит до нижнего колонтитула, вы можете просто сдуть его. Мы получим это.

Но нижний колонтитул служит переходом к дальнейшему взаимодействию. Он перебрасывает людей на разные страницы. Это побуждает их к действию. Это держит их на веб-сайте. Прежде чем мы рассмотрим примеры уникальных нижних колонтитулов, давайте обсудим, почему они важны.

Почему важен дизайн нижнего колонтитула

Обратите внимание на нижний колонтитул. После всего времени и усилий, затраченных на разработку веб-сайта, возникает искушение пренебречь этим последним элементом. Хотя нижний колонтитул может быть элементом, спрятанным в самом низу веб-страницы, это не означает, что пользовательский опыт заканчивается. Вместо этого нижний колонтитул может функционировать как ворота к другому контенту, отображать заманчивые значки социальных сетей, собирать адреса электронной почты и дополнительно передавать информацию, которую люди должны знать.

Нижние колонтитулы означают лучшую навигацию

Допустим, кто-то просмотрел все содержимое целевой страницы и оказался в нижней части страницы. У них могут быть дополнительные вопросы или другие области, которые они хотят исследовать. Лучшие нижние колонтитулы веб-сайтов подобны микрокосму остального веб-дизайна, заключая в себе наиболее важные его части, предоставляя кому-то прямой доступ к хорошо структурированному списку навигационных опций.

Нижние колонтитулы веб-сайтов передают важную информацию

Будь то слоган или какое-либо другое обобщение продуктов или услуг бренда, нижний колонтитул оставляет у вас последнее впечатление. Это может повлиять на то, будут ли они выполнять призывы к действию или углубятся в остальную часть веб-сайта. Этот последний фрагмент текста может занимать небольшое пространство, но он может оказать большое влияние на то, как кто-то будет взаимодействовать с остальной частью дизайна.

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

Нижний колонтитул дает последний призыв к действию

Если вы хотите, чтобы кто-то подписался на информационный бюллетень, начал подписку на продукт или услугу или собирал адреса электронной почты другим способом, нижний колонтитул веб-сайта может быть последней возможностью собрать эта важная информация для клиентов. Весь контент, ведущий к этому, вполне может подтолкнуть кого-то к тому, чтобы ввести свой адрес электронной почты и стать намного ближе к тому, чтобы стать постоянным клиентом.

Нижние колонтитулы могут повысить поисковую оптимизацию

Когда поисковые роботы Google сканируют веб-сайт, одним из факторов, который они анализируют, является количество релевантных ссылок. Представление карты сайта или других встроенных ссылок дает им лучшую структуру, помогающую определить, о чем ваш веб-дизайн. Размещение навигационных ссылок в дизайне нижнего колонтитула веб-сайта может повысить SEO-оптимизацию вашего веб-сайта и помочь ему завоевать популярность в обычных результатах поисковых систем.

13 уникальных дизайнов нижнего колонтитула сайта

Ознакомьтесь с этими 13 веб-сайтами, которые правильно оформляют нижний колонтитул.

1. Avo

Данные и аналитика могут помочь компании в достижении ее высшей цели. Avo предоставляет предприятиям мощную платформу для управления и обработки всех важных данных.

Да, здесь содержится тяжелая техническая информация, но дизайн этой веб-страницы позволяет избежать скучной пустоты, в которую попадают многие технологические компании. Гладкие иллюстрации, множество цветов и размеров разбросаны повсюду, придавая ему веселую энергию, которая уравновешивает более серьезные аспекты продукта Avo.

Давайте посмотрим на нижний колонтитул. Призыв к действию сразу привлекает ваше внимание: «Начните использовать Avo сегодня». Непосредственно под ним находится поле для ввода адреса электронной почты, чтобы начать этот процесс. Они не засоряют свой макет слишком большим количеством встроенных ссылок в нижнем колонтитуле и сохраняют простоту. И нам нравится, как авокадо отправляется в океанское приключение вправо, что так хорошо символизирует этот первый шаг.

Значки социальных сетей справа — еще один приятный штрих, и горизонтальный взгляд сквозь экранное пространство сразу бросается на них.

Минимизировав количество ссылок и предоставив достаточно пространства вокруг различных визуальных элементов, Avo удалось создать чистый и простой нижний колонтитул с нужной индивидуальностью.

2. Clade Design

Полная контрастных форм, увлекательных микровзаимодействий и радостной палитры цветов, эта домашняя страница дизайнерской фирмы Clade Design выделяется своим причудливым чувством творчества.

Повторяющаяся форма в этом макете — фоновая волна. Мы видим его вверху синим цветом, и у него есть несколько разных цветов фона для каждого раздела. Внизу страницы есть похожая синяя волна, которая делает этот нижний колонтитул отличным дополнением к верхней части дизайна. Даже если бы вы не обращали внимания, вы бы интуитивно почувствовали, что находитесь в конце этого дизайна нижнего колонтитула веб-сайта.

Этот пример дизайна нижнего колонтитула является уроком простоты. Он состоит из минимального количества ссылок, кнопки призыва к действию «Свяжитесь с нами» в крайнем левом углу экрана и короткого блока значков социальных сетей справа. Этот нижний колонтитул хорошо сочетается с остальным дизайном, с чистым макетом и четким призывом к действию.

3. Designies

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

На макете веб-сайта, заполненном белым пространством, темно-розовый нижний колонтитул контрастирует с темно-серыми и черными вспышками дизайна. При прокрутке до этого последнего раздела основная верхняя навигация исчезает, оставляя синюю кнопку призыва к действию «Стать дизайнером» в правом верхнем углу. Убрав меню, вы сфокусируетесь на этой кнопке CTA. Встроенные ссылки используются в качестве основной навигации, и если кто-то хочет перейти в разные части веб-сайта, легко найти ссылку, которая приведет его туда. Никто никогда не остается висеть без четкого средства навигации, где бы он ни находился.

Благодаря огромному пространству, посвященному их подписке на рассылку, и модному сочетанию цветов нижний колонтитул Designies делает его идеальным завершением их целевой страницы.

4. Think32

Нам всегда приятно видеть специализированные маркетинговые агентства. Сосредоточенность — сильная стратегия, позволяющая выделиться среди конкурентов.

Think32 из Австралии — маркетинговое агентство для стоматологических кабинетов. Зубные образы тонкие, а общий дизайн проецирует тип современной стилизации, которую подхватило бы любое высокоэффективное агентство. Мы уверены, что 9из 10 веб-дизайнеров и дантистов согласились бы.

Нижний колонтитул размещает призыв к действию прямо в центре, а светло-розовая кнопка подписки рядом с контактной формой электронной почты привлекает внимание прямо к ней. Нам также очень нравится включение «Продуманный маркетинг для стоматологических клиник» в левом пространстве, которое резюмирует философию их агентства, еще больше подчеркивая их опыт.

5. Hologram

Hologram предоставляет компаниям то, что им нужно для подключения своих технологий к сотовым сетям. Будь то электрические скутеры, дроны или датчик на промышленном оборудовании, Hologram и SIM-карты, которые они производят, помогают предприятиям связывать свои технологии.

Это специализированная область технологий с множеством сложностей, но Hologram не скупится на то, чтобы сделать этот дизайн визуально привлекательным. Благодаря анимациям и микровзаимодействиям, активируемым прокруткой, дизайн предлагает множество возможностей для взаимодействия и навигации по их контенту.

Точно так же, как мы видели на веб-сайте Designies, этот нижний колонтитул также выполняет функцию исчезновения верхней навигации. Затем встроенные ссылки в нижнем колонтитуле предоставляют все возможности навигации.

Прямо в верхней части нижнего колонтитула мы видим поле с фиолетово-синим градиентом и 2 кнопки призыва к действию. Меняющиеся цвета поля выделяются на сплошном темно-синем квадрате под ним, создавая ощущение, что оно находится на слое над нижним колонтитулом. Это очень хорошо работает, выделяя этот блок призыва к действию среди остальной части нижнего колонтитула.

Дизайн нижнего колонтитула веб-сайта Hologram известен как толстый нижний колонтитул. Благодаря обширному списку ссылок он работает как еще одно средство навигации по веб-дизайну и дает поисковым системам более точное представление о том, о чем сайт.

Читайте по теме: WordPress для Webflow: как компания Hologram модернизировала свой веб-сайт

(Подсказка: посмотрите на последнюю запись.) Оставайтесь с нами… это всплывет снова. Но давайте перейдем к этому нижнему колонтитулу от Savvy.

Дизайн включает один большой блок нижнего колонтитула в нижней части веб-страницы с прямыми линиями и меньшее поле с закругленными углами над ним, содержащее фиолетовую кнопку призыва к действию «Начать».

Savvy создает специальные инструменты и приложения для бизнеса с минимальным кодом, и Z-макет, который предшествует этому нижнему колонтитулу, показывает все, что они делают. Этот путь через веб-дизайн ведет прямо к содержимому нижнего колонтитула со встроенными ссылками, ведущими на самые важные страницы, и формой подписки по электронной почте в качестве вторичного призыва к действию.

7. Astra

Взлом вашего веб-сайта может вызвать сильный стресс. Во-первых, существует реальная возможность компрометации конфиденциальных данных. Тогда есть главный звон, который принимает ваша онлайн-репутация. Программное обеспечение Astra помогает предприятиям и другим лицам управлять веб-сайтами с надежной защитой от кибератак.

Это мог бы быть долгий путь сквозь тьму и гибель хакеров, но вместо этого дизайн фокусируется на оптимизме избавления от этого беспокойства. Благодаря синей, оранжевой и желтой цветовой гамме это вдохновляет пользователей.

Нижний колонтитул со сплошным блоком темно-синего цвета указывает на точку после ярких форм и воздушной планировки, которые ведут к нему. Благодаря единообразному набору столбцов, встроенным ссылкам на остальную часть веб-сайта и аккуратному блоку социальных сетей этот линейный макет контрастирует с остальным дизайном, что делает его идеальной конечной точкой.

8. Fiddler Labs

Давайте будем честными, для тех, кто не знаком с тонкостями искусственного интеллекта и науки о данных (включая этого автора), веб-сайт Fiddler Labs может показаться немного пугающим.

Несмотря на большое количество технической информации, сайт также может похвастаться не менее креативным дизайном. Короткая прокрутка показывает многоуровневые визуальные эффекты, придавая макету ощущение объемности, а анимированные скриншоты, иконография и другие визуальные элементы делают вещи интересными.

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

9. Brass Hands

Просматривая веб-сайт брендингового агентства Brass Hands, вы получаете плавный пользовательский интерфейс с плавным перемещением текста при прокрутке, рекомендуемые проекты, которые увеличиваются при наведении курсора, и другие самородки дизайна. добро. Ничто не раздражает и не неуместно, весь макет связан чувством последовательности.

Когда вы плывете вниз к нижнему колонтитулу, это мягкое приземление. Простая строка «Давайте работать вместе» и ссылки на их социальные сети делают этот нижний колонтитул чистым завершением целевой страницы Brass Hands.

10. Vectornator

Многие дизайнеры придерживаются проверенных способов создания векторных изображений, и это нормально. Но всегда интересно видеть, как такие компании-разработчики программного обеспечения, как Vectornator, выступают с другим подходом. На веб-сайте представлено множество потрясающих примеров того, что возможно с их инструментом. Этот современный макет также изобилует анимациями, полными быстрых правок, которые отражают творческий процесс использования Vectornator.

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

Прокрутка вниз до нижнего колонтитула приводит к исчезновению верхней навигации, оставляя содержащиеся в ней встроенные ссылки, указывающие в нужном направлении. Это фантастический урок сдержанности, показывающий, что некоторые из лучших нижних колонтитулов имеют самый простой дизайн.

11. Привет5

Hi5 создан для создания команды. Это забавное приложение позволяет членам команды хвалить друг друга, общаться и оставлять отзывы, а также дает менеджерам возможность анализировать, как каждый справляется с достижением целей компании. Дизайн отражает этот позитивный настрой с игривой цветовой палитрой синего, желтого и розового цветов, а также большим количеством контента, рассказывающего о том, как приложение Hi5 может укрепить команды.

В левой части нижнего колонтитула расположены кнопки, дающие возможность загрузить приложение в Google Play, WhatsApp, Apple App Store и других местах. Благодаря темно-синему цвету эти кнопки невозможно не заметить, что делает их центром нижнего колонтитула.

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

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

12. Appasaurus

Веб-дизайном для агентства по разработке приложений Appasaurus занимаются многочисленные динозавры. Дизайн открывается оригинальной и забавной иллюстрацией их сотрудников в виде этих доисторических животных. Эта странная тема поддерживается во всем этом восхитительном веб-пространстве, с целым набором динозавров, выполненных в непринужденном стиле.

Над нижним колонтитулом мы обращаемся к последнему динозавру, тираннозавру, со словами: «Не позволяйте вашему приложению идти по пути динозавров». Это такая забавная привязка к остальной части дизайна, и она прекрасно сочетается с белой кнопкой ценообразования чуть ниже. С черным фоном, который всегда хорошо сочетается с белым и синим, мы получаем небольшой список параметров навигации, а также ссылки на их социальные сети. С непочтительным стилем, который распространяется на их нижний колонтитул, Appasaurus показывает, что немного абсурда может сделать пользовательский опыт более приятным.

This entry was posted in Популярное