Найти в Дзене
Купцова Дарья

Оптическая геометрия: почему «ровно» не значит «смотрится ровно»

Мы привыкли равнять по пикселям — а глаз равняет по массе. Отсюда «дрожащие» кнопки, перекошенные иконки и заголовки, которые будто падают вправо. Ниже — как чинить это глазами, а не только линейкой. Оптический центр против математического
Круг и квадрат одинакового размера кажутся разными по весу. Если поставить иконку-«пузатик» или с острым краем точно по центру кнопки, она визуально съедет. Делайте микросдвиг вверх на 1–2 px и проверяйте на близком масштабе — «дышит» ли композиция. Иконка ≈ строка
Лайн-иконки часто тоньше текста. На одном базлайне такой дуэт выглядит изломанным: буквы тяжелят, пиктограмма меркнет. Решение — подтянуть штрих иконки до видимой массы шрифта (или наоборот: на полтона приглушить текст). Силуэт важнее формальной толщины. Радиусы и «угловая интонация»
Если в карточке одни углы 8, другие 10, а третьи — «на глаз», ритм ломается. Возьмите один модуль радиуса и применяйте оптическую компенсацию там, где форма кажется более «круглой», чем есть на самом дел

Мы привыкли равнять по пикселям — а глаз равняет по массе. Отсюда «дрожащие» кнопки, перекошенные иконки и заголовки, которые будто падают вправо. Ниже — как чинить это глазами, а не только линейкой.

Оптический центр против математического
Круг и квадрат одинакового размера кажутся разными по весу. Если поставить иконку-«пузатик» или с острым краем точно по центру кнопки, она визуально съедет. Делайте микросдвиг вверх на 1–2 px и проверяйте на близком масштабе — «дышит» ли композиция.

-2

Иконка ≈ строка
Лайн-иконки часто тоньше текста. На одном базлайне такой дуэт выглядит изломанным: буквы тяжелят, пиктограмма меркнет. Решение — подтянуть штрих иконки до видимой массы шрифта (или наоборот: на полтона приглушить текст). Силуэт важнее формальной толщины.

-3

Радиусы и «угловая интонация»
Если в карточке одни углы 8, другие 10, а третьи — «на глаз», ритм ломается. Возьмите один модуль радиуса и применяйте оптическую компенсацию там, где форма кажется более «круглой», чем есть на самом деле (у вытянутых кнопок радиус можно сделать на шаг меньше).

-4

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

-5

Цвет и интервалы
Черный на 100% тяжело читать. Чуть теплее темно-серый делает фон мягче, но главное — соподчините насыщенности: акцентный цвет пусть будет один, фон холодного оттенка а текст теплого (или наоборот). Тогда кнопка не спорит с заголовком, а направляет взгляд.

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

-6

Так же приглашаю вас в мой Telegram-канал «Одна кавычка»: о коммуникационном дизайне, трендах и кейсах. Там я выпускаю новенькое каждый день.

-7

И последнее: любой визуальный образ должен считываться вашей аудиторией и не упираться в штампы — «счастливые стоковые лица», дудловские скетчи, руки Микеланджело, белые фоны и прочие клише убивают доверие к макету. Берегите себя и авторские права.

-8