Композиція в дизайні: основні правила для початківців

Крок 1

Ієрархія: що головне

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

• •NN/g радить обмежитися трьома розмірами: малий, середній, великий — наприклад, заголовок, підзаголовок і основний текст;
• •якщо два елементи однаково великі й яскраві, вони змагаються за увагу, і жоден не виграє.

💡 Тест примруження, який описує NN/g: примружтеся або злегка розмийте макет. Що лишилося помітним, те й читається першим.

Крок 2

Контраст: покажіть різницю

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

• •один акцент працює сильніше, ніж п'ять: якщо виділено все, не виділено нічого;
• •NN/g радить у складних макетах обмежитися трьома варіаціями контрасту;
• •не покладайтеся лише на колір: підсилюйте різницю ще й розміром, накресленням шрифту чи положенням, бо людина з порушенням колірного зору може не помітити різниці у відтінках.

Крок 3

Групування: близькість і схожість

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

• •близькість: елементи, розташовані поруч, сприймаються як одна група — тому підпис має стояти ближче до свого зображення, ніж до сусіднього;
• •схожість: елементи з однаковим кольором, формою чи розміром здаються пов'язаними, тож однакові за роллю речі оформлюйте однаково;
• •спільна область: рамка чи підкладка теж об'єднує елементи в групу.

💡 Відступ усередині групи має бути помітно меншим, ніж відступ між групами. Це найшвидший спосіб навести лад без жодних ліній і рамок.

Крок 4

Баланс: розподіліть вагу

NN/g описує баланс як рівномірний, але не обов'язково симетричний розподіл візуальної ваги по обидва боки уявної осі. Великий, темний чи яскравий елемент «важчий» за дрібний і світлий. Види балансу:

• •симетричний — спокійний і статичний;
• •асиметричний — динамічний, створює відчуття руху й енергії;
• •радіальний — елементи розходяться від центру й ведуть погляд до нього.

💡 Порожнє місце теж має вагу. Не намагайтеся заповнити кожен кут: вільний простір допомагає головному елементу дихати.

Крок 5

Сітка й вирівнювання

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

• •оберіть кількість колонок під формат: для афіші чи поста часто вистачає кількох, для сайту їх більше;
• •вирівнюйте краї тексту й зображень за лініями сітки, а не «на око»;
• •тримайте однакові поля по краях і однакові проміжки між колонками;
• •свідомий вихід за сітку — прийом для акценту, а не випадковість.

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