preloader
Вверх

Оптическая компенсация или логика против дизайнера

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

Такой подход кажется начинающим дизайнерам логичным.

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

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

Давайте взглянем на небольшое количество показательных примеров.


Выравнивание + визуальный вес

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

Треугольник внутри иконки выровнен по центру круга, так? Не правильно. Если нарисовать прямоугольник поверх треугольника, то мы увидим, что он не находится по центру.

Иконка слева выглядит выравненной по центру, несмотря на то, что треугольник находится не по центру круга. Тогда как технически выровненная иконка справа выглядит смешенной влево.

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

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

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

Вот еще один пример… Вы должны привыкнуть не ориентироваться лишь на привычные метрики. Пиксели являются лишь ориентиром. Для идеального дизайна вы обязаны ориентироваться на центр масс и визуальную гармонию.

Цвет

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



У иконки и текста слева один и тот же hex код, а у иконки и текста справа — разный.

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


Масштаб

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

Обе фигуры слева 120 × 120 пикселей, поэтому круг кажется меньше. Круг справа 130 × 130 пикселей для компенсации большей площади квадрата


Еще один явный пример. Левая пара иконок одинаковые по высоте и ширине, но нескомпенсированные и потому выглядят негармонично. Правая пара разная по высоте и ширине, но оптически скомпенсированы

Цвет

Обратите внимание, как верх и низ букв шрифта скачет относительно базовой линии

Заглавные буквы

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


Текст, набранный заглавными буквами, кажется намного больше, чем текст с обычным регистром, размер текста снизу был уменьшен на 2 пикселя


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

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

P.S. Сама по себе тема оптической компенсации очень масштабная и заучивать ее как свод правил будет неверным. Данную тему нужно понимать и уметь применять, так как некоторые стандартные правила компенсации работают нестандартно в зависимости от тех или иных условий. Компьютеры и искусственные интеллекты еще очень долго не смогут понять контекст отдельно взятого куска дизайна, и поэтому они не могут внести те изменения, которые могут внести дизайнеры. Мы должны полагаться на наши глаза и восприятие при работе над дизайном.

Автор оригинала: Luke Jones