Школа
Вёрстка

Кнопка «на сайт» и рамка с телефоном одинаковы по высоте, но почему‑то появляется иллюзия, что они отличаются. Почему это происходит, и как от этого избавиться?

Никита Половец
19 мая 2021
👁 7207   🗩2
Вёрстка

Кнопка «на сайт» и рамка с телефоном одинаковы по высоте, но почему‑то появляется иллюзия, что они отличаются. Почему это происходит, и как от этого избавиться?

Никита Половец
19 мая 2021
👁 7207   🗩2
Михаил Нозик
Арт‑директор и автор курса «Типографика и вёрстка»
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать

Никита!

Просто так устроено человеческое зрение: в некоторых ситуациях и сочетаниях мы видим не совсем то, что реально происходит. «Иллюзии», как вы их называете, могут возникать в связи с цветом или формой. Примеры:

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

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

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

Чтобы больше узнать про человеческое восприятие цвета, рекомендую книгу Иоганесса Иттена «Искусство цвета»

Дизайнер знает и использует особенности человеческого зрения в своей работе: где надо, компенсирует иллюзии, а где‑то — наоборот усиливает или создаёт их.

Чтобы больше узнать про человеческое восприятие цвета, рекомендую книгу Иоганесса Иттена «Искусство цвета»

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

См. также совет Кости Мозгового о компенсации в интерфейсе Айфона.

Типографика в вебеНоситель: сайтФормат: иллюстрацияСинтаксис элементов интерфейса
Полезно
Непонятно
Войдите в Бюросферу, чтобы голосовать
Отправить
Поделиться
Поделиться
Запинить
Твитнуть

Комментариев пока нет

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

Рекомендуем другие советы