Зміст статті
Уявіть, що ви — режисер. Порожній екран сайту — це ваша сцена. Заголовок, картинка, текст і кнопка — це актори. І ось усі вони просяться вийти на сцену просто зараз. З чого почати? Кого випустити першим? Якщо випустити всіх одразу — вийде хаос на сторінці сайту, і глядач просто піде із зали, закривши сайт.
Довгий час я не розумів, як правильно керувати цими “акторами”, щоб постановка виходила гармонійною, а елементи на сторінці виглядали красиво і доповнювали один одного. На четвертому уроці свого марафону “Шлях до Майстероності” я познайомився з поняттям “композиція” у веб-дизайні. Сьогодні я хочу поділитися з вами трьома головними інструментами режисера, які допомагають перетворити хаос на сцені на захопливий спектакль.
Акт 1: Читаємо думки, або як керувати увагою користувача
Перше, що має знати хороший режисер, — це як його глядач дивиться на сцену. Куди падає його погляд, коли він уперше відкриває сайт? Виявляється, у нашого мозку є свої звички. За допомогою айтрекінгу вчені з’ясували, що ми скануємо контент за певними маршрутами — так званими “патернами”. Найвідоміші з них — F-патерн, характерний для великих текстів, і Z-патерн — для лендингів.
Все це тому, що наш мозок лінивий і не любить витрачати зайву енергію. Коли він бачить складну, хаотичну картинку, він відчуває когнітивне навантаження. Це викликає підсвідоме роздратування і бажання піти. Завдання хорошої композиції — знизити це навантаження.
Володіючи знаннями про патерни, ми можемо розставляти наших “акторів” прямо на шляху погляду користувача, щоб він гарантовано їх помітив.
Акт 2: Інструменти для ідеальної візуальної ієрархії
Тепер, коли ми розуміємо, як глядач дивиться на сцену, у нас є три інструменти, щоб гармонійно розставити акторів по місцях.
Світло прожектора — якорні об’єкти в дизайні
Якірний об’єкт — це візуальний гачок. Це наш головний актор, на якого ми спрямовуємо промінь світла. Його завдання — миттєво захопити увагу і сказати: “Дивись сюди! Тут найцікавіше!”. Такими об’єктами може бути величезний, контрастний заголовок або велике, якісне зображення.
Хороший приклад використання якірних об’єктів — сайт Apple. Ви спочатку бачите iPhone, перш ніж встигаєте прочитати хоч одне слово.
Розміщення на сцені — правило третин у веб-дизайні
Хороший режисер ніколи не ставить усіх акторів у центр. Він використовує всю глибину сцени, розміщуючи їх у “найсильніших” точках. Правило третин — це класичний прийом, що прийшов з фотографії, про його глибокі психологічні основи можна почитати у фундаментальній статті від Interaction Design Foundation. Воно ділить сцену на 9 рівних частин, утворюючи 4 точки перетину в центрі. Розміщуючи об’єкти на цих “точках сили” або вздовж ліній, ви створюєте візуальну напругу та динаміку.
Драматична пауза — сила негативного простору
Великі актори знають силу мовчання. “Повітря” на сторінці — це не порожнеча, а та сама тиша, яка змушує нас сфокусуватися на наступному важливому елементі. Негативний простір:
- Групує елементи. Елементи, розташовані близько один до одного, сприймаються як одна група. “Повітря” допомагає відокремити ці групи.
- Створює фокус. Оточуючи важливий елемент “повітрям”, ви змушуєте погляд сфокусуватися саме на ньому.
Акт 3: Перша репетиція — створюємо композицію у Figma
Досить теорії, час на сцену! Завданням уроку було зрежисирувати перший екран сайту, використовуючи всі три інструменти.
- Спочатку я підготував “сцену” — створив Фрейм розміром 1440×1024. Цей інструмент можна швидко викликати клавішею F.
- Потім розмітив її за допомогою Правила Третин. Для цього в розділі “Layout Grid” я спочатку створив 3 колонки, а потім додав 3 ряди.
- Далі я створив великий Прямокутник, який грає роль величезної картинки. Для цього використовується інструмент Rectangle (клавіша R). Я розмістив його в правій частині композиції так, щоб він займав дві праві колонки.
- Потім взяв інструмент “Текст” (клавіша T), написав заголовок “Hello World”, зробив його великим і жирним — 72px, Bold — і помістив у ліву верхню “точку сили”.
- Під заголовком додав менш великий текст-опис, використавши для цього текст-“рибу” Lorem Ipsum.
- Трохи нижче тексту створив кнопку “Call to Action” у вигляді маленького прямокутника.
- І нарешті, додав “повітря”, переконавшись, що навколо текстової групи та кнопки багато вільного простору.
І знаєте що? Це спрацювало. Переді мною була не просто група елементів, а збалансована та осмислена сцена. Хоча на перший погляд це просто безлика схема, вона показала мені, як створюється композиція у веб-дизайні.
Цей урок подарував мені відчуття спокою. Раніше я дивився на порожнє полотно з жахом. Тепер я дивлюся на нього з азартом режисера, який готовий почати свій спектакль.
Таємниця гармонійної композиції — не в таланті, а в знанні законів сцени. І сьогодні ми з вами зазирнули за лаштунки. У наступному уроці ми почнемо підбирати костюми для наших акторів — поговоримо про візуальна ієрархію у веб-дизайні. Дякую, що були в глядацькій залі!
