«Красиво» почти всегда означает «выстроено геометрически»: по сетке, пропорции и ритму. Это работает в журнальной полосе и на веб‑странице, в мобильном приложении и в UX, в анимации и 3D — и даже в планировке собственной квартиры и сада. Разберём, как одна геометрия организует пространство во всех этих областях.
В основе любого макета — невидимая геометрия: модульная сетка расставляет элементы, пропорции (часто золотое сечение) задают приятные соотношения, выравнивание и ритм создают порядок и иерархию. Глаз радуется не случайной красоте, а отношениям и повторению — тому же, что мы видели в золотом сечении (M3) и симметрии (M2). Дизайнер и верстальщик — это, по сути, прикладные геометры визуального пространства.
Модульная сетка, колонки, поля и базовая линия строк. Разворот часто строят по золотому сечению, а ритм заголовков и иллюстраций держит полосу.
12‑колоночные сетки, отступы кратные модулю, пропорции блоков и «воздух». Адаптив — это перестройка той же сетки под ширину экрана.
Сетка из 4/8 px, размеры и зоны касания, выравнивание по краям. Геометрия безопасных отступов и попадания пальцем.
Гештальт (близость, выравнивание), визуальная иерархия, траектории взгляда (паттерны F и Z), фокусные точки — это геометрия внимания.
Во всех четырёх — те же приёмы, что у фотографа и архитектора: сетка вместо хаоса, пропорция вместо «на глаз», выравнивание вместо случайности. Меняется носитель — печать, экран, сенсор — геометрия порядка остаётся.
Motion‑дизайн. Плавность движения задаёт кривая плавности — кубическая кривая Безье, та самая cubic-bezier из CSS. Её форма решает, как объект разгоняется и тормозит; траектории, тайминг и трансформации (поворот, масштаб, сдвиг) — прямое продолжение геометрии для программиста. Ниже — интерактивный редактор такой кривой.
3D‑моделирование. Любая 3D‑модель — это сетка из вершин, рёбер и граней (mesh), собранная из примитивов и преобразованная поворотом, масштабом и сдвигом. Понимание тел, развёрток и проекций (M6) и пространственного мышления (M4) здесь работает напрямую: развёртка UV — это та же развёртка многогранника, а топология модели — про рёбра и грани.
Линейная кривая (по диагонали) — движение с постоянной скоростью, выглядит механически. Пологое начало и крутая середина — это «ease»: естественный разгон и торможение. Если поднять точку выше верхней грани, прогресс перескочит единицу и вернётся — получится отскок. Та же кривая управляет анимацией в вебе, интерфейсах и моушн‑графике.
Планировка квартиры — это работа с планом (вид сверху): расставить мебель, выдержать проходы, прикинуть, что куда влезет. Здесь полезно то же умение читать план и держать масштаб, что у архитектора. Пропорции комнаты, высота картин на уровне глаз, золотое сечение в раскладке мебели и галерейной развеске — всё это делает интерьер соразмерным, а не случайным.
На приусадебном участке геометрия видна ещё нагляднее: дорожки и грядки разбивают по сетке и осям симметрии, клумбы — по окружностям и правильным фигурам, перспектива аллеи ведёт взгляд к акценту, а пропорции зон (газон, посадки, отдых) задают порядок. Регулярный сад — это буквально геометрия на земле; пейзажный — управляемая «случайность» с теми же законами восприятия.
План и масштаб для расстановки мебели, пропорции комнат, развеска по уровню глаз и золотому сечению.
Сетка дорожек и грядок, оси симметрии, круглые клумбы, перспектива аллей, пропорции зон участка.