1. Що розміщувати в футере
2. Карта сайту
3. Контактна інформація
4. Посилання «Вгору»
5. Соціальні мережі
6. Теги
7. стилізація футера
8. визначаємо ієрархію
9. Моделювання гарного списку
10. Порожній простір (пробіл) є ключовим
11. Відмінність футера від загального контенту
12. Matt Mullenweg
13. Ресторан Nuevo Aurich
14. Blog.SpoonGraphics
15. Carol Rivello
16. Vimeo
17. Gisele Jaquenod
18. flicka.cz
19. TNT Pixel
20. CooperLive
21. Білий дім
22. SprintBio
23. готові проекти
24. Josh Mackey
25. David Hellman
26. Iseeq

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

Щоб веб-сайт був ефективним, необхідно додати в нього зручність користування і читабельність, починаючи від заголовка, і закінчуючи футером ( «підвалом» сайту). Якщо футер розташований в самому низу сайту, то це не означає, що туди мало хто «доходить», і ви не повинні придумувати для нього якогось особливого дизайнерського оформлення. Це не так. Багато розробники не віддають належної уваги такому елементу, як «підвал» сайту. Спробуємо розібратися, що саме необхідно зробити, щоб футер став ефектним як в плані інформативності, так і в плані дизайну.

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

Що розміщувати в футере

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

Карта сайту

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

При великій кількості сторінок або категорій, бажано зробити меню, що випадає, яке допоможе поліпшити пошук у відповідному розділі. Якщо в спадному меню не підходить, ви повинні вибрати найбільш корисні сторінки для вашої аудиторії і показувати тільки їх.

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

Контактна інформація

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

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

Крім того, часто можна побачити комбінований варіант, коли «підвалі» містяться посилання на важливі сторінки ресурсу і коротка інформація контактів (без карти або контактної форми).

Посилання «Вгору»

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

Соціальні мережі

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

Соціальні мережі є популярними інструментами для отримання інформації, тому дуже важливо, щоб відвідувач міг дізнатися, що мережі мають певний ресурс. Підтримка зв'язку з допомогою іконок, додасть канали з останніх твітів або відповідей. Якщо у вас є блог, не забудьте встановити такі кнопки, як «Like» і «Tweet».

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

Теги

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

MacTalk використовує список тегів, а хмара тегів відображає найпопулярніші теги на сайті.

стилізація футера

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

визначаємо ієрархію

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

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

Футер даного сайту включає в себе інформацію про авторські права (стандартний елемент), а також посилання на інші корисні інформації. Кожна частина інформації відділяється в як індивідуальний елемент.

Моделювання гарного списку

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

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

Порожній простір (пробіл) є ключовим

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

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

Відмінність футера від загального контенту

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

Футери зазвичай робляться на більш темних фонах. Деякі з них мають графічні або ілюстровані фони. Кріс Колвін (Дивіться зображення нижче) переконаний, що зміст сайту чітко відокремлено від футера. «Відірваний» шматочок шпалер виглядає красиво і чудово вписується в атмосферу сайту.

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

Блискуча векторна графіка і колірна палітра, відвідувач відчуває умиротворення, дивлячись на цей футер.

Matt Mullenweg

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

Ресторан Nuevo Aurich

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

Blog.SpoonGraphics

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

Carol Rivello

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

Vimeo

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

Gisele Jaquenod

Стиль дизайну Gisele може бути сприйнято через весь веб-сайт, мила графіка і хороша ідея для футера.

flicka.cz

Підвал виконаний в ретро стилі, прекрасне рішення і оригінальний дизайн.

TNT Pixel

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

CooperLive

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

Білий дім

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

SprintBio

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

готові проекти

Останні повідомлення, останні твіти та корисні посилання, ось три речі, які роблять цей підвал невід'ємною частиною веб-сайту.

Josh Mackey

Цінністю цього підвалу є використання іконок. Тут розміщуються посилання на деякі з основних веб-ресурсів.

David Hellman

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

Iseeq

футер сайту www.iseeq.com виконаний в класичному стилі і строгих тонах, містить всю необхідну інформацію про фірму та її діяльність.

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

Автор: Краснова Анастасія - директор помаркетінгу компанії Iseeq.com