Що таке хедер та футер?

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

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

Header (тобто “шапка сайту”) – верхня частина сайту, яка привертає увагу та полегшує процес навігації: перехід в інші розділи, пошук необхідної інформації.

Шапка сайту зазвичай містить у собі:

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

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

Різноманітність оформлення хедера:

• Класичне: логотип зліва зверху, внизу – горизонтальне меню з іконками для покращення сприйняття та прикраси, також є кнопка пошуку та кошика.
• Подвійне меню: містить основне та спливаюче меню, яке відкривається при наведенні. Воно підходить для сайтів із великою кількістю сторінок.
• Велике зображення: використовується для сайту, мета якого – презентація товару або особистості. Це хороший спосіб звернути пильну увагу.
• Анімація: багато сучасних дизайнерів вдаються до використання анімацій, щоб посилити ефект привабливості та запам’ятовування. Але треба бути з цим обережними, оскільки цей інструмент підходить не для всіх сфер діяльності.
• “Гамбургер”: поняття, яке використовується стосовно меню сайту. Це невеликий знак у вигляді трьох смужок, натискаючи на який відкривається повне меню. Він використовується для того, щоб не красти увагу головного акцентного елемента сайту. Це виглядає просто та лаконічно.
• Стилізоване оформлення або шапки у вигляді ілюстрацій: нестандартний спосіб подачі інформації точно запам’ятатися, але потрібно бути дуже обережним із цим, тому що користувач може не відразу зрозуміти, як цим користуватися.

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

Що може бути у футері:

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

Основні принципи створення хедера та футера:

1. Зверніть увагу на типографіку: правильно підібрані шрифти, які будуть добре читатися, інтервали та відступи.
2. Якщо концепція дизайну дозволяє, зробіть хедер фіксованим, а футер відмінним від загального контенту.
3. Зважайте на важливість ієрархії: обміркуйте наявність та розташування всіх елементів, які плануєте помістити, щоб користувачеві було легко розібратися та знайти необхідну йому інформацію.
4. Кнопки та поля зворотного зв’язку повинні містити зрозумілий для користувача напис і бути помітним серед інших елементів.

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