Google-Translate Войти на сайт
 
МЕНЮ САЙТА
РАЗДЕЛЫ
Уроки Ucoz [13]
Уроки Borda.ru [13]
Уроки Photoshop [32]
Уроки Adobe Illustrator [1]
Уроки HTML и CSS [13]
JAVA-Скрипты [15]
Веб-дизайн [17]
Создание и продвижение сайта [92]
Интересные статьи [194]
ВЕЛОЛЮБИТЕЛЯМ!
Ярмарка Мастеров - ручная работа, handmade
КОНТАКТЫ
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru
Мы Вконтакте
НАШИ ДРУЗЬЯ
Быстрая и недорогая раскрутка сайта
Регистрация в каталогах
Сибирский рубеж - автоэмали оптом и в розницу. Подбор автоэмалей PROFIX.
Хорошие новости о животных
WOlist.ru - каталог качественных сайтов Рунета
FONWEB.RU - Веб-дизайн
Интересные статьи
Клипарт на прозрачной основе


ЗАРЕГИСТРИРОВАТЬ СВОЙ САЙТ
СТАТИСТИКА
Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная | Полезные статьи
Главная » Статьи » Веб-дизайн

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

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

clip_image053

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

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

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

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

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

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

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

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

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

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

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

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

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

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

clip_image004

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

clip_image005

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

clip_image006


На сайте 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


Категория: Веб-дизайн | Добавил: Администратор (23.04.2015)
Просмотров: 1124 | Теги: как оформить футер, что такое футер, футер | Рейтинг: 0.0/0


Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Веб-студия "К-Дизайн" © 2009-2017
Контакты
ICQ: 177700574
skype: k-dezign
e-mail: info@k-dezign.ru
mail-агент: k-dezign@mail.ru

Счетчики
Яндекс цитирования
Работа
Создание сайтов и форумов
Порядок работы с заказами
Порядок оплаты заказов
Бонусы
Бесплатные кнопки для форумов
Бесплатные дизайны для форумов
Готовые шаблоны для сайтов
Уроки фотошоп
Уроки CMS Ucoz