Яндекс.Метрика

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

Футеры в современном веб дизайне

7 мая 2008 | Опубликовано в Веб-дизайн | 2 Комментариев »

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

clip_image053

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

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

В чем польза футеров?

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

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

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

clip_image001
На CSS Beauty внизу страницы можно увидеть последние темы форума и имеющиеся вакансии. Хотя и непонятно, принадлежат они к футеру или нет

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

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

clip_image002
На сайте Designshack в футере располагаются полная навигация, выбор вариантов лейаута, цветовой схемы и остальная информация. 

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

1. Имитация земной поверхности

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

На сайте YoDiv крошечные пузырьки устроили гонки.

clip_image004

В футере сайта Volll живет семья осьминогов с зонтиком.

clip_image005

На Vimeo можно увидеть маленьких человечков в перспективе пользователя.

clip_image006

Сайт Kulturbanause.de удивит нас водопадом и футером, созданным из воды. Прекрасный и (действительно) необычный дизайн на движке WordPress.

kultur

На сайте The Rissington Podcast мы видим самолет готовый к взлету. Налицо использование приемов из комиксов.

clip_image009

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

clip_image010

Создатель сайта MB Dragan обожает рисунки выполненные от руки. Мы тоже. Все просто и со вкусом.

clip_image011

Miloslav Lešetický является одним из иллюстраторов, поэтому мы видим его иллюстрацию прямо в футере.

clip_image012

На сайте Paul Otaneda роль футера исполняет светло зеленая тема. С иконками, деревом, и тремя птичками.

clip_image013

TNTPixel — Ух ты, а вот с этим обращаться нужно поосторожнее...

clip_image014

Roman Leinwather припас для нас несколько цветочков…

clip_image015

…а на сайте Web4Biz.ro похоже в данный момент достаточно холодно.

clip_image017

Перейдем к небольшому городку на сайте StrawPollNow.com.

clip_image018

2. Контент и футер четко разграничиваются цветом

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

Например, на сайте Billy Hughes at War в футере изображен Билли Хьюджес.

clip_image020

На сайте HEBAtec футер включает достаточного много разного. Среди прочего здесь можно найти и RSS рассылку и поисковую форму.

clip_image022

На сайте Freelenz.at однозначно знают, как хорошо разместить посты из блога, комментарии, иконку RSS рассылки и пиктограммы Flickr. Ах да, там же есть еще и классное растение!

clip_image023

На сайте Viget.com предлагается навигация по категориям и архивам.

clip_image024

На сайте Ungarbage (вероятно) слишком много ссылок.

clip_image025

На сайте SprintBio экспериментируют с разными оттенками зеленого цвета.

clip_image027

На сайте Blogsolid в футере можно найти целую армию иконок.

clip_image028

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

clip_image029

Как бы то ни было, цвета лейаута и футера очень часто похожи. Например: City of Grace Mesa

clip_image031

3. Использование иллюстраций

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

Ну, разве это не замечательно? Кроме всего прочего он еще Crazy and Funny (безумный и смешной). По крайней мере, это то, что обещают его создатели.

clip_image032

На сайте Legendary Aircraft в футере можно увидеть ящик с инструментами.

clip_image033

На сайте Bistro Williams внизу страницы предлагаются сочные фрукты.

clip_image001[6]

А на сайте Pil.hu мы найдем ручку, конверт и рабочий стол.

clip_image035

На сайте Lukasz Tyrala изображено несколько скетчей нарисованных от руки.

clip_image037

Так же как и на сайте Bart-Jan Verhoef.

clip_image039

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

clip_image040

Us Trendy — все на своем месте, включая иконку для RSS рассылок, завитушки и бабочку. По-моему перебор, не правда ли?

clip_image042

На сайте Dandelionpath тоже можно увидеть завитки, кривые и цветы.

clip_image043

Весь низ сайта AIGA Los Angeles занят цветастыми кривыми линиями.

clip_image044

А сайт Hicksdesign выделяется ретро-дизайном и небольшим количеством контактных данных.

clip_image045

Сайт Codex Transportica — простой и отличный от других.

clip_image046

Nicolas Le Bas представляет футер совершенно по-другому. Три инфо-бокса располагаются рядом друг с другом, с одним и тем же фоном, но под разными углами.

clip_image047

Johanna Hallin просто прикрепила футер к основному лейауту при помощи скобок.

clip_image048

Кот на сайте Catydesign просто роскошен…

clip_image049

…а скорпион на сайте Olieng еще и анимирован!

clip_image050

Предложение проверить ссылки в блокноте Catalyst Studios.

clip_image051

И отпечатки пальцев внизу страницы на сайте Instant Amber.

clip_image052

4. Футеры с усовершенствованным функционалом

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

Например, на сайте Ten Thousand Things там расположена контактная информация, реклама и наиболее популярные тэги.

clip_image053

На сайте The Greg Brady Project контактная форма и футер объединены вместе.

clip_image054

На сайте Rahul Joshi вы можете увидеть 4 колонки: одна для картинок Flickr, одна для остальных страниц, одна для информации об авторских правах и одна для контактной информации.

clip_image055

А на сайте у Lucy Blackmore можно увидеть стикер, ведущий на домашнюю страницу.

clip_image057

В свою очередь у Paul Wallas в футере расположено тэг облако.

clip_image058

На сайте Arrival Design сразу переходят к делу. Вот информация о том, чем они занимаются. А здесь вы найдете контактную информацию.

clip_image060

У Dennis Blöte футер заполнен контактной информацией и контакт формой, выполненной в минималистическом стиле.

clip_image061

На сайте Media Ambassador предлагается рассылка новостей по электронной почте…

clip_image063

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

clip_image064

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

clip_image065

5. Экспериментальные идеи

Разные принадлежности на сайте Surfgarden

clip_image066

На сайте 1ncu8u5 футер выполнен в довольно неряшливой манере.

clip_image067

Farbspider — дизайн агентство представляет людей там работающих.

clip_image069

OllyHite.com — не очень впечатляющий контент, но уникальный дизайн.

clip_image070

Автор — smashingmagazine




Комментарии

  1. K_E_V_in
    Thumb up Thumb down 0

    Собственно, вот кроссбраузерное валидное решение для прижатия футера к низу страницы: webkev.com/2010/02/13/fut...stva-zakoncheny/

    Юлия Ответ:

    Thumb up Thumb down 0

    Спасибо, очень полезная ссылка. Теперь не придется мучиться... *YAHOO*

[an error occurred while processing the directive]


[an error occurred while processing the directive]