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

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

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

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

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

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

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

1. Canvas Agency

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

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

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

2. Sol’ace

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

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

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

3. Miti Navi

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

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

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

4. Lunchbox

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

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

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

5. Anti

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

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

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

6. Aquerone

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

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

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

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

7. Zoox

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

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

8. Antinomy

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

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

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

9. Cubitts

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

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

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

10. Red Company

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

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

11. Seed

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

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

12. Vide Infra

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

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

13. Aroz Jewelry

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

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

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

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

14. The Scott

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

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

15. Union Construction

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

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

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

Заключение

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

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

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

Что такое футер (footer) и как его использовать на веб-сайтах

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

Основы футеров

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

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

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

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

Люди пользуются футерами

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

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

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

b) Последнюю надежду для труднодоступного контента

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

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

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

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

Элементы футера

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

• Полезные ссылки
• Doormat navigation
• Ссылки на второстепенные задачи
• Карта сайта
• Отзывы или награды
• Бренды в организации
• Вовлечение клиентов (рассылки по электронной почте и социальные сети)

Футер на сайте Uscreen.tv включает в себя несколько типов контента, таких как 1) контент второстепенной задачи 2) служебный контент и 3) ссылки на социальные сети

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

Большинство сайтов имеют тенденцию включать в футер компактное меню, указывающее на:

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

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

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

Футер сайта Clarity Money упрощает задачу, включая ссылки на Условия использования и Политику конфиденциальности, а также ссылки на аккаунты в социальных сетях

J. Crew предоставляет контактную информацию в виде ссылок на свой аккаунт в Twitter для обслуживания клиентов, номер телефона и адрес электронной почты службы поддержки

Doormat Navigation

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

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

United Healthcare использует doormat navigation: основные категории отображаются как в верхней панели навигации (вверху), так и в футере (внизу)

Второстепенные задачи

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

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

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

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

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

Футер сайта Dwell Magazine содержит ссылки на второстепенные задачи

Карта сайта

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

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

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

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

Футер CNN содержит ссылки на навигацию верхнего уровня и на категории нижнего уровня

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

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

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

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

Чтобы укрепить свой авторитет, Reykjavik Excursions показывает в своем футере награды и организации, от которых они получили признание

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

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

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

Футер на сайте Walmart перечисляет другие бренды, которыми владеет компания, такие как Hayneedle, Jet и Modcloth

Вовлечение клиентов

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

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

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

На всех страницах сайта TheGoodTrade.com имеется большой многокомпонентный футер, который включает в себя: 1) предложение подписаться на рассылку, 2) виджет с фидом Instagram аккаунта, 3) ссылки на аккаунты в социальных сетях, 4) ссылки на второстепенные задачи и 5) отказ от ответственности с информацией об авторских правах

Варианты футеров

Бесконечный скролл и мини-футер

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

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

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

Сайты с бесконечной прокруткой, такие как LinkedIn.com, часто содержат контент футера в других местах, например, в нижней части правого столбца

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

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

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

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

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

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

Характерные ошибки футера (и их решения)

Футеры прошли долгий путь с 1990-х годов, но по сей день еще встречаются следующие распространенные ошибки:

• Более двух уровней информационной иерархии
  Нельзя добавлять всю карту сайта в футер. Футер – это ограниченное количество пространства экрана, которое должно быть посвящено только важной информации. Как однажды метко сказала моя мама: «Если все важно, ничего не важно».
  • РЕШЕНИЕ: Подумайте о перераспределении контента и отображении только ссылок на категории первого и второго уровня, а не на весь сайт. Если отдельная страница нижнего уровня достаточно важна, отобразите эту конкретную ссылку в футере, но вам не нужно показывать все уровни информационной иерархии, чтобы ее можно было обнаружить.
• Неясные имена ссылок в футере (например, Company Info или Help вместо Contact Us)
  Пресловутая ссылка «Ресурсы» во многих футерах является одним из прискорбных пережитков прошлого.
  • РЕШЕНИЕ: Команды должны стараться придерживаться общепринятых, четких условий. Если команда не уверена, какой термин будет наиболее подходящим, сортировка карточек или тест юзабилити могут помочь определиться с терминологией.
• Неясная структура или информационная иерархия
  Иногда футер может быть «свалкой» для потерянных ссылок, то есть ссылок, которые, по-видимому, не имеют отношения к глобальной навигации или второстепенным задачам. Если у футера отсутствует паттерн организации, пользователям либо придется просматривать все информацию, либо они потратят очень мало времени на его изучение.

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

• РЕШЕНИЕ: Четко передайте информационную иерархию элементов в футере с помощью группирования или других шаблонов визуального дизайна, которые указывают визуальную иерархию (например, жирные ссылки на страницы верхнего уровня и обычные ссылки на страницы нижнего уровня).

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

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

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

• РЕШЕНИЕ: используйте разборчивый размер и цвет шрифта (с приличным контрастом) и избегайте использования декоративных шрифтов. Самое главное, не скрывайте футер – люди ожидают его там найти.

Вывод

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

Получите больше советов по созданию более эффективных веб-страниц в нашем курсе Web Page UX Design.

Ресурсы

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

Перевод статьи Therese Fessenden

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1. Avo

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

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

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

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

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

2. Clade Design

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

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

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

3. Designies

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

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

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

4. Think32

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

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

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

5. Hologram

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

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

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

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

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

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

(Подсказка: посмотрите на последнюю запись.

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

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

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

7. Astra

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

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

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

8. Fiddler Labs

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

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

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

9. Brass Hands

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

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

10. Vectornator

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

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

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

11. Привет5

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

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

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

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

12. Appasaurus

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

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

13. Flowbase 

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

Нижний колонтитул может стать началом пути клиента

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

10 лучших примеров адаптивного веб-дизайна Нижние колонтитулы

Введение

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

Agente Studio знает, что разместить в нижнем колонтитуле веб-сайта. Ознакомьтесь с нашими примерами из практики.

Почему нижние колонтитулы важны для вашего сайта?

1. Они подчеркивают ваш контент

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

2. Они помогут вам привлечь потенциальных клиентов

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

3. Они предоставляют вашим пользователям полезную информацию

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

4. Они направляют ваших читателей

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

5. Удерживают внимание посетителей

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

10 удивительных футеров на наш выбор

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

1.

Минимализм

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

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

2. Карта сайта

Источник: www.furrion.com

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

3. Контактная форма/информационный бюллетень 

Источник: valaire.mu

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

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

4. Навигация

Источник: travelling.by

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

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

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

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

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

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

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

Источник: www.behance.net

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

7. Контактная информация, телефон, адрес

Источник: www.behance.net

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

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

8. Карта

Источник: Bootstrap

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

9. Пользовательский нижний колонтитул

Источник: www.thespruce.com

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

10. Никакого нижнего колонтитула 

Источник: justdiggit.org

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

Шаги по созданию хорошего нижнего колонтитула:

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

1. Определите основы

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

2. Создайте макет нижнего колонтитула

• Определите размер и количество разделов и столбцов, упорядочите их по приоритету или стандартам. Пример: контактная информация ожидается в центре или в правом углу футера.
  

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