Как превратить подвал сайта в яркий акцент дизайна
Обычно футер представляет собой стандартный блок с контактами и ссылками. Но оформление подвала может быть и более оригинальным — продуманный дизайн улучшит пользовательский опыт и общее впечатление от сайта. Собрали 15 небанальных идей, которые помогут сделать футер удобным, стильным и запоминающимся.
Наполнение футера зависит от типа ресурса и задач бизнеса, но есть несколько элементов, которые встречаются чаще всего.
Ссылки на основные разделы. Дублирование ключевых пунктов меню упрощает навигацию и позволяет перейти к нужной странице, не возвращаясь наверх.
Контактная информация. Телефон, электронная почта, физический адрес и график работы помогают связаться с компанией или найти офис.
Информация о компании. Реквизиты, юридический адрес и другие сведения об организации повышают доверие пользователей к бизнесу перед оформлением заказа.
Юридические документы. Политика конфиденциальности, пользовательское соглашение и другие необходимые документы обеспечивают доступ к важной правовой информации.
Ссылки на социальные сети. Иконки соцсетей позволяют подписаться на обновления компании и следить за ее новостями на других площадках.
Форма обратной связи. Можно предложить пользователям оставить заявку, задать вопрос, подписаться на рассылку или скачать гайд.
Логотип. Повышает узнаваемость бренда.
Копирайт. Подчеркивает, что материалы сайта защищены авторским правом.
Виджеты. Последние публикации блога, интерактивные карты и другие динамические элементы помогают компании дольше удерживать пользователей на сайте, а пользователям — находить нужную информацию.
Ниже собрали примеры, которые помогут уйти от шаблонных решений и интересно оформить подвал сайта.
Самый простой вариант — разместить ссылки по колонкам, добавить внизу иконки соцсетей, а сбоку поставить логотип компании. Однотонный фон объединит элементы и не будет отвлекать от содержания.
Чтобы дизайн не выглядел слишком строго и скучно, дополните его небольшой иллюстрацией — она добавит индивидуальности и сделает композицию интереснее.
Вариант чуть интереснее — добавить градиентный фон. Подберите сочетающиеся цвета и настройте переход между ними так, чтобы текст и иконки хорошо различались. Главное — учитывать общую палитру сайта и не перегружать футер дополнительными декоративными элементами. Сам градиент — уже выразительный визуальный акцент.
Если сайт оформлен лаконично, яркий футер может выбиваться из общего стиля. Но это не значит, что ему нужно оставаться скучным. Попробуйте заменить привычный прямоугольник фигурной подложкой.
Например, в этом примере верхний край футера повторяет форму волны, а текст над ним расположен по дуге. Такой приём объединяет элементы в единую композицию и делает дизайн гармоничным.
Верхний край футера можно оформить не обычной волной, а силуэтной композицией. Например, добавить ряд деревьев, как в этом примере, и залить их одним цветом. Получится выразительный контур, у которого даже может быть сюжет. При этом однотонная подложка поможет сохранить хорошую читаемость текста.
Такой приём помогает выделить нижнюю часть страницы и побуждает пользователей прокрутить её до конца. Это особенно полезно, если в футере размещена форма обратной связи или другой важный элемент.
С верхним контуром футера можно экспериментировать по-разному. Например, оформить его в виде языков пламени, как это сделала дизайн-студия Brave Studios. В центре композиции разместили контрастный огонек — прямо над кнопкой «Начать чат», чтобы привлечь к ней дополнительное внимание.
Навигацию расположили слева, а контакты — справа. Благодаря этому в композиции остается много свободного пространства, а каждый элемент хорошо заметен. Внизу добавили еще один акцент — название компании.
Можно сделать футер не во всю ширину страницы, а разместить информационный блок поверх фотографии или иллюстрации. Так фон будет создавать настроение, но не помешает читать текст.
На передний план можно добавить декоративные детали. В примере ниже одного персонажа разместили поверх подложки в углу. Другого — посадили на верхний край футера. Благодаря этому композиция выглядит живее и интереснее.
Ещё один способ разнообразить подвал сайта — добавить иллюстрации в виде стикеров. Они могут быть цветными или монохромными, главное — подобрать их под тематику и стиль ресурса. Например, фотографу подойдут стикеры с камерой и плёнкой, а сервису доставки еды — с изображениями пиццы и бургеров.
Продумайте расположение стикеров так, чтобы они дополняли дизайн, но не мешали читать текст. В нашем примере их разместили поверх названия компании, растянутого на всю ширину футера. Получилось лаконично, но ярко — такое запомнится.
Разнообразить дизайн футера можно с помощью паттерна. Попробуйте разместить его в одну линию снизу или сверху. Например, для индийского сайта выбрали узор с изображениями местных достопримечательностей. Он поддерживает тематику ресурса и не мешает читать текст. Такой элемент станет эффектным финальным акцентом страницы.
Иллюстрация в футере может занимать весь фон, а не только узкую полоску по краю. Например, интернет-магазин товаров для дома Blue Heritage обыграл название с помощью рисунка в японском стиле: на нём есть вазы, элементы традиционной архитектуры и другие детали, которые перекликаются с ассортиментом магазина. Голубая палитра тоже поддерживает название бренда.
Такой футер хочется разглядывать: в нем много интересных деталей, но они не мешают читать текст. Горы на заднем плане сделали полупрозрачными, словно они скрываются в дымке, а остальные элементы расположили так, чтобы они не перекрывали информацию.
В качестве подложки для футера можно взять фотографию. Лучше выбирать снимки с однотонными участками и без обилия деталей — на них будет проще разместить текст. Например, в этом варианте фоном стала фотография, большую часть которой занимает трава. На ней отлично видно белые надписи.
Если фоновая фотография насыщена деталями, добавьте поверх нее полупрозрачный слой. Например, черный или темно-серый. Он приглушит изображение и поможет тексту выделяться на его фоне.
Можно затемнить только часть изображения, например, нижнюю. Так и фон останется заметным, и информация будет легко читаться.
Если в футере есть форма обратной связи или призыв к действию, сделайте ее заметной. Иначе пользователь может не обратить внимания на то, что написано внизу страницы.
Подойдет контрастная подложка, которая отделит форму от навигации и контактов. Дополнительный акцент можно сделать с помощью маскота или небольшой иллюстрации рядом с формой.
Иногда хочется выделить какую-то конкретную информацию в футере. Например, привлечь больше подписчиков в соцсети или подсказать, как с вами связаться. В таком случае вместо стандартных иконок можно использовать заметные кнопки.
В этом примере кнопки разместили поверх вопроса «Поработаем?». Получился креативный призыв к действию.
Блок с недавними публикациями блога в футере — привычное решение. Но можно добавить туда и что-то поинтереснее. Например, плейлист, который посетители смогут включить прямо на сайте. Так сделал кофейный магазин, чтобы передать атмосферу бренда через музыку.
Если вы записываете подкасты, аналогичным образом можно разместить последние выпуски. Или придумать свой вариант виджета, который удивит пользователей.
До конца страницы долистывают немногие. Анимация поможет задержать внимание тех, кто все-таки добрался до футера. Например, сделать просветы внутри букв похожими на глаза, которые следят за курсором.
Такой эффект как минимум вызовет любопытство: кто-то задержится, чтобы поиграть с анимацией, а заодно заметит форму подписки или ссылки на соцсети.
Делимся простыми рекомендациями:
Ставьте удобство на первое место. Дизайн должен помогать ориентироваться на сайте, а не усложнять навигацию. Не перегружайте футер декоративными элементами.
Структурируйте информацию. Разделите ссылки по смыслу: о компании, услуги, помощь, контакты, документы. Используйте понятные заголовки и логичный порядок блоков.
Используйте SEO-оптимизацию. Добавляйте релевантные запросы в названия ссылок и текстовые элементы, но избегайте переспама. Текст должен быть полезен посетителям, а не только поисковым системам.
Оставьте только нужное. Разместите в футере ссылки на важные разделы, контакты, социальные сети и юридическую информацию. Не дублируйте все пункты меню без необходимости.
Продумайте мобильную версию. Проверьте, удобно ли нажимать на ссылки с телефона, читать текст и находить нужные разделы без долгой прокрутки.
Оценивайте эффективность. Анализируйте переходы по ссылкам, обращения через контакты и другие целевые действия. Убирайте элементы, которые не приносят пользы, и улучшайте те, которыми пользуются чаще.
Unisender Agency — команда экспертов в email-маркетинге для вашего бизнеса. Возьмём на себя всё: от стратегии до запуска.
Искренние письма о работе и жизни, эксклюзивные кейсы и интервью с экспертами диджитала.
