Оформление футера сайта: Как разработать идеальный футер сайта? Подробное руководство с примерами

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

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

Нужна политика конфиденциальности? Мы использовали TermsFeed для создания нашего или этого удобного бесплатного генератора политик конфиденциальности.

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

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

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

5.

Посетители ожидают найти контактную информацию в правом верхнем углу заголовка.Это стандарт веб-дизайна. Также стандартно найти ссылку «контакт» в правом нижнем (или в центре) нижнего колонтитула.

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

1. Отправку формы легко отслеживать как выполнение цели в Analytics.
2. Посетитель не может находиться на компьютере, который он использует для электронной почты.
Формы
3. отправляют посетителей на страницы с благодарностью, которые могут предоставить больше сообщений и призывов к действию.
4. Forms отправляют посетителям электронные письма с автоматическим ответом, опять же, больше сообщений и CTA.
5. Forms может сохранять отправленные материалы в базу данных на случай, если электронная почта не пришла.
6. Forms может подключаться к автоматизации маркетинга и другим системам.
В формах
7. можно задавать конкретные вопросы и направлять представления конкретным людям в зависимости от ответов.
8. Ссылки электронной почты являются магнитом для спама.

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

У этого веб-сайта отличный копирайтинг, но контакт был бы лучше, чем ссылка по электронной почте.

6. Адрес и ссылка на карту / направления

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

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

7.

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

8.

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

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

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

Вот несколько источников идей для навигации по нижнему колонтитулу:

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

9.

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

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

Вот хороший пример от Рафаля Томала.

10. Виджеты социальных сетей

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

Это имеет смысл только в том случае, если вы активны в этой сети и имеете твердые редакционные стандарты в отношении того, чем вы делитесь.

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

11. Регистрация по электронной почте

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

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

в нижнем колонтитуле должны по-прежнему соответствовать лучшим практикам подписки по электронной почте, предлагая социальное подтверждение (сколько подписчиков ранее?) И устанавливая ожидания (что получает подписчик? Как часто?).

Одинокий маленький ящик с адресом электронной почты с кнопкой отправки, скорее всего, не очень хорошо конвертируется, как этот парень…

12.Логин

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

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

13. Нажмите

Другой тип неперспективов — это пресса. На самом деле только часть 1% ваших посетителей — журналисты и редакторы.Так что не тратьте драгоценное место в основной навигации на ссылку для прессы.

Если кто-то из СМИ все же зайдет к вам, они прокрутят вниз и найдут его.

14. Инструмент поиска по сайту

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

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

На веб-сайте Smalley Steel Ring есть инструмент быстрого поиска продуктов, помогающий посетителям сразу перейти в каталог с любой страницы.

15. Изображения

Если вы действительно хотите украсить нижний колонтитул, добавьте к нему изображение. Это шанс добавить сайту индивидуальности.

В нижнем колонтитуле Mason-Dixon Knitting есть изображение Кей и Энн, двух основателей.

16. Мини-галерея

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

Experimental Sound Studio есть галерея фотографий. Щелчок по фотографии вызывает изображение в лайтбоксе.

17. Брендинг

Изображения — еще один шанс укрепить бренд. Это хорошее место для использования альтернативной версии вашего знака или использования вашего логотипа по-другому.

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

18. Ваша миссия. Ваши ценности

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

The Better Government Association не только повторяет их миссию, но и показывает влияние, которое они оказали, используя цифры справа. Невозможно упустить из виду, почему и как они делают то, что делают.

19. Ключевые слова для поисковой оптимизации

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

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

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

20. Награды и сертификаты

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

ProTip: объедините все свои награды, сертификаты и логотипы членства в «ящик доверия».

Nitel завоевал множество наград за эти годы. Сбор этих логотипов и размещение их в нижнем колонтитуле веб-сайта помогает укрепить доверие в очень конкурентной отрасли.

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

• Сертификаты безопасности для интернет-магазинов
• Сертификат BBB для предприятий с местной аудиторией
• сертификатов Adwords для компаний цифрового маркетинга.
• сертификатов GSA для компаний, работающих с государством
• Сертификация MWBE для предприятий, принадлежащих меньшинствам и женщинам
• Сертификат B-Corp для социально-ответственного бизнеса

21.Членство в ассоциациях

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

Cookies By Design отображаются в правом нижнем углу нижнего колонтитула.

22. Отзывы

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

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

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

23. Последние статьи

Если вы активно занимаетесь контент-маркетингом, вы можете дать своему сайту «импульс», но разместив последний контент прямо в нижнем колонтитуле.

делает это на своем веб-сайте вместе с социальным виджетом.

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

24. Предстоящие события

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

25. Видео: Ваше приветственное сообщение

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

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

26. Аудио: Your Jingle

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

Сайт Food For Life встраивает в футер небольшой аудиоплеер с их джинглом. Очаровательный!

27. Один… последний… Призыв к действию

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

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

Другие идеи дизайна нижнего колонтитула

Вот еще немного идей для создания нижнего колонтитула вашего следующего веб-сайта.

Цветовые схемы нижнего колонтитула

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

ProTip: Будьте осторожны при изменении цветовой схемы (с темного текста на светлом фоне на светлый текст на темном) в области содержимого страницы. Это может привести к появлению «ложного дна», заставляя посетителей думать, что они попали в нижний колонтитул, и, возможно, пропустили остальную часть страницы.

Липкий нижний колонтитул

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

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

Хотите собственный липкий нижний колонтитул? Используете WordPress? Вот плагин для создания липких нижних колонтитулов.

Бесконечная страница… Без нижнего колонтитула!

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

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

Что нужно включить в дизайн нижнего колонтитула? Наши рекомендации о том, что включать в нижний колонтитул

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

Задайте себе вопрос: есть ли у посетителей важный вопрос, на который нет ответа в заголовке? Если да, добавьте его в нижний колонтитул.

Итак, есть ваши идеи дизайна 27 нижних колонтитулов. Но, пожалуйста, не используйте их все, иначе у вас будет самый толстый нижний колонтитул всех времен. Подумайте о своем посетителе и о том, что может его зацепить, прежде чем он попадет в конец страницы!

Особая благодарность Курту и Бену за их помощь в исследовании этой статьи! Если вы вспомните что-то, что мы упустили, дайте нам знать в комментариях ниже.

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

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

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

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

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

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

Почему вы должны вкладывать время в нижний колонтитул

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

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

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

Для большинства веб-сайтов желаемый эффект нижнего колонтитула:

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

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

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

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

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

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

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

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

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

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

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

Лучшие практики дизайна нижнего колонтитула веб-сайта

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

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

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

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

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

Следуйте взгляду пользователей

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

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

В случае англоговорящих людей исследование горизонтального внимания, проведенное Nielsen Norman Group, показывает, что средний пользователь тратит около 80% своего времени на просмотр контента в левой половине экрана. В этом исследовании подчеркивается важность учета языка при прогнозировании того, на какую часть экрана пользователи будут смотреть в первую очередь.

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

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

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

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

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

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

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

Теперь мы знаем, о чем вы, возможно, думаете: разве не хорошо позволить им продвигать веб-сайт, даже если это произойдет до того, как у них появится возможность просмотреть все его содержание? Да, но похоже, что большинство пользователей привыкли с помощью ментальных моделей находить значки социальных сетей рядом с нижним колонтитулом или на нижнем колонтитуле.
По данным Orbit media, 72% ведущих маркетинговых веб-сайтов включают свои значки социальных сетей в дизайн нижнего колонтитула веб-сайтов.

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

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

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

Поисковая оптимизация

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

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

Наполнение ключевыми словами означает перегрузку контента сайта популярными словами. Вы, вероятно, имели несчастье столкнуться с этим в какой-то момент — Google считает это спамом и наказывает сайты, которые это делают!

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

Почему? Потому что он будет виден на каждой странице, и вам нужно только один раз добавить его в дизайн нижнего колонтитула вашего сайта!

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

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

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

Также удобен номер контактного телефона, а еще лучше — кнопка CTA, чтобы сразу набрать номер!

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

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

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

Однако, по данным Orbit Media Studios, менее 1% трафика веб-сайта — это пресса, желающая связаться с ними, поэтому вам не следует тратить для этого ресурсы своего основного веб-сайта на кнопку.Угадайте, где прекрасное место — дизайн нижнего колонтитула вашего сайта!

Примеры дизайнов нижних колонтитулов, которые вы хотите скопировать

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

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

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

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

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

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

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

The New York Times не может быть лучшим примером веб-сайта с большим количеством контента, но при этом не вызывающим проблем с нижним колонтитулом.Им удалось организовать большое количество категорий в лаконичную и легко читаемую карту сайта в дизайне нижнего колонтитула своего веб-сайта.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Henning Larsen — дизайн-студия, основанная в Копенгагене. Дизайн их веб-сайтов довольно минималистичен и в основном основан на изображениях, с гигантским шрифтом и здоровым сочетанием белого пространства.

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

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

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

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

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

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

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

Создание отличного дизайна нижнего колонтитула веб-сайта включает анализ следующих аспектов вашего веб-сайта:

• Какой тип контента доступен на вашем сайте?
• Как организована информационная архитектура вашего сайта?
• Кто целевые пользователи вашего сайта?
• Какую информацию они с большей вероятностью будут искать при посещении?

Подводя итог, вы должны задать себе следующие вопросы: «Как я могу сделать информацию в дизайне нижнего колонтитула моего веб-сайта как можно более актуальной?» и «сколько информации — это слишком много?» Ответьте на них, и вы уже определитесь с победителем!

20 лучших дизайнов нижних колонтитулов веб-сайтов для вдохновения в 2020 году

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

Прежде чем мы углубимся в наш список дизайнов нижних колонтитулов, давайте ответим на два жизненно важных вопроса:

• Что такое нижний колонтитул веб-сайта?
• Что должно быть в нижнем колонтитуле сайта?

Часть 1. Что такое нижний колонтитул веб-сайта?

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

В целом нижний колонтитул дает два преимущества, которые улучшают ваш веб-сайт:

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

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

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

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

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

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

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

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

Часть 2: Рекомендации по дизайну нижнего колонтитула веб-сайта

Создание функционального и красивого нижнего колонтитула на самом деле требует много работы. Прежде чем начать, вам нужно подумать над некоторыми вещами: что должно быть в вашем нижнем колонтитуле? Чего НЕ ДОЛЖНО быть в нижнем колонтитуле? .

Итак, что должно быть в нижнем колонтитуле веб-сайта?

Эти три раздела содержания необходимы для любого веб-сайта. Они необходимы для правовой защиты.

Авторские права : Год и символ авторского права защитят ваш сайт от плагиата.

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

Условия использования: Предлагает общие правила и рекомендации, регулирующие использование сайта и / или продуктов.

Хотите, чтобы посетители могли связаться и стать вашими клиентами? Тогда обязательно предложите им простые способы связи с вами. Наиболее распространенные способы связи:

Номер телефона: Лучше иметь кнопку CTA, чтобы посетители могли звонить напрямую.

Адрес электронной почты: Электронная почта по-прежнему остается одним из популярных способов развития бизнеса и общения.

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

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

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

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

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

Подпишитесь: Где ваши посетители могут зарегистрироваться с помощью электронной почты

Войти: Где ваши посетители могут войти с помощью электронной почты

Подписка: Где ваши посетители могут подписаться на информационные бюллетени

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

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

События: Поделитесь вехами и важными событиями прошлого, а также предстоящими.

Логотип: Разместите свой логотип в нижнем колонтитуле для брендинга.

Галерея: Вставьте мини-галерею ваших участников.

Награды: Продемонстрируйте свои награды.

Часть 3–20 Лучшие примеры дизайна нижнего колонтитула веб-сайта

1. Griflan Design Inc.

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

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

2. Chron

Chron — одна из крупнейших газет в США. В его уникальном дизайне нижнего колонтитула веб-сайта отсутствуют столбцы по вертикали, но вместо этого используется горизонтальная структура и макет для отображения содержимого.Как и большинство газетных веб-сайтов, Chron предлагает несколько вариантов подписки, предоставляя пользователям свободу выбора.

3. Awwwards

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

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

4. Bluestag

Bluestag — очень креативная дизайнерская студия, и дизайн их нижнего колонтитула является свидетельством этого творчества. Анимация просто фантастическая. Внимание привлекает бегущий синий олень (который принимает форму логотипа) и серые горы на заднем плане. Такое сочетание делает бренд липким, оставляя у посетителей незабываемое впечатление. Кроме того, дизайн работает в тандеме с фиксированным логотипом в верхнем левом углу страницы.Безусловно, гениальный способ преумножить бренд.

5. WPBeginner

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

6. Orbitmedia

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

7. Random ize

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

8. Lifehacker

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

9. Фэндом

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

10. Wix

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

11. Mozilla

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

12. Isitwp

Интернет-сообщество isitwp на тему WordPress имеет очень функциональный нижний колонтитул. Он отображает личность бренда с хорошо написанным текстом: «Бесплатный онлайн-ресурс, который предлагает учебные пособия, инструменты, обзоры продуктов и другие ресурсы WordPress, которые помогут вам создать лучший веб-сайт WordPress.”Ссылки на сайты содержат раскрывающееся меню, чтобы указать, куда вы хотите перейти. Кроме того, в нижнем колонтитуле добавлена ​​юридическая информация, такая как авторские права, РЕДАКЦИОННОЕ ПРИМЕЧАНИЕ и ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ.

13. Arduino

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

14. Roblox

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

15. Hook

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

16. Stacksocial

Stacksocial — это веб-сайт, который помогает клиентам по всему миру находить удивительные продукты. В нижнем колонтитуле указано их специальное предложение для новых клиентов — скидка 10% для новых подписок.Это делает его привлекательным для тех, кто впервые зашел на сайт и решил совершить покупку.

17. Doogee

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

18. Lorealparisusa

L’Oréal Paris — ведущая компания по оказанию комплексной косметической помощи со штаб-квартирой в Париже, Франция. При прокрутке вниз вы увидите доступные предметы роскоши с подробной информацией. Дизайн нижнего колонтитула его веб-сайта также впечатляет, отражая его миссию превосходства в красоте. Справа находится большая область, которая побуждает пользователей подписаться на последние новости о красоте, образцы продуктов и купоны. В нижних колонтитулах содержится дополнительная полезная информация.

19.Sephora

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

20. Макияж

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

Часть 4: Дополнительные советы по дизайну нижнего колонтитула веб-сайта

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

Вопрос 1. Как шаг за шагом создать хороший нижний колонтитул?

Если вы хотите начать с самого начала, следуйте этим советам:

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

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

Используйте инструменты дизайна экрана для разработки дизайна: вам нужно настроить каждый элемент.

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

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

Мы также настоятельно рекомендуем это видео YouTube: Как создать полностью настраиваемый нижний колонтитул веб-сайта с помощью elementor.

Вопрос 2: Чего не должно быть в нижнем колонтитуле веб-сайта?

1. Чрезмерная оптимизация для SEO: Google будет знать, что вы используете методы черной шляпы SEO.

2. Слишком много ссылок. Дизайн будет загроможден, а важная информация не будет отображаться.

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

Вопрос 3. Нужен ли нижний колонтитул веб-сайту?

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

Сайты, которые могут использовать бесконечную страницу: Сайты новостей и СМИ.

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

Вопрос 4: Что такое нижний колонтитул?

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

В заключение

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

29+ примеров нижних колонтитулов веб-сайтов и почему они так хорошо работают

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

Что интегрировать в нижний колонтитул веб-сайта?

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

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

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

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

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

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

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

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

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

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

Нижний колонтитул темы «Загипнотизированный»

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

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

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

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

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

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

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

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

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

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

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

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

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

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

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

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

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

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

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

Карта сайта и ссылки в центре нижнего колонтитула

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

Нижний колонтитул, созданный с помощью темы «Загипнотизация»

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

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

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

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

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

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

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

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

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

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

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

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

Собрать все вместе

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

Лучшие практики и примеры дизайна

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

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

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

Что такое нижний колонтитул веб-сайта?

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

Вы могли подумать, что нет смысла тратить много времени и усилий на нижний колонтитул, потому что люди не обращают внимания на содержимое ниже сгиба.Этот тип мышления определенно подтверждается большинством исследований поведения прокрутки, включая исследование, проведенное Neilsen Norman Group в 2018 году. Они обнаружили, что 57% времени просмотра страниц было проведено в верхней части страницы.

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

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

Источник изображения

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

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

Что помещать в нижний колонтитул веб-сайта

1. Уведомление об авторских правах
2. Ссылка на политику конфиденциальности
3. Карта сайта
4. Логотип
5. Контактная информация
6. Иконки социальных сетей
7. Форма регистрации по электронной почте

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

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

Уведомление об авторских правах

Пожалуй, наиболее важным элементом нижнего колонтитула веб-сайта является уведомление об авторских правах. Согласно Стивену Фишману, JD, в юридической статье о Nolo, уведомление об авторских правах — это «письменное уведомление, в котором говорится, что конкретная работа защищена авторским правом, и что вы владеете этим авторским правом.Цель проста: удержать кого-либо от копирования изображения, анимации, абзаца или иным образом попыток украсть контент с вашего веб-сайта.

Все, что требуется, — это символ авторского права © (или слова «Copyright» или «Copr.»), Год публикации веб-сайта или самого последнего существенного обновления и имя владельца авторских прав. Уведомление об авторских правах должно только появиться один раз на главной странице вашего веб-сайта, но он может отображаться на любом количестве страниц. Его можно разместить в любом месте на главной странице, но чаще всего он находится в нижнем колонтитуле.

Вот пример с домашней страницы блога HubSpot.

Ссылка на политику конфиденциальности

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

Лучше всего разместить ссылку на вашу Политику конфиденциальности в нижнем колонтитуле вашего веб-сайта.Это не только удовлетворит требования закона, но и удовлетворит ожидания большинства потребителей, поскольку они ожидают найти эту информацию в нижнем колонтитуле. Некоторые компании, такие как Conde Nast, захотят включить отрывок из своей Политики конфиденциальности в дополнение к ссылке. Вот пример из The New Yorker .

Карта сайта

Вы можете добавить карту сайта в нижний колонтитул двумя способами. Вы можете предоставить несколько ссылок на разделы своего веб-сайта или предоставить одну ссылку на карту сайта XML.

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

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

Логотип

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

Envoy добавляет товарный знак прямо под своим логотипом в нижнем колонтитуле. Он гласит: «Мы создаем возможности для объединенного мира.Быть смелым.» Таким образом, читатель будет иметь представление о том, чем занимается компания, даже если он не читал страницу «О компании».

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

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

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

Иконки социальных сетей

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

Вот изображение анимированных значков социальных сетей в приложении Rewind от Flatstudio.

Форма регистрации по электронной почте

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

Например, Chobani включает в нижний колонтитул простую форму подписки по электронной почте.Слоган выше — «Получайте самые свежие новости о Чобани» — помогает определить ожидания подписчика относительно того, на что именно он подписывается.

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

Примеры нижнего колонтитула веб-сайта

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

1. Лорелей Лондрес

Lorelei Londres — это роскошный отель в Италии, который стремится обеспечить гостеприимство и очарование. Его нижний колонтитул успешен в обоих аспектах.

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

2. Сверхтекучая

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

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

3. Группа сплайнов

Spline Group — это машиностроительная и электротехническая компания, которая ценит эффективное общение и простоту.

Это ясно из его нижнего колонтитула. Нижний колонтитул выполнен в минималистском стиле с черным текстом на белом фоне. Есть адрес и ссылки на его страницу в Instagram, LinkedIn и Карьере.Ниже находится текст гораздо большего размера. Но в отличие от Superfluid, это не логотип или торговая марка Spline. Вместо этого это контактная ссылка с простым, но привлекательным призывом к действию: «Давай поговорим».

4. Art4web

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

5. ГОООдерс

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

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

6. Аджиб

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

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

Создание нижнего колонтитула вашего веб-сайта

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

Примечание редактора: этот пост был первоначально опубликован в сентябре 2020 года и был обновлен для полноты.

шаблонов проектирования и когда использовать каждый

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

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

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

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

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

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

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

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

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

• Ссылки на утилиты
• Навигационный коврик
• Ссылки на второстепенные задачи
• Карта сайта
• Отзывы или награды
• Бренды внутри организации
• Взаимодействие с клиентами (информационные бюллетени по электронной почте и социальные сети)

Полезные ссылки

Большинство сайтов, как минимум, имеют тенденцию включать служебную навигацию в нижний колонтитул, указывая на:

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

Использовать для: всех сайтов

Навигация по коврику

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

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

Дополнительные задачи

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

• прием на работу в компанию
• задач для создателей контента
• доступ к информации об инвесторе
• поиск документации или спецификаций продукта или услуги
• доступ к медиа-комплектам и другой PR-информации
• поиск аффилированных лиц компании

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

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

Например, на веб-сайте журнала Dwell Magazine представлены категории, не относящиеся к темам журнала, в том числе About, Dwell Magazine, Professionals, и Merchants , которые могут заинтересовать вторичные группы пользователей: профессионалов в области СМИ и дизайна, продавцов, инвесторов и рекламодателей (и перспективные сотрудники).

Карта сайта

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

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

Компонент нижнего колонтитула карты сайта не включает полную карту сайта, если только у сайта мало страниц (около 25 или меньше).Если больше, то нижний колонтитул может стать громоздким и трудным в использовании. (В качестве альтернативы вы можете разместить полнофункциональную карту сайта на отдельной странице и разместить ссылку на нее в нижнем колонтитуле, где пользователи ожидают найти такую ​​ссылку.)

Использование для: крупных сайтов с несколькими уровнями информации или поддоменов

Отзывы или награды

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

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

Используйте для: стартапов или компаний с меньшей известностью бренда

Бренды внутри организации

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

Используется для: крупных международных организаций с множеством дочерних компаний или торговых марок-партнеров

Взаимодействие с клиентами

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

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

Используется для: всех типов сайтов при использовании ссылок на социальные сети; сайты с большим упором на визуальные эффекты или эстетику (искусство, красота, бренды стиля жизни или творческие пространства) при использовании встроенного виджета ленты социальных сетей

Бесконечная прокрутка и мини-нижний колонтитул

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

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

Используется для: страниц с бесконечной прокруткой

Контекстные нижние колонтитулы

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

Например, на главной странице Medium.com нет нижнего колонтитула; на странице отображается список статей с бесконечной прокруткой. (На странице есть мини-нижний колонтитул с правой стороны, как рекомендовано выше.) Однако на странице конкретной истории Medium показывает нижний колонтитул на основе задач, который варьируется в зависимости от того, является ли зритель подписчиком или нет.

Использование для: сайтов с разными ролями пользователей (например, «создатель контента» против «потребителя контента» или «участник» против «не член»)

Нижние колонтитулы прошли долгий путь с 1990-х годов, но по сей день они все еще подвержены распространенным дизайнерским ошибкам:

• Более двух уровней иерархии информации
  Специально для больших сайтов, включая всю карту сайта, не является ответом на ваш нижний колонтитул.Нижний колонтитул — это выделенный объем недвижимости, который должен быть посвящен только важной информации, которая должна быть обнаружена. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».
  • РЕШЕНИЕ: Рассмотрите возможность изменения приоритетов контента и отображения ссылок только на категории первого и второго уровня в вашем IA, а не на весь сайт. Если одна страница нижнего уровня достаточно важна, разместите эту конкретную ссылку в нижнем колонтитуле, но вам не обязательно отображать все уровни информационной иерархии, чтобы ее можно было найти.
• Нечеткие названия ссылок в нижнем колонтитуле (например, Информация о компании или Справка по сравнению с Свяжитесь с нами )
  Пресловутая ссылка Ресурсы на многих нижних колонтитулах — один из прискорбных остатков нижних колонтитулов прошлого.
  • РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет более подходящим, сортировка карточек или проверка удобства использования могут помочь пролить свет на термины, которые могут запутать пользователей.
• Нечеткая структура или информационная иерархия
  Нижний колонтитул иногда может быть «свалкой» для потерянных ссылок, то есть ссылок, которые, кажется, не имеют никакого отношения к глобальной навигации или второстепенным задачам. Если нижний колонтитул не имеет схемы организации, пользователи либо проведут исчерпывающий обзор, либо потратят очень мало времени на просмотр нижнего колонтитула. Нижний колонтитул GM не имеет четкой структуры из-за отсутствия информационной иерархии. Такая настройка затрудняет сканирование или поиск содержимого.
  • РЕШЕНИЕ: Четко передайте информационную иерархию элементов в нижнем колонтитуле с помощью группировки или других шаблонов визуального дизайна, которые указывают визуальную иерархию (например, выделенные жирным шрифтом ссылки на страницы высокого уровня и ссылки на страницы нижнего уровня с нормальным весом).
• Скрытые или неразборчивые нижние колонтитулы
  Иногда компании предпочитают использовать крошечный размер шрифта для нижних колонтитулов, чтобы разместить все ссылки или сделать ссылки менее отвлекающими. Хуже того, некоторые сайты могут использовать функцию анимации или аккордеона, чтобы полностью скрыть нижний колонтитул в эстетических целях.Хотя нижний колонтитул не является основной навигацией, люди по-прежнему используют его и полагаются на него, поэтому не пытайтесь его скрыть. В более ранней версии нижнего колонтитула Reserved.com использовалась функция аккордеона, которая была свернута по умолчанию, что затрудняло поиск ее содержимого. В более ранней итерации нижнего колонтитула Reserved.com использовалась функция аккордеона, которая по умолчанию была свернута, что затрудняло поиск ее содержимого.
  • РЕШЕНИЕ: Используйте четкий размер шрифта и цвет шрифта (с приличной контрастностью) и избегайте использования декоративных шрифтов.Самое главное, не скрывайте и не сворачивайте нижний колонтитул — люди ожидают, что он будет там.

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

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

ресурсов

Jakob Nielsen & Kara Pernice, 2010, Eyetracking Web Usability, The New Riders

12 примеров плюс советы по созданию собственного

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

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

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

Что такое нижний колонтитул веб-сайта?

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

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

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

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

Рекомендации по дизайну нижнего колонтитула веб-сайта

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

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

Вот самые важные моменты, которые следует учитывать при разработке нижнего колонтитула вашего веб-сайта:

Включите самое необходимое

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

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

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

И последнее, но не менее важное: не забудьте добавить год и символ авторского права. Это поможет защитить вас от любых попыток плагиата на вашем сайте.

Обеспечьте четкую навигацию

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

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

Выразите свою индивидуальность

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

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

Сделайте его эстетичным

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

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

12 выдающихся примеров нижних колонтитулов веб-сайтов

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

01. Номер дома 3

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

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

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

02. Lola Pate

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

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

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

03. Willowbrook Farm

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

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

04. Letsone

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

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

05. Jérome Studio

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

Jérome Studio создала организованный макет с четкой иерархией. Нижний колонтитул дополняет остальной дизайн, прекрасно сливаясь с остальной четкой эстетикой и создавая элегантный вид.

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

06. Бесполезные сокровища

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

Компания Useless Treasures, занимающаяся продажей произведений искусства в Интернете, постаралась включить в нижний колонтитул наиболее важные детали: информацию о доставке, правила возврата и логотипы, представляющие способы оплаты. Также есть ссылка на их аккаунт дизайнера в Instagram и их веб-сайт, который является одним из лучших веб-сайтов-портфолио в этой области.

07. Seven Grams Caffe

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

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

08. Avec Clyde

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

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

Микрокопия с надписью «Давай дружить» особенно привлекательна, помогая подчеркнуть их легкий подход.

09. Harasat

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

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

10. Becca Slack

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

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

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

11. Triptyc London

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

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

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

12. Holly Oddly

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