Как работает оптический баланс в дизайне / Skillbox Media

Содержание:

• Визуальный вес объектов
• Оптическое выравнивание

Визуальный вес объектов

Визуальный вес — это способность объекта притягивать к себе внимание зрителя. На это влияет много разных вещей. Например, мы неизбежно задерживаем взгляд на детализированных изображениях. А также на тех, которые расположены по центру или обособленно от других — в обширном белом пространстве.

Но если по технике исполнения и композиционному расположению объекты равны, это вовсе не значит, что они будут равнозначны для зрителя. Потому что есть ещё два фактора, влияющие на визуальный вес, — это размер и цвет. И с ними тоже не всё так просто, как кажется.

На визуальный вес влияет ещё и цвет: если взять два одинаковых по размеру объекта, зритель задержит внимание на том, который будет более ярким и более контрастным фону. Но как быть, если объекты изначально разные, а их нужно уравновесить? Для этого дизайнеры используют незначительные изменения оттенков цвета. Посмотрите на следующий пример — здесь для текста взято целых три оттенка серого:

Замечаете разницу цвета текстовых блоков? В глаза бросается более тёмный цвет последней строчки «Укажите ваш e-mail» — это сделано, чтобы поле для ввода не так сильно выделялось, как информация о рассылке. Но если присмотритесь к заголовку и основному тексту на ярком дисплее, то заметите, что абзац текста светлее, чем заголовок.

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

Оптическое выравнивание

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

Давайте посмотрим, как это выглядит. Один из самых очевидных и всем знакомых примеров — значок YouTube:

При взгляде на этот знак никакого ощущения дисгармонии не возникает — кажется, что всё здесь ровно. На самом деле треугольник ощутимо смещён влево относительно центра красной фигуры:

Треугольнику самое место там, где он и стоит: если бы его разместили в геометрической середине, он казался бы зрителю сдвинутым влево. Это связано с тем, что фигура асимметрична относительно вертикальной оси: визуальный вес части треугольника слева гораздо больше, чем вес его кончика справа. Чтобы это компенсировать и добиться оптического баланса, центр треугольника сместили вправо.