Визуальный вес в дизайне сайта

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

Что такое визуальный вес?

Визуальный вес опирается на идею, что отдельные элементы в дизайне  имеют различную тяжесть по отношению друг к другу. Иногда визуальный вес просто определить, например, в случае, когда большой объект кажется тяжелее, чем маленький, потому что занимает больше места. В некоторых обстоятельствах такой вывод сделать весьма не просто, особенно, если вопрос касается цвета. Некоторые цвета могут выглядеть более тяжело и доминируют над другими. Например, сравните на белом фоне два одинаковых прямоугольника, один из которых имеет черный цвет, а другой - светло голубой. Какой из них кажется тяжелее?

Основные факторы  визуального веса, которые мы будем обсуждать:

• Цвет
• Контраст
• Яркость
• Размер
• Плотность
• Сложность

Визуальный вес очень сильно связан с симметрией. Для симметричного и сбалансированного дизайна мы будем делать объекты равными по визуальному весу.

Для привлечения внимания к определенному объекту (или для вывода его из зоны внимания) мы будем намеренно смещать баланс и создавать иерархию таким образом, чтобы фокус смещался в нужные области.

Теперь рассмотрим основные факторы, которые влияют на визуальный вес.

Цвет

Цвет является большой частью дизайна, даже в случае черно/белого или серых вариантов.  Даже отсутствие цвета значимо само по себе. Цвет имеет много свойств, которые могут влиять на визуальный вес объекта по отношению к другим элементам дизайна. Основные свойства - это насыщенность, яркость и оттенок.

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

Оттенок является свойством цвета, который лишь недавно стал рассматриваться в психологии как характеристика визуального веса. Даже при одинаковой насыщенности и яркости два цвета (например, синий и красный, как на рисунке выше) могут иметь различный визуальный вес.

Рассмотрим ниже приведенный пример. Красный цвет более тяжелый и привлекает больше внимания, чем желтый, оранжевый или зеленый с низкой насыщенностью. Для балансировки элементов мы используем другие факторы - сложность и размер. В противовес большому тяжелому красному сердцу мы разместили несколько объектов, чтобы создать область с большой сложностью.

Ниже приводится список цветов, который ранжирован по весу:

1. Красный (самый тяжелый)
2. Голубой
3. Зеленый
4. Оранжевый
5. Желтый (самый легкий)

Контраст

Контраст помогает выделить в дизайне один элемент на фоне остальных. Элементы с большим контрастом по отношению к фону привлекают больше внимания. Используя контраст можно выстраивать визуальную иерархию и удобство распознавания и чтения.

На примере, приведенном ниже, левое изображение привлекает больше внимания и обладает большим визуальным весом, чем правое изображение.

Чтобы установить визуальный баланс и сделать обе части равновесными в рамках понятия визуального веса, мы можем использовать другие факторы, такие как цвет, размер, сложность и так далее.

Яркость

Более темные цвета имеют больший визуальный вес, чем светлые.  Яркость является мощным инструментом для балансирования дизайна.

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

Размер

Размер является очевидным фактором визуального веса, так как в физическом мире объект большего размера занимает больше места и, как правило, является более тяжелым.

Что можно сделать для балансирования визуальных весов в случае использования различных размеров? Можно противопоставить элементу с большим размером несколько маленьких элементов с более тяжелым цветом и/или контрастом, например.  Если объект должен находиться в фокусе внимания в дизайне, то придание ему большого размера является хорошим решением. Поэтому мы часто видим огромные кнопки, призывающие к действию, которые являются просто великанами среди окружающих их элементов. Таким образом пытаются привлечь внимание пользователя, чтобы увеличить коэффициент конвертации.

Пропорции и плотность

В физическом мире высокая плотность (или более компактное расположение) объектов весит больше. Мы можем использовать данную концепцию в графическом представлении, оставляя меньше свободного места между элементами.

Обратите внимание, что дополнительное пространство в наборе элементов делает область более легкой в терминах визуального веса. Но в тоже время, такое расположение пустого пространства и элементов привлекает внимание, так как получается контрастная картина.

Сложность

Большая сложность объектов или форм выглядит более тяжелой по сравнению с простыми вариантами. Простой объект, как в правой части рисунка ниже, может быть воспринят и распознан практически мгновенно. В тоже время элемент из левой части рисунка требует больше времени на обработку. А так как элемент получает больше времени на обработку, то мы вынуждены смотреть на него дольше, и, следовательно, уделяем ему больше внимания.

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

Заключение

Визуальный вес - это концепция, которая значительно полагается на инстинкты дизайнера. Она очень сильно подвержена влиянию физического мира, где вес выражается размером и плотностью, а цвет вызывает эмоциональный отклик (часто основанный на культурных факторах). Построение визуальной иерархии, симметрии и гармонии в дизайне на использовании факторов визуального веса в сочетании между собой.

• Комментарии