Під час аналізу візуального оформлення сайту ми вказуємо на те, як він привертає увагу. Але при цьому небагато користувачів можуть зрозуміти причину, з якої зовнішній вигляд інтерфейсу є привабливим. Композиція, яка створюється за принципами візуального дизайну, може істотно залучити потенційних користувачів і поліпшити зручність використання інтерфейсу.
Різні візуальні елементи веб дизайну, які заповнюють простір інтерфейсу, такі як форми, фігури, кольори, сітки, графіка, об'єднуються воєдино для створення якісно продуманої композиції. І для того, щоб все добре і лаконічно виглядало, нам допоможуть принципи візуального дизайну.
Виділимо 5 основних принципів дизайну:
Масштабування (Scale)
Принцип масштабування полягає у використанні відносного розміру для позначення важливості елемента композиції.
Принцип масштабування застосовується дуже часто, майже кожне гарне дизайн-рішення виконане відповідно до нього. Адже очевидним є той факт, що на більші елементи найчастіше звертають увагу.
Цей принцип допомагає досягти певної різноманітності при використанні елементів різного розміру, а також встановлює візуальну ієрархію на сторінці.
Якщо правильно застосувати принцип масштабування, при цьому наголосивши на важливих елементах, користувачі з легкістю зможуть розібратися у візуальному оформленні інтерфейсу, і їм легко зрозуміти, як його використовувати.
Як приклад розглянемо головний екран сайту Bloomberg, де популярна стаття є першою, бере на себе певну візуальну вагу, тим самим акцентуючи увагу користувача.
Візуальна ієрархія (Visual hierarchy)
Принцип візуальної ієрархії полягає в тому, щоб спрямовувати погляд на сторінку таким чином, щоб елементи відображалися в порядку їхньої важливості.
Інтерфейс, у якому правильно підібрано візуальну ієрархію, є більш зрозумілим і простим у використанні.
Цей принцип реалізується за допомогою масштабу, кольору, відступів та розташування елементів.
Візуальна ієрархія має контроль за поданням контенту користувачеві. І якщо ви зіткнулися з проблемою, що важко знайти певний елемент в інтерфейсі, ймовірно, в даному дизайні відсутня чітка візуальна ієрархія та порушені принципи графічного дизайну сайтів.
Декілька типових рішень, які можуть сприяти вирішенню цієї проблеми:
- Використовуйте 2-3 різних розміри та накреслення шрифту, тим самим вказавши користувачеві на важливі та другорядні частини контенту
- Застосуйте підбір різних колірних рішень, де важливі елементи контенту матимуть яскравий відтінок, а другорядні — більш приглушений.
- Існує правило про те, що дизайн може включати в себе малі, середні та великі елементи. Використовуйте різний масштаб для елементів дизайну
Це головна сторінка сайту Medium, де добре виділено перший блок із кнопкою заклику до дії. В даному випадку візуальна ієрархія дотримується за допомогою різних шрифтів, зображення, розмірів, а також фоном у жовтому кольорі, що істотно впливає на увагу користувача.
Баланс (Balance)
Баланс виникає, коли по обидва боки уявної осі поступово розподіляється кількість зорового сигналу.
Щоб краще зрозуміти принцип балансу, спробуйте уявити звичайну вагу, тільки замість ваги «збалансуйте» елементи дизайну інтерфейсу.
У дизайні такий самий сенс, якщо по один бік осі розташувати великий елемент, а з іншого — менший, дизайн буде розбалансованим. Для того, щоб досягти прийнятного балансу, потрібно брати до уваги область, яку займає елемент дизайну, а не їх кількість.
При створенні композиції, в макеті ви можете провести уявну вісь, яка візуально ділитиме ваш екран навпіл, вона і дасть розуміння про поточний стан рівноваги для візуальних елементів. Якщо дизайн збалансований, то жодна область не привертатиме увагу настільки суттєво, що ви не зможете побачити решту макета.
Виділимо кілька видів балансу:
- Симетричний: елементи симетрично розподілені щодо центральної осі
- Асиметричний: елементи асиметрично розподілені щодо центральної осі
- Радіальний: елементи розташовані радіально щодо центральної точки
Якщо ви хочете застосувати якийсь конкретний тип балансу, необхідно орієнтуватися на те, в якому форматі ви хочете передати контент.
Асиметрія є більш динамічною та цікавою. Вона надає макету певного відчуття енергії та руху. Симетрія найчастіше спокійніша і виглядає статично, а радіальний баланс в основному акцентує погляд на центр композиції.
Контраст (Contrast)
Принцип розмаїття полягає у зіставленні візуально несхожих елементів з метою передати те, що ці елементи різні.
Цей принцип також є поширеним, оскільки виділяє певні елементи інтерфейсу і збільшує їх значимість для сприйняття.
Його можна застосувати в тому випадку, якщо ви хочете візуально показати різницю між двома або декількома елементами кольору (наприклад, різними відтінками).
Як приклад, часто в дизайні інтерфейсів червоний колір використовують для видалення або відображення якоїсь помилки.
Інший приклад — на наступному макеті зробили виділення на слові «Ukrainian» у кольорах відповідного прапора, тим самим акцентуючи, про яку країну йдеться.
Гештальт (Gestalt)
Принципи гештальту відбивають нашу схильність сприймати ціле, а не окремі елементи.
Досягнення хорошого результату при проектуванні інтерфейсу сприяють кілька цілей: а саме ефективна комунікація, бажаний результат та зручність користування.
Принцип Гештальту часто допомагає нам у досягненні певних цілей та створенні приємного досвіду взаємодії з користувачем, що призводить до успіху бізнесу.
Принцип Гештальту так само можна поділити на кілька типів:
- Близькість
- Подібність
- Безперервність
- Завершеність
- Симетрія
- Порядок
Саме тип завершеності дозволяє нам побачити в картині Пікассо двох людей, що цілуються, замість різних фігур. Все тому, що наш мозок домальовує частини, що бракують, щоб відтворити цілісність картини, в даному випадку — поцілунку.
А на сайті Uber застосовано рішення щодо розміщення пов'язаних елементів у безпосередній близькості з використанням прогалин, а також відділенням блоку білою підкладкою. Це рішення дає зрозуміти, що контент є одним цілим. Тут було використано тип близькості.
Висновок: Принципи візуального дизайну — це основи web дизайну, які повинен знати кожен спеціаліст у цій галузі.
Вони інформують нас про те, як елементи дизайну поєднуються між собою для створення всебічного та продуманого візуального образу.
Графіка, заснована на принципах гарного візуального дизайну, може привернути увагу та підвищити зручність використання.
