23 жовтня 2009

Насолоджуйтесь

Футери в сучасному веб-дизайні: Креативні приклади та ідеї

Оригінал: Footers In Modern Web Design: Creative Examples and Ideas
Автор: Smashing Magazine
Переклад: Максим Додчук

Згідно з класичними принципами веб дизайну, все, що знаходиться внизу сторінки не дуже вже й важливо. І так думають більшість звичайних користувачів. Та й більшість дизайнерів теж переконані, що це чиста правда. Елементи сайту внизу станиці дійсно не можуть привернути увагу відвідувачів, саме тому про футери часто забувають або взагалі їх ігнорують, і не приділяють уваги того, якого вони заслуговують.

Насправді більшість футерів, досить нудні і не надихаючі. Дизайнери зазвичай використовують область внизу сторінки, щоб розмістити там все те, для чого вони не знайшли місце вгорі. Наприклад, дисклеймер, кнопки валідації W3C, дані про авторські права, посилання «на початок сторінки» і контактну інформацію. Але якщо більшість дизайнерів забувають про футер, то чому б цим не скористатися? Чому б не використати футер для того, щоб справити враження на відвідувачів сайту за допомогою того, чого вони зовсім не чекають?

У цій статті ми розглянемо креативні приклади футерів та ідеї щодо їх дизайну. Ми постаралися визначити деякі тенденції та варіанти нестандартного підходу, які ви могли б використовувати або розвинути при роботі над своїми проектами.

У чому користь футерів?

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

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

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

На CSS Beauty внизу сторінки можна побачити останні теми форуму і наявні вакансії. Хоча й незрозуміло, чи належать вони до футеру чи ні.

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

Типовим зразком може служити DesignShack, де все меню навігації розташоване внизу сайту.

На сайті DesignShack в футері розташовуються повна навігація, вибір варіантів лейаута, кольорової схеми та інша інформація.

Це надає нам певні можливості: в футері можуть перебувати особисті ілюстрації, посилання на дружні сайти, фотографії, веб-форми, іконки, і решта креативу. На жаль, ми виявили, що також у футері дуже часто знаходяться SEO спам та реклама, які безпосередньо до сайту не відносяться.

1. Імітація земної поверхні

Ну, виглядає це все досить дивно, але цю тенденцію ми зустрічали дуже часто, щоб її не згадати. Багато дизайнерів у своєму дизайні часто наслідують тому, як виглядає земна поверхня. Це означає, що вони намагаються створити лейаут, який би був схожий на структуру земної поверхні – у таких випадках дерева, птахи, і горизонтальна перспектива є досить частим явищем. Використання забавних персонажів, фігурок, ілюстрацій і малюнків, виконаних від руки, також є звичайним прийомом у таких футерах.

На сайті YoDiv крихітні бульбашки влаштували перегони.

У футері сайту Volll живе сім'я восьминогів з парасолькою.

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

Сайт Kulturbanause.de здивує нас водоспадом і футером, створеним з води. Прекрасний і (дійсно) незвичайний дизайн на двигуні WordPress.

На сайті The Rissington Podcast ми бачимо літак готовий до зльоту. У наявності використання прийомів з коміксів.

На сайті Rapidweaver подбали навіть про дрібниці. Чудова панель вибору мов дуже підходить до загального дизайну сайту.

Творець сайту MB Dragan обожнює малюнки виконані від руки. Ми теж. Все просто і зі смаком.

Miloslav Leseticky є одним з ілюстраторів, тому ми бачимо його ілюстрацію прямо в футер.

На сайті Paul Otaneda роль футера виконує світло зелена тема. З іконками, деревом, і трьома пташками.

TNTPixel – Ух ти, а от з цим поводитися потрібно обережніше ...

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

... а на сайті Web4Biz.ro схоже в даний момент досить холодно.

Невеличке містечко на сайті StrawPollNow.com

2. Контент і футер чітко розмежовуються кольором

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

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

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

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

На сайті Viget.com пропонується навігація по категоріях і архівів.

На сайті Ungarbage (імовірно) дуже багато посилань.

На сайті SprintBio експериментують з різними відтінками зеленого кольору.

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

На сайті Bits & Pixels футер теж досить різнобарвний з невеликою кількістю іконок. Він відмінно підходить до загального дизайну сайту, який і сам володіє достатньою великою кольровою гамою.

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

3. Використання ілюстрацій

Дуже часто ілюстрації використовуються для того, щоб надати футеру то особливе значення, яке він повинен у свою чергу передати відвідувачам. Для цього існує невичерпне кількість можливостей. У більшості випадків дизайнери використовують яскраві картинки і анімацію.

Ну, хіба це не чудово? Крім усього іншого він ще Crazy and Funny (божевільний і смішний). Принаймні, це те, що обіцяють його творці.

На сайті Legendary Aircraft в футер можна побачити ящик з інструментами.

На сайті Bistro Williams внизу сторінки пропонуються соковиті фрукти.

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

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

Так само як і на сайті Bart-Jan Verhoef.

У своїх статях, як приклад, ми часто використовуємо сайт Ніка Ла Webdesignerwall, але він безперечно того заслуговує. Увага до деталей просто приголомшує.

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

На сайті Dandelionpath теж можна побачити завитки, криві і квіти.

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

А сайт Hicksdesign виділяється ретро-дизайном і невеликою кількістю контактних даних.

Сайт Codex Transportica – простий і відмінний від інших.

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

Johanna Hallin просто прикріпила футер до основного лейауту за допомогою дужок.

Кіт на сайті Catydesign просто розкішний ...

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

Пропозиція перевірити посилання в блокноті Catalyst Studios

І відбитки пальців внизу сторінки на сайті Instant Amber.

4. Футери з удосконаленим функціоналом

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

Наприклад, на сайті Ten Thousand Things там розташована контактна інформація, реклама і найбільш популярні теги.

На сайті The Greg Brady Project контактна форма і футер об'єднані разом.

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

А на сайті у Lucy Blackmore можна побачити стікер, який веде на домашню сторінку.

У свою чергу у Paul Wallas в футер розташована хмарка тегів.

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

У Dennis Blote футер заповнений контактною інформацією і контакт формою, виконаної в мінімалістичному стилі.

На сайті Media Ambassador пропонується розсилка новин електронною поштою ...

... також як і на сайті Hopkingdesign. Не дуже гарна ідея, тому що ви не привернете занадто багато передплатників таким чином.

Те ж саме відноситься і до пошукової форми. У футері, безумовно, багато місця, але насправді, розміщення такої форми тільки в футері не має великого сенсу.