Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

Головна Статті Баланс в веб-дизайні або як повинен виглядати продає сайт

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

Я розповім вам про 5ти методах створення балансу в дизайні сайту. Їх можна використовувати для організації та впорядкування елементів, для створення враження комфорту і простоти орієнтування на сайті. І так, ось ці 5 способів:
  • асиметричний баланс
  • вертикальний Баланс
  • горизонтальний баланс
  • радіальний Баланс
  • симетричний баланс

АСИМЕТРИЧНА і симетрично БАЛАНСИ

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

ЩО КРАЩЕ, СИММЕТРИЯ АБО АСИМЕТРІЯ

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

ВЕРТИКАЛЬНИЙ І ГОРИЗОНТАЛЬНИЙ І БАЛАНСИ

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

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

ЯК ДОДАТИ БАЛАНС НА САЙТ

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor

Приклади з поясненнями

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor
На малюнку вище ще один приклад асиметричного балансу.

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

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

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor
Ось перед вами і приклад вертикального балансу. При порушенні горизонтального балансу, вертикальний все ще буде урівноважений.

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

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor
Приклад поєднання двох балансів - горизонтального і вертикального.

Баланс в веб-дизайні або як повинен виглядати продає сайт, poltor
Один великий об'єкт збалансований трьома маленькими.

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

Оцініть нашу роботу

Схожі статті