Правило близости и ещё три принципа, которые чинят любой макет

Человек открывает свой макет и чувствует: что-то не так. Шрифт вроде приличный, цвета взяты из палитры, а выглядит неряшливо. Почти всегда дело не в шрифте и не в цвете, а в четырёх правилах, которые действуют раньше всякой красоты.

Близость: что рядом — то вместе

Суть правила близости в одной фразе: расстояние означает связь. Элементы, стоящие рядом, читаются как одно целое; между разными группами расстояние должно быть заметно больше, чем внутри группы.

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

Проверка занимает секунду. Прищурьтесь и посмотрите на макет как на набор серых пятен. Если пятна совпадают со смысловыми блоками — близость соблюдена. Если всё слилось в одно поле — нет.

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

Выравнивание: невидимые линии

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

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

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

Контраст: или явно, или никак

Если два элемента различаются — они должны различаться сильно. Заголовок в 17 пунктов рядом с текстом в 16 выглядит не как заголовок, а как ошибка вёрстки. Разница должна читаться мгновенно: 16 и 28, обычный и жирный, тёмный и светлый.

Робкий контраст — главный признак неуверенного макета. Смелый контраст — то, из-за чего страница выглядит спроектированной, а не набранной.

Повтор: одно решение на всю работу

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

Обратная сторона: каждое новое исключение стоит дорого. Второй радиус и третий оттенок серого никто не заметит по отдельности, но вместе они и создают ощущение «сделано наспех».

С чего начинать проверку

Если макет не нравится, а причина не ясна, идите по порядку: сначала близость (сгруппировано ли по смыслу), потом выравнивание (сколько осей), потом контраст (различается ли различное), потом повтор (сколько решений одной задачи). До цвета и шрифта дело обычно не доходит — проблема решается на первых двух шагах.

Где посмотреть на живых примерах

Читать про близость бесполезно, её надо увидеть. В курсе «Основы дизайна» задания сделаны живыми макетами: отступы двигаются ползунками прямо в браузере, и разница видна сразу. Первые уроки открыты без регистрации — выравнивание: невидимые линии и близость: что рядом, то вместе.

Дизайн хорошо ложится рядом с вёрсткой: одно объясняет, почему так должно выглядеть, другое — как это сделать. Готовые связки курсов собраны в программах обучения.