Когда говорят, что макет «выглядит неаккуратно», обычно имеют в виду нарушенное равновесие: одна часть страницы перевешивает другую, и взгляду не за что зацепиться в нужном порядке. Композиция при этом не вопрос вкуса — её можно разобрать по составляющим и проверить по понятным признакам, не споря о том, кому что нравится.
Что создаёт визуальный вес
Любой элемент на странице «весит» — притягивает внимание сильнее или слабее соседей. Вес складывается из нескольких свойств:
- Размер. Крупный элемент тяжелее мелкого, и разница должна быть заметной: если заголовок больше текста на пару пунктов, читается это как ошибка, а не как иерархия.
- Цвет. Насыщенное пятно перевешивает бледное, тёплое — холодное того же тона.
- Контраст. Тёмное на светлом притягивает взгляд быстрее, чем крупное, но малоконтрастное.
- Плотность. Скопление мелких элементов весит как один крупный, поэтому плотный список способен перетянуть на себя внимание с главного блока.
- Изображение. Фотография почти всегда тяжелее текста того же размера, а фотография с лицом — тяжелее любой другой.
- Положение. Верх и левая часть при чтении слева направо получают внимание раньше, поэтому одинаковые по оформлению блоки всё равно не равны по весу.
Равновесие — это когда суммарный вес по обе стороны от условной оси примерно одинаков. Не поровну по площади, а поровну по притяжению внимания.
Симметрия и её альтернатива
| Приём | Ощущение | Где уместен | Риск |
|---|---|---|---|
| Симметричная композиция | Спокойствие, надёжность | Корпоративные сайты, документы, формы | Выглядит статично, все блоки кажутся равнозначными |
| Асимметричное равновесие | Динамика, современность | Промостраницы, портфолио, медиа | Легко скатиться в беспорядок без сетки |
| Радиальная композиция | Фокус на центре | Первый экран с одним ключевым объектом | Плохо масштабируется на длинную страницу |
| Явное нарушение баланса | Напряжение, акцент | Точечно — там, где нужно удивить | При повторении перестаёт работать |
Асимметрия не означает беспорядок. Крупное изображение слева уравновешивается плотным блоком текста и кнопкой справа: площадь разная, вес сопоставим. Симметрия же не обязана быть зеркальной — достаточно, чтобы блоки были одинаковы по весу и выстроены по общей оси.
Иерархия важнее красоты
На каждом экране должно быть ясно, что главное, что второе и что третье. Обычно это заголовок, поясняющая строка и действие — остальное поддерживает их, а не соревнуется с ними.
Проверка простая: посмотрите на макет прищурившись. Если все элементы кажутся одинаково важными, иерархии нет. Лечится это не добавлением украшений, а разведением по весу: главное увеличить и усилить контраст, второстепенное приглушить, часть элементов убрать совсем. Чаще всего проблема именно в том, что на экране слишком много претендентов на первое место: три кнопки одного размера, четыре одинаковых плашки, заголовок и слоган одного кегля.
Отдельный случай — когда важность на макете не совпадает с важностью для бизнеса. Кнопка обращения оформлена скромнее, чем ссылка на каталог, а цена спрятана в конце. Это не вопрос вкуса, это ошибка постановки задачи, и заметна она только при разговоре о том, что человек должен на странице сделать.
Роль пустого места
Воздух вокруг элемента — самый дешёвый способ сделать его заметным. Причём важен не сам объём отступов, а их разница: если расстояние между заголовком и текстом такое же, как между блоками, группы перестают читаться и страница превращается в сплошной поток.
Отсюда правило, которым мы пользуемся постоянно: связанные элементы ставим ближе друг к другу, чем к соседним группам. Подпись ближе к своей картинке, чем к следующей; поле формы ближе к своей подписи, чем к предыдущему полю. Попытка «уплотнить, чтобы всё влезло на первый экран» почти всегда снижает и читаемость, и число обращений: важное перестаёт выделяться на фоне остального.
Сетка, выравнивание и ритм
Сетка — не эстетическое требование, а способ не принимать одно и то же решение заново на каждом блоке. Когда колонки и отступы заданы, вопрос «на сколько сдвинуть» исчезает, а страница выглядит собранной даже при разном содержимом.
- Всё, что можно выровнять по одной линии, выравниваем: край текста, край картинки, левая граница блоков.
- Отступы берём из ограниченного набора значений, а не подбираем каждый раз на глаз.
- Число разных размеров текста держим небольшим: два-три уровня заголовков и один основной кегль закрывают почти любую страницу.
- Повторяющийся ритм блоков — чередование плотных и разреженных секций — помогает читать длинную страницу и не устать.
Композиция на мобильном
На узком экране всё выстраивается в одну колонку, и горизонтальное равновесие исчезает само. Остаётся вертикальный порядок: что человек увидит первым, вторым, третьим. Поэтому композицию проверяем в двух состояниях, а не только на широком макете.
Типичные потери при переходе в одну колонку: важный блок уезжает под три второстепенных; изображение, которое уравновешивало текст, занимает целый экран и отодвигает содержание; кнопка действия оказывается ниже длинного описания. Всё это правится порядком блоков, но заметить проблему нужно до вёрстки, а не после.
Быстрая проверка композиции
- Прищуриться: читаются ли группы и виден ли главный элемент.
- Перевести макет в чёрно-белый: держится ли иерархия без цвета.
- Перевернуть макет вверх ногами: перекос сразу становится виден, потому что перестаёшь читать текст.
- Посмотреть на телефоне: сохранился ли порядок важности при одной колонке.
- Подставить реальные данные: длинное название, отсутствующую картинку, пустой список, текст вдвое длиннее макетного.
- Спросить у человека со стороны, что он на этом экране сделает первым делом.
Последний пункт даёт больше всего. Если ответ не совпадает с тем, ради чего страница делалась, спор о симметрии можно не начинать — сначала нужно поправить иерархию.
Частые ошибки
- Несколько равнозначных акцентов на одном экране — внимание рассыпается.
- Отступы «по остаточному принципу»: всё лишнее прижато к краям, а середина пустая.
- Декор, который весит больше содержания: крупная иллюстрация рядом с мелким заголовком.
- Выравнивание по центру у длинного текста — рваный левый край читается тяжелее.
- Макет, нарисованный под идеальный текст, который не переживает реального наполнения.
Если страница вызывает ощущение неаккуратности, но непонятно, что именно поправить, обычно помогает разобрать её по весу и иерархии до правки оформления. Мы делаем это в рамках работ по теме проектирование веб-интерфейсов.
