Робота з візуальною вагою у вашому дизайні
У дизайні візуальна вага - це поняття, що елементи дизайну мають різну вагу; тобто деякі об’єкти, навіть на двовимірному середовищі, можуть здаватися важчими за інші. Візуальна вага - це потужна концепція, яка дозволяє нам створити візуальну ієрархію, симетрію, баланс і гармонію в дизайні. Застосовуючи стратегічно, концепція візуальної ваги може допомогти нам спрямувати увагу глядача на місця, які ми хочемо в дизайні. Ця стаття висвітлює поняття зорової ваги та фактори, що впливають на неї. Вибір кольору для елементів вашого сайту несе в собі більше науки, ніж просто використання генератора випадкових кольорів.
Що таке візуальна вага?
Візуальна вага обертається навколо думки, що різні елементи дизайну мають різну важкість по відношенню один до одного. Іноді візуальна вага очевидна, наприклад у випадку, коли більші предмети виглядають важче менших, оскільки вони займають більше місця. У деяких випадках він не такий нарізаний і сухий, як у випадку з кольором. Деякі кольори можуть виглядати так, ніби вони важчі та домінантніші за інші. Наприклад, на білому тлі порівняйте чистий чорний із світло-блакитним дитячим кольором: інстинктивно, який із вас здається візуально важчим?
Основними візуальними вагомими факторами, які ми обговоримо, є:
- Колір
- Контраст
- Легкість/темрява
- Розмір
- Щільність
- Складність
Зорова вага сильно пов’язана з симетрією. Щоб домогтися симетрії та збалансованості дизайну, ми хочемо зробити так, щоб об’єкти здавались рівними за візуальною вагою.
Щоб привернути увагу до певних об’єктів (або деемфазувати інші), ми хочемо навмисно скинути рівновагу та створити візуальну ієрархію, щоб фокус змістився в областях, які ми маємо намір.
Давайте розглянемо деякі основні фактори, що впливають на зорову вагу.
Колір
Колір - це велика частина дизайну, і навіть у звичайних чорних, білих чи сірих дизайнах відсутність кольору робить це твердженням саме по собі. Колір має багато властивостей, які можуть впливати на візуальну вагу об’єкта щодо інших в дизайні, такі як насиченість, яскравість/темрява та відтінок.
Більшість того, що ми можемо зрозуміти щодо ваги кольору, є правдою; здається інстинктивним знати, що один колір важчий за інший. Наприклад, більш насичені кольори привернуть більше уваги, ніж ненасичені кольори. Темні кольори також займають більшу позицію, ніж їх світліші колеги, на світлому фоні.
Відтінок - це кольорова властивість, яку психологи лише недавно починають усвідомлювати, що має різну візуальну вагу. Навіть при повній насиченості та однаковій легкості два кольори, наприклад, червоний та синій (показані на зображенні вище), можуть мати різну візуальну вагу. Однак червоний та синій, згідно з дослідженнями, обговореними у статті Чи важить червоний більше синього, дуже близькі за візуальною вагою, і дослідження різнились щодо того, який насправді важчий.
Проте, крім відтінку, є кілька властивостей кольору, які є набагато більш очевидними з точки зору їх впливу на зорову вагу. Наприклад, червоний колір важчий і приверне більше уваги, ніж жовтий або оранжевий при низькій насиченості. У наведеному нижче прикладі ми можемо побачити, як ми могли збалансувати візуальну вагу елементів, використовуючи інші фактори, такі як візуальна складність та розмір. Червона форма серця зліва має набагато більшу вагу, оскільки вона більша, а її колір більш яскравий. Щоб спробувати збалансувати шматок, ми можемо розмістити кілька об’єктів, щоб створити область, яка має більше візуальної складності.