Якщо футер розташований в самому низу сайту, то це не означає, що туди мало хто «доходить», і ви не повинні придумувати для нього якогось особливого дизайнерського оформлення. Це не так…
Сучасні сайти різних тематик і призначень під час жорсткої конкуренції в інтернеті постійно знаходяться в пошуках способів бути самими пізнаваними і унікальними. Численні веб-майстри створюють різноманітні сайти, тільки б вибагливі користувачі звернули увагу саме на їх творіння. Для цього необхідно ретельно опрацьовувати кожну деталь сайту, щоб відвідувачі хотіли повертатися до нього ще й ще.
Щоб веб-сайт був ефективним, необхідно додати в нього зручність користування і читабельність, починаючи від заголовка, і закінчуючи футером ( «підвалом» сайту). Якщо футер розташований в самому низу сайту, то це не означає, що туди мало хто «доходить», і ви не повинні придумувати для нього якогось особливого дизайнерського оформлення. Це не так. Багато розробники не віддають належної уваги такому елементу, як «підвал» сайту. Спробуємо розібратися, що саме необхідно зробити, щоб футер став ефектним як в плані інформативності, так і в плані дизайну.
Також необхідно розібратися в тому, що саме можна і потрібно розміщувати в футере, наскільки важлива карта сайту, і зручність його використання. Також необхідно розглянути одні з найбільш стильних ідей і тенденцій.
Що розміщувати в футере
Перш ніж приступати до розробки футера, розглянемо загальні елементи для нього і розберемося в важливості кожного з них. Не обов'язково включати всі перелічені нижче елементи, кожен повинен підібрати для свого сайту персональний набір того, що йому необхідно розмістити. Тож почнемо.
Карта сайту
Крім того, часто можна побачити комбінований варіант, коли «підвалі» містяться посилання на важливі сторінки ресурсу і коротка інформація контактів (без карти або контактної форми).
Хмара тегів як додатковий блок навігації відмінно підходить для всіх видів сайтів, особливо для тих, де велика і різноманітна вміст сайту. Воно дає ще одну можливість для користувачів, щоб легко знайти інформацію, яку вони шукають. Але хмари тегів можуть зайняти багато місця. Деякі розміщують теги в бічній панелі, але бічні панелі зазвичай не мають достатньо місця для розміщення такої кількості тексту, особливо тексту з великим розміром шрифту. Хмари тегів, розміщених в футере, працюватимуть краще. Вони можуть бути доступні на кожній сторінці, на відміну від того, якщо вони будуть в бічній панелі, і не будуть загублені серед інших елементів на сайті.
MacTalk використовує список тегів, а хмара тегів відображає найпопулярніші теги на сайті.
стилізація футера
Хороший стиль має важливе значення для будь-якого веб-дизайну. Це покращує не тільки зовнішній вигляд, але і візуалізацію вмісту сайту. Ось кілька порад щодо розробки стилю, які необхідно мати на увазі при роботі над футером для підвищення його ефективності.
визначаємо ієрархію
Не забувайте про важливість гарної друкарні. Користувач повинен мати можливість швидко поглянути на інформацію, не плутаючись в ній. Колонки покращують огляд даних, але хороша друкарня і великі шрифти теж допомагають зробити ефективний футер.
Моделювання гарного списку
Як і якісна друкарня, хороше моделювання списку важлива для карти сайту. Належні інтервали списку важливі в веб-дизайні, оскільки вони покращують чіткість і фокус. Те ж саме справедливо для карти сайту та інших списків в футере. Крім того, переконайтеся, що для заголовків стовпців відведено більше порожнього простору, ніж для елементів списку, щоб краще передати ієрархію.
Межі можуть бути використані для поділу елементів списку. Погляньте на наступний приклад, в якому курсиви використовуються для окремих елементів списку. Курсиви виглядають красиво і більш точно визначають елементи списку.
Порожній простір (пробіл) є ключовим
Навіщо використовувати прогалини? У футере з колонками, пробіл звертає увагу очей читача до кожного блоку змісту, покращуючи увагу і чіткість. Майте на увазі, що пробіл не повинен бути білим, він просто означає порожній простір без інформації або змісту.
Відмінність футера від загального контенту
Ми розглянули, що можна розміщувати в футере, як його зробити привабливим і ефективним у використанні. Тепер, для натхнення, подивимося, якими бувають футери на різних сайтах.
Блискуча векторна графіка і колірна палітра, відвідувач відчуває умиротворення, дивлячись на цей футер.
Matt Mullenweg
Приємний дизайн сайту, елементи листя і фортепіано з правого боку створюють хорошу обстановку.
Ресторан Nuevo Aurich
Тут зібрана вся необхідна інформація про ресторан. Дуже вдалий футер, бо він відображає суть цього закладу.
Blog.SpoonGraphics
Трохи векторної графіки, кілька текстур, трохи інформації - ось три інгредієнта, які можуть добре працювати футере.
Carol Rivello
Carol вдалося розташувати в футере всю основну інформацію, і в той же час приклад своєї роботи.
У Vimeo ви знайдете класний футер. На ньому показано не так багато інформації, але головне присутній хороший стиль ілюстрації.
Gisele Jaquenod
Стиль дизайну Gisele може бути сприйнято через весь веб-сайт, мила графіка і хороша ідея для футера.
Підвал виконаний в ретро стилі, прекрасне рішення і оригінальний дизайн.
CooperLive
Прекрасний дизайн футера. Надає необхідну інформацію, і завершує його з чудовим комплектом інструментів нагорі.
Люди в Білому домі зробили хорошу роботу по використанню футера, щоб показати всю інформацію, користувачі цього сайту потребують дуже чіткої і організованої подачі матеріалу.
На цій сторінці ви не можете точно сказати, де починається футер і закінчується основний сайт, гарне використання зеленої палітри для шрифтів і фонів.
готові проекти
Останні повідомлення, останні твіти та корисні посилання, ось три речі, які роблять цей підвал невід'ємною частиною веб-сайту.
Josh Mackey
Цінністю цього підвалу є використання іконок. Тут розміщуються посилання на деякі з основних веб-ресурсів.
David Hellman
Цей футер сождержіт комбіновані елементи. Крім основного футера, ви можете побачити в той же час крихітний невеликий бар, який показує деякі web 2.0, кнопки прокрутки і основну інформацію. Тоді ви можете потрапити в реальний футер, де знайдете деяку додаткову інформацію, виконану схематично в дуже чутливому стилі.
Футер сайту www.iseeq.com виконаний в класичному стилі і строгих тонах, містить всю необхідну інформацію про фірму та її діяльність.