Футер | 13 уникальных примеров


11.03.2021 Время чтения - 10 минут 3403

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


Читайте нас в Telegram.


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

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

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

Футеры – лучшая навигация

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

Футеры содержат релевантную информацию

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

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

Футеры являются последним CTA-элементом

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

Футеры могут оптимизировать поиск

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

13 уникальных футеров

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

1. Avo

сайт avo

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

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

avo футер

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

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

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

2. Clade Design

дизайн сайта clade

Домашняя страница дизайнерской фирмы Clade Design, наполненная контрастными формами, захватывающими микровзаимодействиями и яркой палитрой цветов, отличается необычным творческим подходом.

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

футер дизайн clade

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

3. Designies

сайт designies

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

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

футер сайта designies

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

4. Think32

лендинг think32

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

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

футер сайта think32

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

5. Hologram

сайт hologram

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

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

футер сайта hologram

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

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

Дизайн футера веб-сайта Hologram – это так называемый толстый футер (fat footer). Обладая обширным списком ссылок, он работает как еще одно средство навигации и дает поисковым системам более точное представление о сайте.

6. Savvy

сайт savvy

Где-то мы это уже видели…

футер сайта savvy

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

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

7. Astra

сайт astra

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

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

футер сайта astra

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

8. Fiddler Labs

сайт Fiddler Labs

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

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

футер сайта fiddler

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

9. Brass Hands

сайт brass hands

Зайдя на сайт брендового агентства Brass Hands, вы, в первую очередь, замечаете плавный UI с плавным появлением текста при прокрутке, избранными проектами, которые увеличиваются при наведении курсора, и другими самородками дизайнерского совершенства. Нет ничего необычного или неуместного, вся страница выглядит согласованно.

футер сайта brass hands

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

10. Vectornator

сайт vectornator

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

футер сайта vectornator

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

11. Hi5

сайт hi5

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

футер сайта Hi5

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

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

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

12. Appasaurus

сайт appasaurus

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

футер сайта appasaurus

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

13. Flowbase 

футер flowbase

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

Футер может превратить интересующегося в покупателя

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

Оригинал.

Читайте также: Как создать привлекательный лендинг


Читайте нас в Telegram.