Як працювати з композицією у дописах і stories

Час читання: 15 хвилин

Композиція — це додавання малих елементів в одне ціле. Це розташування об'єктів, у якому вони гармонізують між собою.

Як починається твоя робота:
  • у тебе є макет (1080х1080)
  • ціль
  • контент, який потрібно упакувати (заголовки H1, H2, основний текст, фото, патерн, номер сторінки, 10 логотипів спонсорів тощо)
Твоє завдання — зібрати з цих елементів цілісну композицію так, щоб макет виконував свою функцію і при цьому був приємним на вигляд.
Продумана композиція збалансує всі елементи, відокремить головне від другорядного та дозволить керувати увагою та емоціями користувача.

Твій макет — це шахівниця, на якій ти — головний, і ти розставляєш фігури так, щоб користувач зробив потрібний хід (хвилина метафор). У цьому вся сила композиції.
Композиційний центр
З чого почати робити композицію та як відокремити головне від другорядного?

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

Композиційний центр потрібний для фокусування уваги на деталях композиції.

Але при цьому композиційний і геометричний центр (центр самого макета) композиції можуть не збігатися.

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

Зверніть увагу також на 3 картинку, де реклама програми Crello. Рекламна Stories живе в контексті та середовищі Інстаграм, де інтерфейс програми стає частиною композиції. Тому важливо враховувати всі ці моменти та взаємодіяти з ними за потребою.
Основні елементи композиції. І якщо ми торкнулися основи композиції, то давай розберемося з її базовими елементами.

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

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

2. Трикутник
Те саме стосується і гострих кутів трикутника.

3. Багатокутники та прямокутники
Вирівнюються по центру маси (тобто за композиційним центром, а не за геометричним).
Як це працює у житті?

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

Чому це працює? Тому що літера С — це коло, і нам достатньо посунути убік, щоб збалансувати композицію.
Приклади гармонійної композиції
Далі ми розберемо, за допомогою яких інструментів ми можемо досягти гармонійної композиції.

1. Роби композицію цілісною
Це така композиція, у якій кожен елемент взаємопов'язаний з іншим і стоїть на своєму місці. Така композиція не викликатиме думки «Що тут не так? Краще я піду далі і не розбиратимуся».

Наприклад, постер з екскурсією в метро (1) — кожен елемент сам по собі, текст із картинкою абсолютно не взаємодіє, відсутній композиційний центр. Що може врятувати: змінити фото, де акцент буде на вагоні; збити текст разом, розставити ієрархію.

На інших постерах (2, 3) все збалансовано і кожен елемент взаємодіє з іншим за розміром, кольором, змістом. Навіть незважаючи на порожній простір у третьому постері, композиція цілісна за рахунок елементів, що підтримують, — дрібному тексті знизу і збоку.

Щоб перевірити, чи всі елементи потрібні та стоять на своєму місці, можеш закрити рукою (або вимкнути шар у фотошопі) об'єкт та порівняти, чи стало гірше. Якщо стало гірше — повертай; якщо нічого не сталося (або стало краще), сміливо позбавляйся цього елемента.
2. Користуйся правилом третин
Це правило прийшло з фотографії, ти, напевно, зустрічав його. Працює шикарно та у графічному дизайні. Звучить воно просто: важливі елементи композиції розташуй уздовж ліній або на перетині їх точок. Це ті місця, на які очі зручно дивитися.

Не знаєш, що роби — почни користуватися правилом третин.
3. Використовуй якірні об'єкти.

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

Куди їх розміщувати? Куди хочеш, це твоя композиція :)

Або можеш скористатися правилами, які точно працюють:

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

Кукурудза під час оформлення також використовує якірні об'єкти. Але зверни увагу — не обов'язково задіяти кожен головний, щоб композиція була цілісною.
  • Розташування якірних об'єктів вздовж силових сторін
Якірні об'єкти також можна розмістити вздовж однієї з силових сторін композиції та зробити її цілісною. Яскравий приклад — інтерфейс твого робочого столу. Зазвичай іконки та меню розташовують внизу та вгорі.
Давай розглянемо ще приклади (картинки нижче). Необов'язково задіяти всі силові сторони та заповнювати їх (3). Ти можеш це робити частково і грати з масштабом та пропорціями, тобто дивитися, як балансують за масою твої якірні об'єкти вздовж сторін.

Заголовок по вертикалі Coucou балансує по візуальній масі з текстовим блоком на протилежній стороні. У той же час дрібний текст зверху ліворуч і внизу праворуч римується і так само підтримує композицію.

На четвертому прикладі ми повністю закомпоновуємо всі силові сторони текстом та лініями. Що також тримає композицію у межах і не дає їй розвалитися. Зверніть увагу, що якщо ми будемо по черзі прибирати ці елементи (5), то композиція вже виглядатиме по-іншому і потихеньку розвалюватиметься.
Також не забувай про вільний простір та повітря в композиції, щоб користувач добре зчитав якірні об'єкти. Вільний простір (повітря в композиції) потрібний, щоб полегшити сприйняття об'єктів. Чим більше такого простору, тим легше помітити та виділити об'єкти.

Порівняй дві історії нижче. Де більше простору та композиція легше сприймається?
Часта помилка початківця в тому, що він прибирає «зайве» простір, заповнює всю композицію повністю до останнього. Думає, що якщо зробить величезним текст, його побачать, і якщо зробить менше, його у жодному разі не прочитають. Або якщо зробить картинку на весь артборд, текстову плашку зробить за ієрархією так само, як текст, то все стане зрозумілим. А ще найулюбленіше: більше фільтрів, текстур, гіфок тощо, щоб було весело. І забуває в такому разі про інтерфейс Інстаграм у Stories (іконка, лічильник історій та можливість надіслати повідомлення).

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


4. Рифмуй об'єкти

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

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

Завдяки тому, що є рима, ми можемо швидко розібратися в контенті, зрозуміти, що важливо, що менш важливо і швидко споживати контент без зайвих питань.
Як римуються елементи в акаунті Кукурудзи (виділено кольором): дрібний текст зверху над заголовком підтримує композицію та доповнює зміст допису; картинки в єдиному стилі і займають певне місце за розміром і масштабом; графічні елементи у вигляді декоративного тексту обведенням та фігури; тональність дописів також є єдиною.
5. Балансуй свою композицію

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

Подивися на постер: його оригінал та дві варіації без нижньої та верхньої частини. Потім порівняй, наскільки змінився баланс у кожній із композицій. На другому варіанті композиція підстрибнула вгору, на третьому — навпаки впала. А разом (1) вони підтримують одне одного та доповнюють. Ось так і працює баланс.

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

Дивимося приклад нижче:

  1. Можемо вважати, що композиція в рівновазі, оскільки масивну картинку зверху абсолютно балансує масивний текст знизу. Зверни увагу, якби, наприклад, не було контурних ліній на фото, то композиція була б важкою внизу.
  2. У другому прикладі з макаронами все чудово, композиція і цілісна, і в рівновазі, і римується. Спробуй тут подумки прибрати якийсь елемент (коробку або просто макарони на фоні) і все відразу впаде. Також зелена форма під коробкою вгорі відмінно балансує за кольором із зеленою коробкою внизу.
  3. В останньому прикладі для балансу кольору і маси. Верхній білий текст (дата та час) балансує з нижнім червоним.
Порівняй «до» та «після». Бачиш різницю?
Насправді тут різниця дуже проста, два кліки:

  • підібрали пропорційний картинці масштаб тексту;
  • змінили зображення.

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

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

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

Перед початком роботи постав собі направляючі (картинка нижче):

  • по сторонам
Щоб розміщувати контент на однаковій відстані від кожної сторони, і дотримуватися цієї відстані в кожному дописі. Якщо на першій картинці відступати 3 см, на другій — 2 см, а не третій — 1 см, буде помітно, як вона стрибає.

  • якщо допис 3:4 (як дописи Кукурудзи — не квадратні, а прямокутні), то постав направляючі — вони покажуть простір, який видно в акаунті
Таким чином ти керуєш, як твій допис виглядатиме в акаунті і прибиратимеш або навпаки діставатимеш якісь елементи у видиму область.
Ще один приклад. Давай дивитися на картинку та мірковувати:
  1. На першому візуалі елементи пов'язані один з одним, ні пропорціями, ні кольором, ні композиційно. Вони живуть самі собою.
  2. На другому малюнку вони не те, щоб не пов'язані, вони втекли один від одного.

На другому візуалі в слайдері мінімальні пропозиції як можна було б покращити:
  1. Додати якірних об'єктів знизу та зверху, щоб зв'язати композицію та тримати її (замість смужок там може бути текст)
  2. А в цьому випадку вирівняти заголовок та текст до нього, підняти все одне до одного. Збільшити картинку та поставити її по центру.

Як гадаєш, стане краще?
Підсумок
Пробуй, експериментуй, міксуй, шукай новий погляд і виходь за рамки, але дотримуйся правил :)

Чек-лист:

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