Основы композиции в дизайне
Когда макет «не читается», дело редко в шрифте или цвете — обычно проблема в композиции: элементы расставлены без внутренней логики, и взгляд не понимает, куда смотреть в первую очередь. Композиция — это система расположения объектов на экране, которая задаёт порядок восприятия: что заметят за первые полсекунды, что прочитают дальше, а что пропустят вовсе. Разберём четыре рабочих инструмента — баланс, визуальную иерархию, сетку и негативное пространство — на примерах интерфейсов и лендингов, а не на абстрактных схемах, и покажем, как их применять в собственном макете.
Баланс — это не то же самое, что симметрия
Баланс в композиции означает равномерное распределение визуального веса, а не зеркальную симметрию. Крупный тёмный элемент слева можно уравновесить не таким же элементом справа, а группой из нескольких мелких деталей или ярким цветовым пятном — их суммарный «вес» для глаза окажется сопоставим. Классический пример — герой-секция лендинга: фотография занимает 55-60% ширины экрана с одной стороны, а с другой — заголовок, короткий текст и кнопка. Формально это асимметрия, но за счёт контраста цвета кнопки и плотности текста конструкция не заваливается визуально ни в одну сторону.
Симметричный баланс, наоборот, уместен там, где важна предсказуемость и спокойствие: экраны логина, формы оплаты, страницы с юридической информацией. Радиальный баланс — когда элементы расходятся из одной точки — используют реже, обычно в промо-графике или на экранах приветствия, где нужно притянуть взгляд к центру.
Визуальная иерархия управляет тем, что заметят первым
Иерархия строится на пяти инструментах: размер, начертание, цвет, положение на странице и контраст с окружением. На карточке товара в интернет-магазине цена обычно крупнее и жирнее рейтинга, а кнопка «В корзину» — единственный контрастный элемент на нейтральном фоне карточки, поэтому глаз находит её за доли секунды, даже не читая текст.
Для текстовых страниц исследования айтрекинга показывают F-паттерн: пользователь читает первую строку целиком, затем сканирует левый край блока, выхватывая начала абзацев. Для простых экранов с одной целевой кнопкой чаще работает Z-паттерн: взгляд идёт от левого верхнего угла к правому, затем по диагонали к левому нижнему и снова направо — к кнопке действия. Заголовок на 48-64px, подзаголовок на 18-20px и кнопка контрастного цвета — минимальный набор, который выстраивает иерархию без единого лишнего элемента.
Сетка: перестаньте расставлять блоки на глаз
Модульная сетка — это невидимая система колонок и отступов, к которой привязываются все элементы макета. В вебе стандартна 12-колоночная сетка: она делится без остатка на 2, 3, 4 и 6 колонок, поэтому под неё легко проектировать и десктоп, и адаптив. Поверх сетки колонок работает сетка отступов — чаще всего кратная 8px (8, 16, 24, 32, 48): такой шаг проще держать в голове и в дизайн-токенах, чем произвольные значения вроде 13px или 22px.
Практический пример — дашборд с боковой панелью: сайдбар занимает 3 колонки из 12, основной контент — оставшиеся 9, а карточки внутри контента выравниваются по этим же 9 колонкам с одинаковым гаттером между собой. Когда элементы привязаны к сетке, макет выглядит собранным даже без декоративных приёмов — а любое смещение на 3-4px сразу считывается как небрежность, потому что нарушает ритм, который глаз уже считал.
Негативное пространство работает на смысл, а не пропадает впустую
Пустое пространство вокруг элементов — не остаток после вёрстки, а инструмент, который отделяет главное от второстепенного. Макроинтервалы (между блоками секций) и микроинтервалы (между заголовком и текстом, между иконкой и подписью) выполняют разные задачи: первые группируют смысловые блоки, вторые — связывают элементы внутри одной мысли. В плотных интерфейсах, где пространства мало, полезно ориентироваться на долю пустоты 30-40% от площади экрана в ключевых секциях — это ощутимо меняет восприятие «воздуха», даже если контента не становится меньше.
Пустота работает в связке с текстом: интерлиньяж и межбуквенное расстояние формируют собственное «дыхание» внутри абзаца, и без этого баланса даже правильно расставленные по сетке блоки будут выглядеть тяжело — подробнее об этом в статье про основы типографики в дизайне.
Частые ошибки в композиции
Самая частая ошибка — отсутствие явного фокуса: если на экране пять элементов одинакового размера и веса, взгляд не знает, с чего начать, и в итоге не задерживается ни на одном. Вторая — сетка соблюдается «примерно», на глаз, из-за чего отступы плывут на 2-5px между соседними блоками и макет читается неряшливо, даже если автор не может объяснить почему. Третья — компенсация слабой иерархии цветом: вместо того чтобы выстроить порядок через размер и положение, дизайнер красит всё подряд в разные оттенки, и страница превращается в цветовой шум. Если чувствуете, что тянетесь к цвету раньше, чем разобрались с композицией, сначала разберитесь отдельно, как выбрать цветовую палитру — она должна поддерживать уже выстроенную иерархию, а не подменять её собой.
Как быстро прокачать чувство композиции
Композиция — это не врождённый вкус, а навык, который тренируется разбором чужих макетов и повторением одних и тех же приёмов на своих проектах. LearnMe строит для этого персональный план: вводите тему «композиция в дизайне» или «UI-дизайн для начинающих» — и получаете разбитый по дням курс с уроками и тестами по 10-15 минут, без лишней теории и с проверкой понимания на практике. Начните учиться на LearnMe и переведите баланс, иерархию и сетку из абстрактных понятий в рабочие привычки за пару недель.