Футер, пожалуй, самая недооцененная часть веб-сайта, и современные дизайн-тренды стремятся исправить эту несправедливость. Указанный элемент выполняет важную функцию — он служит контейнером для контактной информации, адресов, номеров телефонов, ссылок на социальные сети и копирайта.
Как показывает практика, мы не должны отказываться от размещения подобного контента в футере, потому что посетители привыкли находить его именно там. Дизайнеры зачастую уделяют этой части страницы не слишком много внимания. Однако сегодня мы все чаще видим интересные эксперименты и инновационные способы ее оформления.
В частности, мы замечаем, что футеры становятся больше. Ранее ограниченные самой нижней частью страницы, тонкие и незаметные, сегодня они, кажется, претендуют на значительное пространство, растут в высоту, часто занимая весь экран. Такой подход позволяет создавать аккуратные упорядоченные дизайны, а также размещать в этой области иллюстрации, анимацию и большие фрагменты визуального контента.
Большие футеры часто создаются с различными эффектами раскрытия — первоначально их содержимое спрятано под основным контентом страницы. Отодвиньте его, и вы увидете, что там находится.
Также мы встречаем минималистичные футеры, футеры, состоящие из трех и более частей, футеры с крупной типографикой и так далее.
Но изображение стоит тысячи слов, поэтому хватит болтать! Давайте лучше вместе посмотрим на лучшие примеры инновационного дизайна футера.
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 и адресом компании.
По мере прокрутки контент перемещается вверх, и на экране появляется собственно футер, внутри которого есть лишь изображение, напоминающее полотенце с логотипом компании. Чтобы не отступать от привычных правил, здесь также расположены копирайт и ссылка “Наверх”. Настроение футера — довольно мрачное, но аккуратное и профессиональное.
Заключение
Прекрасные примеры из списка, безусловно, меняют наши представления об этой привычной, но часто игнорируемой части сайта. Мы увидели несколько по-настоящему замечательных решений — элегантные и утонченные, смелые и выразительные, крупные и двойные, они доказывают, что относиться к футеру как к чему-то второстепенному — большая ошибка.
Посетители всегда ценят усилия. Футер, которому уделили должное внимание, оставляет очень приятное впечатление, дополняет и завершает дизайн. Однако хотим вас предостеречь: если вы планируете создать большой, броский или необычный футер, убедитесь, что он соответствует общему настроению вашего сайта.
Футер должен завершать лейаут, а не нарушать его баланс. Если он спроектирован с любовью и заботой, ваш дизайн обязательно заиграет совершенно новыми красками.
