Зміст статті
Чи бувало у вас таке, що ви заходите на сайт і… губитеся? Наче зійшли зі зрозумілої стежки у дрімучий ліс. Усі дерева здаються однаковими — заголовки та текст зливаються з картинками, а важливі кнопки ховаються в тіні, як гриби під листям. Ви блукаєте колами в пошуках потрібної інформації, відчуваючи, як наростає роздратування. Зрештою, ви втомлюєтеся шукати потрібний шлях і просто закриваєте сайт.
Все це відбувається тому, що на сайті не опрацьована візуальна ієрархія, яка відповідає за порядок. Вона — як компас і карта для мандрівника, що заблукав, яка перетворює будь-які хащі на зрозумілий і зручний парк. І сьогодні я, як ваш провідник, навчу її читати.
Ця стаття — п’ятий урок мого відкритого марафону “Шлях до Майстерності“, де я крок за кроком освоюю веб-дизайн.
Принципи візуальної ієрархії
1. Головний орієнтир — Розмір та масштаб. Щоб мандрівник не заблукав у нашому лісі, йому потрібна система орієнтирів. Головний з них — це розмір. Ним може бути найбільший об’єкт на сайті. Він — як величезний тисячолітній дуб, що росте на пагорбі, його добре видно з будь-якої точки лісу. У дизайні таким “дубом” є головний заголовок або найважливіше зображення. Правило просте: великі елементи завжди здаються більш важливими і притягують погляд у першу чергу.
2. Яскраві ягоди — Колір та контраст в дизайні. Наступний дороговказ, який помітить наш мандрівник в однотонному зеленому лісі, — це щось яскраве та контрастне. Наприклад, кущ із соковитими, стиглими ягодами. Саме так працює ваша головна кнопка — “Купити” або “Зареєструватися”. Вона має бути “найсоковитішою” на сторінці, тоді як другорядні кнопки, як-от “Скасувати”, можуть бути “нестиглими” — сірими та непримітними.
3. Сонячна галявина — Сила негативного простору. Уявіть, що ви кілька годин продиралися крізь густі хащі й нарешті виходите на простору, залиту сонцем галявину. Яке полегшення! “Повітря” на сторінці — це і є така “галявина”. Воно дає оку відпочити і допомагає сфокусуватися на тому єдиному об’єкті, що знаходиться в її центрі. Оточіть важливий елемент “повітрям”, і він одразу стане головним.
4. Вказівники на роздоріжжях — Розташування. Досвідчений лісник завжди розміщує найважливіші вказівники на видноті — на самому початку стежки або на головних роздоріжжях. Саме тому логотип і меню на сайті завжди знаходяться вгорі, а найважливіша пропозиція — в першому абзаці. Ми ставимо їх там, де погляд користувача буває найчастіше, слідуючи F- і Z-патернам. Доречі про ці паттерни, та про те як керувати увагою глядача за допомогою композиції, ми говорили у попередньому уроці.
Практика: Прокладаємо першу стежку на галявині тарифів
Теорія — це карта, але справжня майстерність лісника перевіряється в дії. Тому завданням уроку було вирушити у Figma та облагородити свою першу галявину — створити блок із тарифними планами.
Спочатку я, як і було сказано, створив скелет — три абсолютно однакові прямокутники для тарифів “Базовий”, “Профі” та “Бізнес”. У кожному я написав назву, ціну та список функцій одним і тим же шрифтом — безликим і монотонним.
Я подивився на результат і зрозумів: це і є та сама дрімуча гущавина. Три однакові дерева, жодного вказівника. Погляд метався між ними, не знаючи, за що зачепитися. Користувач на такій галявині просто розгубиться і піде.
Потім я дістав зі свого рюкзака інструменти провідника — карту та компас, щоб непомітно підказати мандрівникові, де знаходиться найкраща криниця з водою — наш тариф “Профі”.
- Спочатку я встановив головний орієнтир, застосувавши “Розмір”. Я зробив заголовок тарифу “Профі” набагато більшим і жирнішим — перетворивши його на той самий тисячолітній дуб, який неможливо не помітити.
- Потім я додав яскравих ягід, використовуючи “Колір та Контраст”, перефарбувавши прямокутник у блакитний колір. Кнопку “Замовити” в тарифі “Профі” я пофарбував у найсоковитіший, найяскравіший колір, а в інших залишив блідою і “нестиглою”. Вся конструкція ніби говорила: “Ось тут — найсмачніше”.
- І нарешті, я поставив вказівник на роздоріжжі, застосувавши “Розташування”. Я зробив саму картку “Профі” трохи вищою за інші, щоб вона ніби виступала вперед, і додав зверху маленьку плашку-стрічку — “Популярний вибір”.
І сталося диво. Хаос зник.
Тепер, дивлячись на цю галявину, погляд більше не блукав. Він миттєво, немов по ідеально прокладеній стежці, спрямовувався до тарифу “Профі”. Я не кричав користувачеві: “Обери його!”. Я просто чемно і непомітно вказав йому шлях. У цей момент я по-справжньому відчув себе не просто веб-майстром, а провідником. Це і є магія візуальної ієрархії — мистецтво бути невидимим, але дуже переконливим.
Коли порядок стає мистецтвом: ще кілька прикладів
Коли я навчився бачити “компас” ієрархії, я почав помічати його всюди. Наприклад, на сайтах новин, де найважливіша новина дня завжди має найбільший заголовок – розмір. Або в інтернет-магазинах, де кнопка “Додати в кошик” завжди найяскравіша колір, а посилання “Порівняти товар” — ледь помітне. Це доводить, що візуальна ієрархія — це не просто правило, це мова, якою хороший дизайн спілкується з користувачем.
Дякую, що відвідали цей ліс разом зі мною! У наступному уроці ми почнемо вільний простір у веб-дизайні
