Самый большой цирк в дизайне

Недавно показывал, как дизайнеры годами неправильно лепят отступы в макетах, и судя по реакции, для многих это было открытием))

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

Смотрите. Мы делаем дизайн для людей, для живых людей, которые смотрят на экран глазами.

А меряем отступы при этом по тому, чего эти люди вообще не видят — по коробочкам, которые существуют только в фигме и в голове у разработчика.

Ну это же абсурд...

У любого текста есть бокс. И в этом боксе сверху есть пустое место, и снизу есть пустое место. Причём у каждого шрифта оно разное. Посмотрите на фотках.

Размер площадки, на которой стоит буква, задаёт шрифтовой художник, когда делает свой шрифт.

И для удобства программистов дизайнеры интерфейсов и веб-дизайнеры берут и считают просто отступы до следующей коробочки.

Но по факту юзеры-то не видят ваши коробочки. Их никто не видит, кроме разработчиков и вас в фигме.

Люди видят видимые границы объектов. У объекта же есть реальные края, в которые можно упереться, и мы считаем по ним.

И получается вот что — вы знаете про принцип близости, но большинство все равно его нарушает и ставит кривые отступы.

Как сделать правильно? Вы измеряете принцип близости на глаз, по видимым краям объектов. У вас получаются дробные и нечётные отступы.

Если вы поставите такие отступы, как 10, 15 или 30 — будьте готовы, что при просмотре вашей фигмы вам за них откажут, даже если всё остальное хорошо. Округлите отступ до таблицы размеров, которая в интерфейсах принята.

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