Основи композиції у дизайні: що це, які є принципи та закони, як застосовувати у дизайні

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

освойте найпопулярніші нейромережі для дизайнерів

1. Поняття композиції та чому вона важлива
2. Основні засади створення композиції
3. Закони елементів у композиції
4. Види композиції
5. Техніки побудови композиції
6. Композиційні схеми
7. Композиція у напрямках дизайну
8. Вправи для створення гарної композиції
9. Головне про композицію та дизайн

Поняття композиції та чому вона важлива

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

Одне з перших класичних визначень композиції виникло ще епоху Відродження. Архітектор Альберті описав композицію як «твір, вигадування, винахід». Художники та дизайнери використовують це поняття і зараз.

Дізнайтесь, яка професія у дизайні вам підійде

Основні засади створення композиції

Основні принципи композиції можуть здатися простими, але це негаразд. Принципи композиції надають зображенню глибину. Давайте розглянемо кілька.

Центральний елемент композиції

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

Центральний елемент у композиції. Джерело

Крапка, лінія та площина

У композиції є поняття focal point чи точка фокусування. Фокальною найчастіше називають невелику точку, яка відрізняється від решти елементів, і тому глядач затримує на ній погляд.

Створення focal point у композиції. Джерело

Таких точок фокусування може бути кілька. Виділити фокальні точки можна за допомогою кольору, розміру, форми або текстури. У дизайні точками фокусу вважають, наприклад, кнопки дії на сайті, фото профілю в кутку інтерфейсу, віджети та іконки чату.

На головній сторінці браузера Яндекс можна побачити відразу кілька точок фокусу, які виділяються із загальної композиції: перехід до Аліси, вхід до профілю та рекламні вставки. Ці точки відрізняються кольором, формою та розміром.

Focal points у дизайні веб-сайту Яндекс Браузера. Джерело

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

Створення цілісної композиції за допомогою точок, ліній та площин. Джерело

Симетрія та асиметрія

Щоб визначити, чи симетрична композиція ні, потрібно поділити зображення на дві рівні частини по горизонталі, вертикалі або діагоналі.

Діагональна симетрія та асиметрія

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

Ієрархія та домінанта

Ієрархія елементів у композиції може бути за розміром, кольором, відтінками і навіть формою.Ієрархія показує певний візуальний порядок і те, наскільки важливим є певний елемент.

Домінанта виділяється і натомість решти простору контрастним кольором чи формою. Вона не завжди розташована по центру. Її головна функція – виділити певну область у всій композиції.

Ієрархія та домінанта як принципи створення композиції

Пропорції та масштаб

У будь-якій роботі слід розуміти, наскільки елементи пропорційні один одному. Особливо у живопису, де пропорції та масштаб безпосередньо пов'язані з композицією, відповідають за реалістичність та візуальний баланс. Так, наприклад, у картині «Мисливці на привалі» Василя Григоровича Перова лише за пропорціями та масштабом у композиції ми можемо зрозуміти, що степ знаходиться далеко позаду героїв, а рушниці лежать ближче до нас.

Пропорції у композиції у картині В.Г. Перова «Мисливці на привалі». Джерело

Форма та простір

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

Позитивний та негативний простір у композиції. Джерело

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

Створення оптичної ілюзії з допомогою правил композиції. Джерело

Колір, тон та текстура

За допомогою комплементарних чи контрастних кольорів можна виділити різні області, встановити настрій.

Колір і композиції.Джерело --> --> -->

Як створити свій шрифт: інструкція

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

Приклад використання кольору для досягнення певної композиції у дизайні. Джерело

Рівновага та баланс

Різний розмір елементів, відстань між ними все це впливає на баланс у композиції. На прикладі показано, як різні відтінки та форма можуть впливати на сприйняття рівноправних елементів.

рівноваги в композиції на малюнку. Джерело

Закони елементів у композиції

У композиції є кілька законів, які ґрунтуються на людському сприйнятті та об'єднанні компонентів у смислові групи. Одними з основних вважають закон близькості, ритму та гештальту.

Закон близькості

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

Закон близькості до композиції веб-дизайну

Закон ритму та повторення

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

Закон ритму та повторення в композиції

Закон гештальту

Закон гештальту поєднує елементи за кольором, формою, розміром, розташуванням і візерунками. Навіть якщо компоненти не схожі, наприклад, за кольором, вони все одно можуть потрапити до загальної візуальної групи.У середньому стовпці цілісно сприймаються круги зеленого кольору, а темно-зелені круги вже немає.

Закон гештальту у композиції. Джерело

Види композиції

Є статика та динаміка, а ще відкрита та закрита композиції.

Статична та динамічна

Протистояння статичності та динамічності будується на візуальному «руху» та напрямку елементів. Статична композиція має на увазі статичний погляд глядача, будову по центру, а динамічна створює відчуття руху всіх елементів.

Статична та динамічна композиції. Джерело

Відкрита та закрита

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

Відкрита та закрита композиція

Техніки побудови композиції

Практичні техніки побудови композиції допомагають розрахувати розташування елементів та їх співвідношення. Серед таких технік виділяють золотий перетин та правило третин.

Стоп-кадр. Правила композиції у кіно

Золотий переріз та числа Фібоначчі

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

Золотий переріз як композиція. Джерело

За допомогою такої математичної послідовності та правила золотого перетину Леонардо Да Вінчі створив знамениту «Мону Лізу». Якщо накласти золоту спіраль на картину, можна побачити, як центральна фігура практично ідеально підходить під цю композицію, починаючи з становища рук і закінчуючи рисами обличчя.

Золотий переріз у композиції картини «Мона Ліза» Леонардо Да Вінчі. Джерело

Правило третьої

Правило третіх — одне з найпростіших правил, які можна використовувати для створення композиції. Розташування компонентів за правилом третин затримує увагу на конкретних областях зображення. У правилі третин використовують багато варіантів перетинів та ліній.

Створення композиції із правилом третин. Джерело

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

Правило третьої в композиції фотографії. Джерело

Композиційні схеми

Є кілька композиційних схем, які використовують художники та дизайнери у своїх креативних проектах. Розберемо одні із найпопулярніших: діаграму Гутенберга, схеми F та Z.

Діаграма Гутенберга

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

Діаграма Гутенберга у композиції. Джерело

Схеми F та Z

За цими схемами дизайнери часто створюють лендинги та сторінки веб-сайтів. Ось, наприклад, сторінка сайту unsplash.com за схемою F. Верхня лінія йде за категоріями, рядком пошуку та у верхньому лівому кутку по фото профілю.

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

Композиція зі схемою F на одній із сторінок сайту Unsplash

Приклад використання схеми Z на головній сторінці Contented. За допомогою контрастного кольору шрифту ми читаємо верхнє меню, а потім автоматично переходимо до заголовка, і погляд слід до самої стрілки в нижньому правому кутку сторінки.

Використання схеми Z у веб-дизайні сайту Contented. Джерело

Важливо пам'ятати, що основна відмінність схеми Z від діаграми Гутенберга в тому, що схема лише описує загальний напрямок погляду глядача, тоді як діаграма Гутенберга поділяє весь простір на конкретні потенційні області.

Композиція у напрямках дизайну

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

Графічний дизайн

У графічному дизайні правила композиції використовують практично скрізь - за допомогою них створюють постери, креативи та багато іншого. Наприклад, у рекламі FedEx можна побачити застосування правила третин, а також контраст за допомогою білого кольору посилки на темному тлі.

Правило третьої в креативній рекламі FedEx. Джерело

Дизайн-хвиля – ваше експрес-занурення у дизайн-професії. Беріть участь в ефірі з експертами, виконайте нескладні практичні завдання та отримайте подарунки.

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

Композиція логотип і золотий переріз. Джерело

Веб-дизайн

У веб-дизайні композиція допомагає збільшити трафік сайту або продаж продукту.

Якщо говорити про лендинги та односторінкові сайти, то мета композиції в цьому випадку – не дати користувачеві занудьгувати та піти, не вдавшись до жодної дії.
Тому дизайнери комбінують різні композиційні прийоми, затримуючи погляд користувача тому чи іншому елементі. Наприклад, на сайті Media Contented використовують фокальні точки за допомогою кнопки «Хочу вчитися» та іконки чату в правому нижньому кутку, а однакові по ширині елементи створюють відчуття єдності.

Композиційні прийоми на веб-дизайні сайту Media Contented. Джерело

Модульні сітки для композиції у веб-дизайні

У веб-дизайні та композиції важливі модульні сітки. По колончастих або блокових сітках можна рівномірно розставити елементи та зображення, створити баланс та ритм оповідання.

Модульні сітки для композиції у веб-дизайні

Дизайн інтер'єрів

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

Правила композиції у дизайні інтер'єрів. Джерело

UX/UI-дизайн

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

Принципи композиції у UX/UI-дизайні. Джерело

Вправи для створення гарної композиції

Щоб створити хорошу композицію, важливо тренувати нагляд і вміти застосовувати цю навичку в дизайні.Коли заходите на який-небудь сайт і вам він подобається, запитайте себе: «Куди мій погляд спрямований зараз? Куди я подивлюсь далі? Чому саме на цій сторінці композиція видається мені вдалою? Які принципи та правила я можу помітити?».

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

Вправа створення композиції. Джерело

Головне про композицію та дизайн

1. Композиція — це структура зображення, малюнка чи дизайну, яка визначає узгоджене та гармонійне розміщення елементів та додає доречних акцентів там, де це важливо для глядача.
2. Основними елементами в композиції є центральний компонент, симетрія і асиметрія, домінанта, ієрархія, використання форми і простору, а також принципи колірних відтінків і візуальної рівноваги.
3. У дизайнах та малюнках автори часто використовують певні техніки побудови композиції та встановлені схеми. Наприклад, золотий перетин чи діаграму Гутенберга.
4. У дизайні принципи створення композиції застосовують практично скрізь. Основні правила побудови композиції можна знайти у графічному дизайні, на веб-сайтах та проектуванні інтерфейсів.
5. Створювати композицію можна, якщо тренувати нагляд і виконувати вправи зі створення невеликих композицій з базових форм.

Контраст у композиції

Буває так, що верстка начебто вийшла: ми дотрималися правила внутрішнього і зовнішнього, дотрималися якірних об'єктів, все модульне, все за правилами.Але не торкається. І виникає питання — як зробити крутіше? До того ж бажано якимись дуже простими засобами. Мій рецепт такий – треба взяти та підвищити контрастність.

Давайте просто побачимо. Ось перед нами студентська робота зі Школи дизайнерів. Ілля Боронніков зробив сторінку про себе:

У десктопній версії є проблеми, можливо, із внутрішнім і зовнішнім, але загалом плюс-мінус щось вдалося. Але сторінка не торкається.

Наступну версію Ілля зробив ось так:

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

🔒 Підпишіться, щоб дивитися лекцію