Композиция в дизайне: правила, виды и приемы
Коротко. Композиция — это расположение элементов в пространстве макета и то, как они взаимодействуют между собой. Она отвечает за две вещи: понятно ли, что здесь главное, и какое настроение вызывает работа. Строится композиция на четырех базовых принципах — контраст, повторение, выравнивание и близость, — а проверяется одним вопросом: видно ли с первого взгляда, куда смотреть.
Почему макет разваливается
Знакомая ситуация: цвета фирменные, шрифт модный, картинки хорошие, а макет все равно выглядит любительски. Иллюстрация перетягивает внимание, заголовок теряется, кнопка висит сама по себе.
Дело почти всегда в композиции. Отдельные элементы могут быть безупречными, но если они не выстроены в систему, глазу не за что зацепиться. Человек не понимает, с чего начать смотреть, и уходит.
Композиция — это то, что превращает набор объектов в цельную работу. Она первична: сначала решается, что где стоит и что важнее, и только потом подбираются цвета и шрифты.
Что такое композиция
Проще всего объяснить через комнату. Есть стены и мебель. Расставьте ее вдоль стен, телевизор напротив дивана — получится ощущение привычного уюта. Поставьте кровать по центру, а стеллаж наискосок — получится совсем другое впечатление. Мебель та же, ощущение разное.
В дизайне то же самое, только вместо мебели заголовки, изображения, кнопки и блоки текста. Одни и те же элементы, расставленные по-разному, дают разное впечатление и разную скорость понимания.
Из этого следуют две задачи композиции:
Функциональная — выстроить иерархию, чтобы человек считывал информацию в нужном порядке.
Эмоциональная — задать настроение: спокойствие, надежность, движение, дерзость.
Обе задачи решаются одними и теми же инструментами.
Четыре базовых принципа
Это то, с чего стоит начинать любому новичку. Четыре принципа объясняют большинство проблем в макетах.
Контраст. Разные элементы должны отличаться заметно, а не чуть-чуть. Заголовок крупнее текста не на два пункта, а в полтора-два раза. Кнопка выделяется цветом однозначно. Робкое различие читается как ошибка, а не как замысел.
Повторение. Одинаковые по смыслу элементы оформляются одинаково по всему макету. Все заголовки одного уровня — одним размером, все карточки — с одинаковым скруглением, все отступы — из одного набора значений. Повторение создает ощущение системы.
Выравнивание. Ничего не стоит случайно. Каждый элемент выровнен по какой-то общей линии с другими. Именно нарушения выравнивания глаз считывает как неряшливость, даже если человек не может объяснить, что не так.
Близость. Связанные по смыслу элементы стоят рядом, несвязанные — на расстоянии. Подпись под фотографией должна быть ближе к ней, чем к следующему абзацу. Иначе появляются ложные связи: человек объединяет то, что объединять не следовало.
Если макет выглядит неопрятно, в девяти случаях из десяти нарушен один из этих четырех принципов.
Законы гештальта: как мозг видит группы
Принцип близости — частный случай более общей истории. Человеческое восприятие устроено так, что мы автоматически объединяем объекты в группы, и дизайнер может этим управлять.
Близость. Объекты, расположенные рядом, воспринимаются как одно целое. Самый сильный из законов: расстояние работает надежнее, чем рамки и линии.
Сходство. Похожие по форме, цвету или размеру элементы читаются как группа, даже если стоят далеко друг от друга. Так работают, например, все ссылки одного цвета.
Замыкание. Мозг достраивает незавершенные формы. Три уголка на белом фоне читаются как прямоугольник. На этом построена половина минималистичных логотипов.
Непрерывность. Взгляд следует вдоль линии и продолжает движение в заданном направлении. Поэтому выровненные по одной оси элементы читаются как последовательность.
Общая судьба. Объекты, движущиеся или направленные одинаково, воспринимаются вместе. В интерфейсах это работает через анимацию.
Фигура и фон. Мы всегда разделяем изображение на объект и фон. Если разделение неочевидно, макет читается тяжело.
Практическая польза простая: чтобы объединить элементы, не обязательно рисовать рамку — достаточно сблизить их и оформить одинаково. Лишние линии и плашки часто появляются именно там, где не хватило работы с расстояниями.
Визуальный вес
Каждый элемент притягивает внимание с разной силой. Это и называют визуальным весом. Он зависит от нескольких факторов:
- Размер — крупное заметнее мелкого
- Тон — темное тяжелее светлого
- Насыщенность — яркое тяжелее приглушенного
- Сложность — детализированный объект тяжелее простого
- Изоляция — элемент, окруженный пустотой, весит больше
- Лицо человека — притягивает внимание сильнее почти любого другого объекта
Отсюда полезный вывод: маленький темный элемент может перетягивать внимание сильнее, чем крупный светлый. Управлять иерархией можно не только размером.
Проверенный прием: посмотрите на макет в черно-белом варианте или сильно прищурившись. Цвет уйдет, останется структура — и сразу станет видно, что притягивает взгляд первым. Если это не то, что должно быть главным, композиция требует правки.
Доминанта и визуальная иерархия
Доминанта — главный элемент, вокруг которого строится все остальное. Она отвечает на вопрос «куда смотреть первым».
Ключевое правило: доминанта должна быть одна, максимум две. Когда каждый элемент кричит, не слышно никого — макет с пятью акцентами воспринимается как шум.
Иерархия строится в три уровня: главное, второстепенное, вспомогательное. Полезное упражнение для новичка — взять готовый макет и схематично перерисовать его серыми прямоугольниками разной плотности, отражающими вес элементов. Сразу станет видно, есть ли структура или все объекты равны.
Как человек читает макет
Композиция строится с учетом того, как движется взгляд.
Слева направо и сверху вниз — базовый порядок для привычной нам письменности. Левый верхний угол просматривается первым.
Диаграмма Гутенберга описывает движение по странице с равномерным контентом: взгляд идет из левого верхнего угла в правый, затем по диагонали в левый нижний и оттуда в правый нижний. Сильные зоны — левый верхний и правый нижний углы, туда логично ставить логотип и целевое действие.
F-паттерн характерен для текстовых страниц: человек прочитывает первые строки, потом сканирует левую часть, цепляясь за начала абзацев. Отсюда правило писать главное в начале строки и абзаца.
Z-паттерн работает на лендингах с малым количеством текста: взгляд идет по верхней линии, затем по диагонали вниз влево и снова вправо. По этой схеме размещают логотип, меню, заголовок и кнопку.
Все три схемы — не законы, а наблюдения. Их полезно держать в голове при первичной расстановке блоков, но проверять все равно нужно на живых людях.
Правило третей и золотое сечение
Два самых известных приема для расстановки объектов.
Правило третей. Макет делится на девять равных частей двумя вертикальными и двумя горизонтальными линиями. Главные объекты ставят на пересечениях этих линий или вдоль них. Композиция получается живее, чем при простом центрировании.
Золотое сечение. Пропорция примерно 1,618 к 1, известная с античности. Ее используют для соотношения блоков, размеров шрифтов и построения спирали, по изгибам которой располагают объекты.
Честное замечание, которое редко встретишь в статьях: практикующие дизайнеры не вычисляют золотое сечение линейкой. Гораздо чаще пропорции строят проще — уменьшая объект в полтора или два раза. Эти правила полезны на старте, чтобы натренировать чувство пропорции, а дальше работают интуитивно.
Композиционный центр против геометрического
Геометрический центр — физическая середина макета. Объект в нем читается первым и создает ощущение стабильности и симметрии.
Композиционный центр — место, вокруг которого строится смысл работы. Он может быть где угодно: в левом верхнем углу, внизу справа, на пересечении третей.
Композиционных центров может быть несколько, геометрический всегда один. Если задача — спокойствие и надежность, главный объект чаще ставят в геометрический центр. Если нужно движение и живость, центр смещают.
Виды композиции
Классифицировать композиции можно по трем осям, и они комбинируются между собой.
Симметричная или асимметричная. Если разделить макет пополам и части уравновешивают друг друга — композиция симметричная. Она транслирует стабильность, порядок, надежность: подходит для клиник, банков, государственных сервисов. Асимметричная дает движение и характер, подходит спортивным брендам и творческим студиям. Важно: асимметрия не означает хаос — части все равно должны быть уравновешены по визуальному весу.
Открытая или закрытая. Если взгляд уходит за пределы макета — композиция открытая. Объект обрезан краем, и хочется увидеть продолжение. Это создает динамику и интригу. В закрытой все элементы находятся внутри, взгляд циркулирует внутри макета — получается ощущение завершенности и спокойствия.
Статичная или динамичная. Статика строится на горизонталях, вертикалях, прямых углах и равномерных расстояниях. Динамика — на диагоналях, наклонах, острых формах и неравномерных интервалах.
Эти оси обычно поддерживают друг друга. Хотите передать надежность — берите симметричную, закрытую и статичную композицию. Нужна энергия — асимметричную, открытую и динамичную.
Модульная сетка
В веб- и полиграфическом дизайне композицию почти всегда строят на сетке — системе вертикальных колонок и горизонтальных линий, по которым выравниваются элементы.
Зачем она нужна: сетка автоматически обеспечивает выравнивание, делает отступы системными, ускоряет работу и позволяет собрать много разных экранов в едином ритме.
Стандартные решения: 12 колонок для десктопа, 6 для планшета, 4 для мобильного. Число 12 удобно тем, что делится на 2, 3, 4 и 6 — можно собирать блоки разной ширины, оставаясь в системе.
Отдельно стоит запомнить про модульную шкалу отступов. Все расстояния в макете берутся из ограниченного набора значений, кратных базовому шагу — обычно 4 или 8 пикселей. Это решает проблему, из-за которой макеты выглядят неаккуратно: когда один отступ 14 пикселей, другой 17, а третий 16, глаз читает разнобой как ошибку.
Воздух и пустое пространство
Свободное место — не пустота, которую нужно чем-то заполнить, а полноценный инструмент.
Что дает воздух: выделяет главное (изолированный элемент весит больше), группирует по смыслу через разные расстояния, создает ощущение дороговизны и спокойствия, дает глазу отдых.
Типичная ошибка новичка — стремление заполнить каждый свободный участок. Обычно макет улучшается не добавлением элементов, а увеличением расстояний между уже имеющимися.
Простое упражнение: возьмите свой макет и увеличьте все внешние отступы в полтора раза. В большинстве случаев станет лучше.
Ритм
Ритм — это чередование элементов и интервалов между ними. Он ведет взгляд по макету и связывает разрозненные части.
Равномерный ритм — одинаковые карточки через одинаковые промежутки — дает спокойствие и порядок, но при избытке становится монотонным. Тогда его нарушают: делают один блок крупнее, меняют интервал, вставляют элемент другой формы. Такое осознанное нарушение работает как акцент.
Частный случай — паттерн, повторяющийся мотив на фоне или в оформлении. Он объединяет макет и работает на узнаваемость бренда.
Ошибки новичков
Все элементы одного веса. Нет доминанты, глаз не знает, за что зацепиться.
Слишком робкий контраст. Заголовок больше текста на пару пунктов — читается как ошибка верстки, а не как иерархия.
Случайные отступы. Значения взяты на глаз, разница между похожими интервалами в несколько процентов. Именно это чаще всего выдает непрофессиональную работу.
Ложные связи. Подпись стоит ближе к чужому блоку, чем к своему, и смысл считывается неверно.
Композиционное напряжение. Элементы стоят «почти рядом» или «почти пересекаются». Должно быть либо явно близко, либо явно далеко.
Боязнь пустоты. Все свободное место заполнено декором, макету нечем дышать.
Центрирование всего подряд. Выравнивание по центру каждого блока лишает макет четких вертикальных осей.
Слишком много доминант. Пять акцентов равны нулю акцентов.
Композиция, не связанная с задачей. Динамичный, дерзкий макет для нотариальной конторы — красиво и мимо цели.
Как тренировать композицию
Перерисовывайте чужие работы. Возьмите понравившийся сайт или плакат и повторите его структуру в редакторе. Не ради копии, а чтобы понять, как расставлены элементы.
Стройте схемы. Отрисуйте макет серыми прямоугольниками разного тона по визуальному весу. Так видна структура без отвлечения на содержание.
Работайте в черно-белом. Соберите макет без цвета. Если композиция работает в сером, с цветом станет только лучше.
Копите референсы. Собирайте не просто красивое, а разное: разберите, за счет чего работает каждый пример.
Ограничивайте себя. Соберите макет из двух шрифтовых размеров и двух цветов. Ограничения быстро учат работать композицией, а не украшательством.
Чек-лист
- Понятно ли с первого взгляда, что главное на макете
- Есть ли три уровня иерархии: главное, второстепенное, вспомогательное
- Все ли элементы выровнены по общим осям
- Взяты ли отступы из единой системы значений
- Нет ли ложных связей между несвязанными элементами
- Нет ли элементов, стоящих «почти рядом» или «почти пересекающихся»
- Работает ли композиция в черно-белом варианте
- Соответствует ли настроение композиции задаче
- Достаточно ли воздуха, не перегружен ли макет
Коротко о главном
Композиция — это расположение элементов и их взаимодействие в пространстве. Она решает две задачи: выстраивает иерархию, чтобы человек понял, куда смотреть, и задает настроение работы.
В основе лежат четыре принципа: контраст, повторение, выравнивание и близость. К ним добавляются законы гештальта, объясняющие, как мозг группирует объекты, и понятие визуального веса, которое показывает, что притягивает внимание сильнее.
Для расстановки объектов существуют приемы вроде правила третей и золотого сечения, а системность обеспечивает модульная сетка с едиными отступами. Виды композиции — симметричная или асимметричная, открытая или закрытая, статичная или динамичная — выбираются под задачу и настроение.
Главная проверка занимает секунду: посмотрите на макет прищурившись и спросите себя, куда падает взгляд первым. Если не туда, куда задумано, дело в композиции.
Композиция — базовый навык, без которого не работают ни цвет, ни типографика. Освоить ее вместе с остальной базой графического и веб-дизайна можно на курсе Pro Design в PROWEB — 6 месяцев, с 14 лет, с практикой и проектами в портфолио. Если вы только выбираете направление, начните с бесплатного IT-теста.
Часто задаваемые вопросы
Что такое композиция в дизайне?
Это расположение элементов в пространстве макета и их взаимодействие между собой. Композиция определяет, в каком порядке человек считывает информацию и какое впечатление производит работа в целом.
Какие основные принципы композиции?
Четыре базовых: контраст (различия должны быть заметными), повторение (однотипные элементы оформляются одинаково), выравнивание (все стоит по общим осям) и близость (связанное по смыслу расположено рядом).
Что такое визуальный вес?
Это сила, с которой элемент притягивает внимание. Зависит от размера, темноты, насыщенности, детализации и количества пустого пространства вокруг. Маленький темный объект может весить больше крупного светлого.
Что такое доминанта?
Главный элемент композиции, к которому взгляд обращается первым. Доминанта должна быть одна или максимум две: когда акцентов много, они обесценивают друг друга и макет превращается в шум.
Как работает правило третей?
Макет делится на девять равных частей двумя вертикальными и двумя горизонтальными линиями, а ключевые объекты размещаются на пересечениях этих линий. Композиция получается динамичнее, чем при простом размещении по центру.
Обязательно ли использовать золотое сечение?
Нет. Пропорция 1,618 к 1 помогает натренировать чувство соотношений, но на практике дизайнеры чаще строят иерархию проще — уменьшая элементы в полтора или два раза. Это дает похожий результат без вычислений.
Чем симметричная композиция отличается от асимметричной?
В симметричной части макета уравновешивают друг друга зеркально, что дает ощущение стабильности и порядка. Асимметричная строится на неравных частях и передает движение и характер, но тоже требует баланса по визуальному весу.
Зачем нужна модульная сетка?
Она задает вертикальные колонки и горизонтальные линии, по которым выравниваются элементы. Это автоматически обеспечивает аккуратность, делает отступы системными и позволяет собирать разные экраны в едином ритме.
Как быстро проверить композицию?
Посмотрите на макет прищурившись или переведите его в черно-белый вариант. Детали уйдут, останется структура — и станет видно, какой элемент притягивает взгляд первым и есть ли вообще иерархия.
