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

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

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

У шапці сайту можуть бути розміщені наступні елементи:

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

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

1. Не забувайте про типографіку. Відвідувач в першу чергу прочитає назви розділів і надану на сайті інформацію: пропозиції товарів і послуг, описи переваг, контактні дані. Тому вибір читабельного шрифту, що поліпшує сприйняття інформації, є дуже важливим.
2. Враховуйте призначення і стиль сайту. Якщо сайт призначений для презентації продуктів і послуг компанії, дизайн хедера може бути обмежений посиланнями на основні розділи сайту. У випадку з торговими платформами, службами доставки, інтернет-магазинами, цього недостатньо. Користувач повинен легко орієнтуватися на сайті, мати можливість легкого зв’язку з диспетчером або менеджером, а також можливість доступу до особистого кабінету.
3. Приділіть особливу увагу розташуванню елементів. Логотип компанії краще розміщувати в лівому верхньому куті або в центрі, а кнопку для зворотного зв’язку і контактні дані – в правому. Це істотно покращує юзабіліті і полегшує орієнтування, оскільки таке розташування елементів є загальноприйнятим.
4. Розробіть особливий дизайн для кнопки і форми зворотного зв’язку. Створюючи хедер сайту, дизайнер розміщує в ньому кнопку заклику до дії і пов’язану з нею форму для внесення даних. Для залучення уваги відвідувача і здійснення ним цільової дії кнопка повинна містити зрозумілий напис і бути помітною серед основного контенту. Форма зворотного зв’язку повинна містити тільки необхідні поля і, по можливості, перешкоджати помилковому заповненню.

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

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

У підвалі сайту можуть розміщуватися такі елементи:

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

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

Наведемо кілька рекомендацій з розробки дизайну футера:

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