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

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

Баланс фізичний і візуальний

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

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

Гойдалки в симетричному рівновазі

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

Але якби одна людина була набагато важче, рівновагу б зникло.

відсутність рівноваги

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

Але якщо пересунути більшу фігуру в центр дошки, картинка придбає більш правдоподібний вигляд:

Гойдалки в асиметричному рівновазі

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

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

1. Візуальна маса - це сприймається маса візуального елемента, міра того, наскільки даний елемент сторінки привертає увагу.

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

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

Чому візуальне рівновагу важливо?

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

З точки зору маркетингу, візуальна маса - це міра візуального інтересу, який викликає будь-яка область або елемент сторінки. Коли Лендінгем візуально збалансований, кожна його частина викликає певний інтерес, а збалансований дизайн утримує увагу глядача.

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

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

Чотири типу рівноваги

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

1. Симетричне рівновагу

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

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

2. Асиметрична рівновагу

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

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

3. Радіальне рівновагу

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

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

4. Мозаїчне рівновагу

Мозаїчне рівновагу (або кристалографічна баланс) - це збалансований хаос, як на картинах Джексона Поллока. У такій композиції немає виражених фокальних точок, і всі елементи однаково важливі. Відсутність ієрархії, на перший погляд, створює візуальний шум, але, тим не менше, якимось чином все елементи поєднуються і утворюють єдине ціле.

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

І симетрія, і асиметрія може застосовуватися в композиції незалежно від того, який тип її рівноваги: ​​ви можете використовувати об'єкти симетричної форми для створення асиметричної композиції, і навпаки.

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

симетрія

Дзеркальна симетрія (або двостороння симетрія) виникає, коли дві половини композиції, розташовані по різні боки від центральної осі, є дзеркальними відображеннями один одного. Швидше за все, почувши слово «симетрія», ви уявляєте собі саме це.

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

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

Кругова симетрія (або радіальна симетрія) виникає, коли об'єкти розташовуються навколо загального центру. Їх кількість і кут, під яким вони розташовані відносно центру, можуть бути будь-якими - симетрія зберігається, поки присутній загальний центр. Природні форми, що ростуть або рухомі перпендикулярно поверхні землі, відрізняються круговою симетрією - наприклад, пелюстки соняшника. Чергування без відображення може бути використано, щоб продемонструвати мотивацію, швидкість або динамічна дія: уявіть крутяться колеса автомобіля, що рухається.

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

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

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

асиметрія

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

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

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

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

Принципи гештальт-психології

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

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

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

Приклади різних підходів до веб-дизайну

Настав час реальних прикладів. Лендінзі, представлені нижче, згруповані за чотирма типами рівноваги. Можливо, ви сприйміть дизайн цих сторінок по-іншому, і це добре: критичне мислення важливіше, ніж беззастережне прийняття.

Приклади симетричного рівноваги

Дизайн сайту Helen & Hard симетричний. Сторінка «Про нас» на скріншоті знизу і всі інші сторінки цього сайту збалансовані схожим чином:

Скріншот сторінки «Про нас» сайту Helen & Hard

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

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

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

Домашня сторінка Tilde - ще один приклад дизайну з симетричним рівновагою. Як і на Helen & Hard, все розташовується навколо вертикальної осі, що проходить по центру сторінки: навігація, текст, люди на фотографіях.

Скріншот домашньої сторінки Tilde

Як і у випадку з Helen & Hard, симетрія не ідеальна: по-перше, центровані рядки тексту не можуть бути відображенням фотографії знизу, а по-друге, пара елементів вибивається із загального ряду - стрілка «Meet the Team» вказує вправо, і текст внизу сторінки закінчується ще однією стрілкою вправо. Обидві стрілки є закликами до дії і обидві порушують симетрію, привертаючи до себе додаткову увагу. Крім того, за кольором обидві стрілки контрастують з фоном, що теж притягує погляд.

Приклади асиметричного рівноваги

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

Скріншот веб-сайту Carrie Voldengen

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

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

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

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

Скріншот Hirondelle USA

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

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

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

Приклади радіального рівноваги

Домашня сторінка Vlog.it демонструє радіальне рівновагу, що помітно на скріншоті. Все, крім об'єкта в правому верхньому куті, організовано навколо центру, і три кільця зображень обертаються навколо центрального кола.

Скріншот домашньої сторінки Vlog.it

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

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

На головній сторінці Opera's Shiny Demos немає кіл, але все текстові посилання розходяться із загального центру, і легко уявити, як вся ця конструкція обертається навколо одного з центральних квадратів або, може бути, одного з кутів:

Скріншот домашньої сторінки Opera's Shiny Demos

Назва Shiny Demos в лівому верхньому кутку і логотип Opera в правому нижньому - врівноважують один одного і теж ніби виходять з того ж центру, що і текстові посилання.

Це хороший приклад того, що для досягнення радіального рівноваги не обов'язково використовувати кола.

Приклади музичного рівноваги

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

Яскравий приклад - домашня сторінка Rabbit's Tale. Розкидані по екрану букви виразно створюють відчуття хаосу, але композиційне рівновагу присутній.

Скріншот домашньої сторінки Rabbit's Tale

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

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

Сайти з великою кількістю контенту, наприклад, новинні портали або сайти журналів, теж демонструють мозаїчне рівновагу. Ось скріншот домашньої сторінки The Onion:

Скріншот домашньої сторінки The Onion

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

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

Можна порахувати цей приклад музичного рівноваги притягнутим за вуха, але багато сайтів організовують свій контент подібним чином. Хоча, напевно, в основному безлад НЕ спланований спеціально.

Висновок

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

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

Високих вам конверсій!

За матеріалами: smashingmagazine.com . image source dmcwa

11-11-2015