7 оптических иллюзий, о которых должен знать каждый дизайнер

Почему идеальная геометрия совсем не выглядит идеально?

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

В статье собраны самые эффективные приемы, которые помогут вывести ваши логотипы и графику на новый уровень. Но только если вам достаточно хорошо заплатили за дополнительные усилия! 😉

1. Свисание (overshoot)

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

У нас их два — сверху и снизу. Насколько большими они должны быть? Это зависит от контекста, но в шрифтовом дизайне свисание обычно составляет 1–3%, из-за чего заглавная буква O становится на 2–6% выше, чем H.

Тот же принцип действует и для треугольников. У нас есть плоское основание, которое не требует свисания и вершина с большим количеством негативного пространства (даже больше, чем у окружностей), где необходимо значительное свисание. Возьмите 5% высоты прямоугольника в качестве отправной точки, а затем подберите лучшее значение на глаз. Если вершина обрезана (как верхняя часть буквы A в большинстве шрифтов), размер свисания пропорционально уменьшается.

2. Вертикальные vs горизонтальные штрихи

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

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

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

3. Ломаное соединение кривых

Когда два полукруга (или кривые с похожей динамикой) соединяются, образуя S-образную форму, стык выглядит ломаным и должен быть сглажен. Точка, где соединяются кривые, называется «точкой перегиба» — здесь движение по часовой стрелке сменяется движением против часовой стрелки.

Чтобы устранить эту проблему, обычно приходится корректировать всю кривую, а не только сегменты вокруг перегиба. В этом случае мы имеем дело с так называемым «качеством кривой» — этот термин описывает ее воспринимаемую плавность. Это еще один пример того, что модульные объекты не выглядят естественными.

4. Эффект костей

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

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

5. «Затемнение» острых соединений

Когда две линии (прямые или изогнутые) пересекаются под острым углом, соединение выглядит более массивным. Чем острее угол — тем больше это «затемнение». Чтобы его устранить, необходимо отсечь внешнюю вершину. Интенсивность, форма и угол этого среза могут быть разными, и мы не будем рассматривать их здесь, поскольку это скорее стилистический выбор, чем оптическая коррекция.

Оптическая коррекция, которая нас интересует, — уменьшение ширины входящих лучей в месте соединения. Крайняя форма такого уменьшения в шрифтовом дизайне называется «чернильной ловушкой» — это специальные выемки в стыках штрихов.

6. Баланс

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

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

7. Пересечение толстой и тонкой линий

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

Яркий пример в шрифтовом дизайне — буква X. Любопытно, что одноименная социальная сеть не слишком заботится о том, чтобы ее лого выглядел оптически корректно, хотя многие люди указывали на эту проблему.

Спасибо за внимание!