4 грудня 2015 р.

Дизайн футера сайту

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

Дизайн підвалу сайту - найкращі практики

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

Що ж все-таки варто розміщувати в цьому блоці?

1. Допоможіть користувачеві дізнатися, хто ви. Додайте в підвалі посилання "Про нас", "Наша команда" або подібні, а також посилання на соціальні мережі або корпоративний блог - користувачеві важливо знати, що вдає із себе компанія, на сайт якої він потрапив.
2. Надайте базові дані для зв'язку. Вкажіть основний телефон, електронну пошту і вашу адресу. Чудово, якщо тут буде також посилання на карту від Google або Яндекс.
3. Додайте заклик до дії у вигляді кнопки. Якщо користувач прокрутив ваш сайт прямо до футера, скажіть, що він може зробити - підписатися на новини, надіслати вам листа або "лайкнути" вашу сторінку в соціальній мережі.
4. Залишайте достатньо вільного місця. Усі дані в підвалі мають добре читатися і не наїжджати одна на одну.
5. Групуйте посилання. Подумайте про користувача - йому буде зручніше розібратися, в якому стовпчику шукати те, що йому потрібно. Завдяки групам підвал матиме більш організований вигляд, що особливо важливо для багатоповерхових футерів з великою кількістю інформації.
6. Дотримуйтеся стилю основної частини сторінки. Немає нічого гіршого, ніж коли частина сторінки не відповідає решті дизайну, тому обов'язково враховуйте цей момент.
7. Пам'ятайте про ієрархію. У підвалі, як і у всіх інших частинах сторінки, має простежуватися ієрархія: найважливіші складові, на кшталт номера телефону, мають бути найпомітнішими, а стандартна інформація, на кшталт копірайту, відображатися найменшим шрифтом.
8. Не використовуйте занадто великі зображення. Вони відволікатимуть користувача від того, що дійсно важливо.
9. Виділіть футер констрастним кольором. Наприклад, якщо в основній частині використовується білий фон, то футер краще зробити темним. Таким чином ви відокремите основну частину сторінки від другорядної, якою є підвал. Не забудьте вказати інформацію про розробників і власників сайту.

Креативний дизайн підвалу веб-сайту

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

Зіграйте на ідеї "близькості із землею"

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

Крім того, в цьому варіанті дизайну також використано яскравий колір посилань, завдяки чому вони добре помітні, і два корисних елементи:

1. Форма зворотного зв'язку (до того ж у ній одразу пропонується вибрати місто, в якому розташоване одне з представництв).
2. Поле для підписки на розсилку подій і спеціальних пропозицій.

"Оживіть" футер за допомогою невеликих зображень

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

Подумайте про альтернативи картинкам

Інноваційний дизайн футера web-сайту може використовувати не тільки картинки, а й невеликі анімації. Тут можна розмістити інфографіку, фактоїди (короткі твердження без посилання на джерело) або ж цікаво реалізовану навігацію. Наприклад, ось футер з календарем для блогу, який одразу привертає увагу:

Придумайте спосіб оновлювати підвал щодня

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

Не бійтеся використовувати неправильні форми

Підвал не обов'язково має бути оформлений у вигляді прямокутного блоку. Інноваційний дизайн футера web-сайту може мати асиметричний вигляд і при цьому гармонійно вписуватися в загальний вигляд сторінки. Наприклад, ось варіант із гострими кутами:

А тут ми бачимо плавні лінії, що об'єднують розділ із відгуками і, власне, підвал:

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

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

Ми, студія stfalcon.com, розробляємо веб-сайти будь-якої складності, і завжди раді втілити в життя найсміливіші ідеї наших клієнтів.