Візуальна ієрархія: як її правильно використовувати у дизайні (Частина 2)

DesignTalk.club продовжує популярний туторіал про дуже важливу тему – візуальну ієрархію у дизайні.

Застосовуйте правило золотого перетину

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

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

Використовуйте сітку

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

Додайте кілька кольорів

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

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

Зверніть увагу на шрифти

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

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

Три рівні для Інтернету, два для мобільних пристроїв

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

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

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

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

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

Також вам буде ДУЖЕ ЦІКАВО:

Вам сподобалося?

Читайте щотижня наші кращі статі про дизайн!

email рассылки

Корисна розсилка!

Все найцікавіше про дизайн і дизайнерів!
А ще свіжі вакансії і трішки гумору)

Ваш email:
email рассылки
Позначки:

Залишити відповідь