Візуальна ієрархія є однією з найважливіших складових ефективного веб-дизайну.
При створенні Лендінгу дуже важливо визначити місце найбільшого фокусу уваги. Воно буде служити відправним пунктом для сприйняття сторінки, а також містити найбільш цінну для користувача інформацію. У ньому має бути зазначено, які дії відвідувач повинен зробити далі.
Кінцева мета візуальної ієрархії полягає в тому, щоб швидко дати користувачеві відповіді на наступні питання:
Що це? (Принцип корисності)
Як це використовувати? (Принцип зручності)
Чому це має мене турбувати? (Принцип бажаності)
Візуальна ієрархія спрощує процес пошуку. Завдяки їй, людині простіше зрозуміти, які дії потрібно зробити для підвищення вашої конверсії.
1. Точка фокусу
Точка фокусу являє собою область композиції сайту, яка повинна привернути увагу користувача. У веб-дизайні це зазвичай заклик до дії або форма для заповнення.
2. Рух
Більшість людей схильні вивчати сайт приблизно в одному і тому ж порядку, і людське око автоматично дивиться в певні зони екрану.
Існує два культурних паттерна читання тексту: Z-патерн і F-патерн. Підстроювання дизайну або тексту під ці шаблони зробить ваш контент зрозумілішим. Якщо відвідувачі вивчають сторінку не в тому порядку, в якому ви б хотіли, проведіть спліт-тестування двох варіантів сайту, які відповідають цим паттернам.
3. Золотий перетин
TutsPlus дуже вдало визначив це поняття: «Золотий перетин – це математична пропорція, зазвичай зустрічається в явищах природи і використовувана в класичній теорії дизайну для створення гармонійних композицій». Простіше кажучи, це об’єкт, що нагадує спіраль. Ви можете побачити золотий перетин в квітах і мушлях.
4. Баланс
З точки зору дизайну, баланс – це симетрія елементів. Це основа гармонії і порядку. Однако ви можете зробити контент асиметричним, і такий підхід цілком може дати цікаві візуальні результати.
5. Повторення
Повторення – відмінний спосіб підкреслити важливу інформацію. Наприклад, якщо всі ваші заголовки і підзаголовки мають певний розмір і колір, користувач, швидше за все, додасть цьому певний сенс. Те ж саме стосується посилань в тексті і кнопок заклику до дії.
6. Порожній простір
Порожній простір в веб-дизайні – це нічим не заповнений простір між графікою, стовпцями, зображеннями, текстом і іншими елементами на сторінці.
Це один з найважливіших інструментів проектування, оскільки від нього залежить, наскільки легко читається Лендінг. Порожній простір дозволяє вашим відвідувачам «видихнути» в процесі отримання інформації. Також він може підкреслити деякі значущі елементи.
7. Візуальний трикутник
Візуальний трикутник виходить тоді, коли ви маєте в своєму розпорядженні три будь-яких елементи навколо контенту, важливість якого потрібно підкреслити.
8. Текстура
Текстури потрібні, щоб навпаки знизити зайву кількість порожнього простору. Вони привертають увагу відвідувачів.
9. Шрифти
Правильно обраний шрифт допомагає візуально організувати контент. Також він грає важливу роль в створенні настрою дизайну і служить чудовим засобом для розстановки акцентів. Наприклад, поєднання декоративного шрифту з простим sans-serif створює візуальні відмінності і вказує на ступінь важливості того чи іншого тексту.
10. Випадковість
Іноді заперечення загальних правил дизайну і реалізація оригінальних ідей можуть бути виправдані, але всі ваші кроки повинні бути обгрунтовані. Не можна без будь-якої причини приймати те чи інше дизайнерське рішення. Однак стратегічно продумане використання випадкових елементів може привернути увагу користувачів.
11. Порушення правил
Стандартні розміри, шаблони, сітки – всі ці правила веб-дизайну допомагають вам при створенні Лендінгу, але ви зовсім не зобов’язані завжди їм слідувати. Їх порушення – один з найпростіших способів створити візуальний зацікавленість і привернути увагу відвідувачів.
12. Вирівнювання
Як говорилося вище, використання сітки для вирівнювання елементів дизайну організовує контент, а також спрощує адаптацію вашого веб-сайту з кількома пристроями.
13. Лінії
Більшість західних користувачів читає зліва направо. Саме з цієї лінії слід розташовувати важливі елементи дизайну.
14. Контраст
Контраст може бути створений кольором, текстурою, формою, напрямком і розміром. Це один з найпростіших способів створити ефект візуальної значимості. Використовуйте яскраво-червоний або оранжевий кольори в оформленні елементів призову до дії.
15. Правило трьох
Це простий метод проектування, при якому ви розбиваєте дизайн сайту на три рядки і три стовпці. Місця, де перетинаються вертикальні і горизонтальні лінії, повинні відповідати вашим точкам фокусу.
Loading...
