Подпишитесь на нас в соц. сетях или свяжитесь с нами любым удобным способом

Наша армия дизайнеров работает не покладая мышек, чтоб вы увидели ее скорее!

Страница еще в разработке

9 видов композиции в дизайне с примерами

Узнайте, какие виды композиции используются в графическом, веб- и digital-дизайне, чем они отличаются друг от друга и как помогают создавать гармоничные, понятные и визуально привлекательные макеты.

Виды композиции в дизайне

Существует несколько основных видов композиции в дизайне.

В дизайне (графическом, веб, предметном) композицию классифицируют по нескольким основным признакам. Вот основные признаки и виды:

1. Фронтальная или плоская композиция

Все элементы расположены в одной плоскости (как лист бумаги или экран), зритель смотрит прямо на них. Нет глубины, нет ухода вдаль.

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

Вы смотрите на макет прямо, как на стену. Объекты могут перекрывать друг друга, но между ними нет «воздуха» и глубины — всё лежит как бы на одной поверхности.

Источник: pinterest.com/izuizuwU

Три главных признака фронтальной композиции

Отсутствие иллюзии глубины — вы не можете определить, что ближе, а что дальше, если только объекты не перекрыты (перекрытие даёт слабый намёк на глубину, но в чистой фронтальной композиции его избегают или делают плоским).
Плоские формы — элементы воспринимаются как силуэты, пятна, линии, прямоугольники текста. Их объём (если он есть) не играет роли.
Взгляд движется по плоскости — вверх-вниз, влево-вправо, но не «внутрь» макета.

Связь с другими видами комопозиций

Фронтальная композиция — база. Как только вы освоите её, вы легко перейдёте к объёмной (добавив тени и перспективу) и к динамичной (добавив диагонали и наклон). Но начинать нужно именно с неё.

Итоговая формула:
Фронтальная = плоские пятна + сетка + иерархия + поля. Всё остальное — украшения.

📘Упражнение для закрепления:

За 5 минут: возьмите старый журнал или распечатку, вырежьте 5–7 разных по размеру прямоугольников (фото, заголовки, текстовые блоки).

На чистом листе А4 разложите их как аппликацию, соблюдая:

поля не менее 1 см со всех сторон;
один прямоугольник самый большой (акцент);
никакой прямоугольник не должен торчать за край;
используйте асимметричный баланс.
Наклейте получившуюся композицию. Сделайте 3 разных варианта. Через неделю вы начнёте видеть фронтальную композицию в каждом посте Instagram и в каждом слайде презентации.

2. Объёмная композиция

Есть иллюзия глубины: одни элементы кажутся ближе, другие — дальше. Создаётся с помощью перспективы, наложения объектов, изменения масштаба, размытия фона (боке), теней.

Объёмная (или глубинно-пространственная) композиция — это когда у макета появляется третье измерение. Одни элементы кажутся ближе к зрителю, другие — дальше. Возникает иллюзия глубины, перспективы, «воздуха» между объектами.
Вы как будто смотрите не на плоский лист, а в окно или на сцену: есть передний план, средний и задний. Именно так устроено кино, фотография, 3D-графика и многие постеры.
Главное отличие от фронтальной композиции:

Фронтальная — всё на одной плоскости, как аппликация.
Объёмная — есть глубина, слои, удаление.

Автор: combine studio

Источник: pinterest.com/ayushisaria

Автор: Redis Agency

Источник: pinterest.com/studiomishta

Источник: pinterest.com

Источник: pinterest.com/thebulletkings

Источник: pinterest.com/ageelmusaev

Как возникает иллюзия объёма? Шесть инструментов

Новичку не нужно учиться рисовать перспективу от руки. Достаточно освоить эти шесть приёмов — они создают объём почти автоматически.

1. Масштаб (размер)

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

2. Перекрытие (оверлап)

Один объект частично закрывает другой. Тот, который сверху (и не закрыт), воспринимается ближе. Тот, который частично спрятан, — дальше.

Пример: Текст, наложенный на фотографию, но с небольшим отступом и тенью — текст «вылетает» вперёд. Фотография становится фоном.

Правило: Перекрытие — самый сильный и простой способ показать глубину. Даже без изменения размера.

3. Цвет и контрастность

Ближние объекты обычно ярче, насыщеннее и контрастнее. Дальние — бледнее, размытее, с меньшим контрастом (воздушная перспектива).

Пример: На плакате фигура человека на переднем плане — чёткая, цветная. Горы на заднем плане — голубовато-серые, почти сливаются с небом.

Совет: Чтобы «отодвинуть» объект, снизьте его насыщенность, добавьте белого или серого в цвет, уменьшите контраст между ним и фоном.

4. Фокус и размытие (боке)

Резкий объект кажется ближе. Размытый — дальше. Это пришло из фотографии, но отлично работает в дизайне.

Пример: На лендинге парфюма: флакон духов чёткий, резкий. Фон — размытый город или цветы. Объём возникает моментально.

Как сделать в дизайне: В Figma, Photoshop или Canva есть фильтры размытия (Gaussian blur). Размойте задний план слегка (например, на 5–10 px), передний оставьте резким.

5. Тени и свет

Падающая тень от объекта «отрывает» его от фона и создаёт глубину. Светлые блики на переднем плане тоже работают.

Типы теней для объёма:

Drop shadow — тень, падающая на фон. Чем больше размытие и смещение, тем «выше» объект.
Inner shadow — тень внутри объекта, создаёт углубление.
Длинная тень (long shadow) — добавляет драматизма и глубины в плоские иконки.

Совет новичку: Не делайте тень чёрной с 100% непрозрачностью. Используйте тёмный оттенок основного цвета, непрозрачность 20–40%, размытие 8–16 px, смещение 4–8 px.

6. Перспектива (линейная и тональная)

Линейная перспектива — параллельные линии сходятся в одной точке на горизонте. Тональная перспектива — ближние объекты тёмнее и контрастнее, дальние светлее и бледнее.
Для новичка: Настоящую перспективу рисовать сложно. Но в дизайне вы можете использовать готовые перспективные сетки (в Figma есть плагины) или просто наклонять и трансформировать элементы так, чтобы они «уходили» в точку схода.

📘 Упражнение:

1. Три круга — три плана

Возьмите белый лист бумаги.
Нарисуйте и вырежьте три круга разного диаметра: 5 см, 3 см, 1 см.
Положите самый большой круг в центр — это передний план.
Положите средний круг так, чтобы он частично перекрывался большим и уходил вбок/вверх — это средний план.
Маленький круг положите далеко в углу, очень маленьким — это задний план.
Добавьте тени: под большим кругом — тёмное пятно, под средним — меньше, под маленьким — едва заметное.
Сфотографируйте. Вы только что создали объёмную композицию из трёх кругов.

3. Глубинно-пространственная композиция

Глубинно-пространственная композиция — это организация элементов, при которой создаётся иллюзия глубокого пространства, уходящего вдаль. В отличие от просто объёмной композиции (где отдельные объекты выглядят трёхмерными), здесь зритель может мысленно «войти» внутрь макета: есть чётко выраженные передний, средний и дальний планы, часто с перспективой и воздушной дымкой.
Примеры: фотография горной дороги, уходящей к горизонту; интерьер комнаты с анфиладой дверей; космическая сцена с планетой на переднем плане и звёздами в бесконечности; постер к фильму, где герой стоит на переднем плане, а за ним простирается город.

Главное отличие от объёмной композиции:

Объёмная — объект «выпирает» из плоскости (шар, куб, человек с тенью).
Глубинно-пространственная — есть даль, расстояние, уход в глубину, часто с перспективой и несколькими планами.

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Чёткое деление на планы	Минимум три плана: передний (крупно, резко), средний (поменьше, чуть размыто), дальний (мелко, бледно, размыто).
Линейная перспектива	Параллельные линии (дорога, рельсы, коридор) сходятся в одной точке на горизонте.
Воздушная (тональная) перспектива	Дальние объекты светлее, менее контрастны, с голубоватым или сероватым оттенком. Передние — тёмные, насыщенные, контрастные.
Масштабное сокращение	Одинаковые объекты (деревья, окна, люди) уменьшаются по мере удаления.
Наложение (перекрытие)	Передний план загораживает часть среднего, средний — часть дальнего.
Размытие (боке) в глубину	Дальний план может быть сильно размыт, имитируя фокус камеры.
Горизонт и точка схода	В макете есть линия горизонта, куда «уходит» пространство.

Как строить глубинно-пространственную композицию

Определите линию горизонта. Это уровень, где земля встречается с небом (или дальняя стена с полом). На рисунке — горизонтальная линия, обычно чуть ниже или выше середины.
Наметьте точку схода (одну или две). Для простоты — одну в центре горизонта. Все линии, уходящие вдаль (дороги, ряды колонн, края тротуара), должны сходиться в этой точке.
Разделите пространство на три плана:

Передний — крупные объекты, резкие, тёмные, насыщенные. Занимает 15–30% высоты макета.
Средний — объекты среднего размера, чёткие, но уже с меньшим контрастом.
Дальний — мелкие объекты, размытые, светлые, низкая насыщенность. Уходит в точку схода.

Используйте масштаб. Один и тот же объект (например, дерево) на переднем плане пусть будет в 5–10 раз крупнее, чем на дальнем.
Добавьте воздушную перспективу. Дальний план сделайте светлее и с голубоватым оттенком (имитация атмосферы). Передний — тёмным и тёплым.
Создайте перекрытия. Пусть объект переднего плана немного загораживает средний, а средний — дальний. Это усиливает глубину.
Проверьте ощущение. Закройте один глаз, посмотрите на макет издалека. Должно возникнуть чувство, что вы смотрите вдаль, в тоннель или на бесконечную дорогу. Если взгляд упирается в плоскую стену — глубины нет.

📘 Задание:

Уходящая дорога за 5 минут»

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

У нижнего края — самые крупные (5 см высотой), чёткие, тёмные.
Чуть дальше — поменьше (3 см), чуть светлее.
Ещё дальше — 1 см, сероватые.
У самого горизонта — точки (0,2 см), почти сливающиеся с дорогой.

Задний план (небо и даль) слегка размойте пальцем (если рисуете карандашом) или нанесите акварелью размытый слой. Передний план оставьте резким.
Сфотографируйте. Вы построили глубинно-пространственную композицию. Глаз «идёт» от крупных столбов внизу к исчезающей точке вдали.

Итоговая формула

Глубинно-пространственная композиция = линия горизонта + точка схода + 3 плана + линейная и воздушная перспектива + масштабное сокращение + перекрытие
Запомнить: Объёмная композиция показывает один объект как коробку. Глубинно-пространственная показывает коридор, улицу или бескрайний пейзаж — пространство, в которое можно войти.

📘 Подытог:

Фронтальная (плоскостная), объёмная и глубинно-пространственная композиции относятся к одной группе — по геометрическому строению (формообразованию). Они описывают, как композиция организована в пространстве и сколько измерений используется для построения формы.

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

Таким образом, один и тот же объект или макет можно одновременно отнести сразу к нескольким видам композиции по разным признакам классификации.

4. Статичная композиция

Вызывает ощущение покоя, устойчивости, торжественности.

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

Источник: pinterest.com/izuizuwU

Источник: pinterest.com/ageelmusaev

Источник: pinterest.com/ivanovsky_alex

Главное отличие от динамичной композиции:

Динамичная — движение, скорость, диагонали, наклон.
Статичная — покой, горизонтали, вертикали, симметрия или спокойная уравновешенность.

Четыре главных признака статичной композиции

Вы можете проверить любой макет по этим пунктам. Если есть хотя бы три из четырёх — перед вами статика.

1.Преобладание горизонтальных и вертикальных линий

Нет сильных диагоналей, наклонов, «летящих» форм. Всё либо строго горизонтально, либо строго вертикально.

2. Симметрия или почти симметрия

Допустима лёгкая асимметрия, но она не нарушает общего покоя.

3.Малый контраст размеров

Элементы не «кричат» разницей в масштабе. Заголовок крупнее текста, но не в 10 раз, а в 2–3. Все объекты находятся в спокойном диалоге.

4.Отсутствие выхода за границы

Ни один элемент не обрезан краем макета. Всё целиком помещается внутри полей. Композиция замкнута в себе.

Как построить статичную композицию: пошаговая инструкция для новичка

Шаг 1. Выберите формат и задайте крупные поля
Возьмите прямоугольник (экран, лист, слайд). Оставьте поля шириной не менее 10–15% от ширины макета. Статика любит воздух по краям — так объекты не «давят» на границы.

Шаг 2. Определите ось (чаще всего вертикальную или горизонтальную)
Наметьте центральную ось симметрии. Для большинства статичных макетов это вертикальная линия посередине.

Шаг 3. Распределите элементы равномерно или почти симметрично
Если слева — заголовок, то справа — такого же веса фотография или блок текста. Не обязательно зеркально одинаково, но визуальный вес левой и правой половины должен быть равным.

Шаг 4. Используйте горизонтальные и вертикальные линии
Размещайте элементы ровно по горизонтали (например, строка заголовка — строго горизонтальна). Избегайте наклонов и диагоналей. Всё должно быть параллельно краям макета.

Шаг 5. Сделайте контраст размеров мягким
Пусть самый крупный элемент (например, заголовок) отличается от текста в 2–3 раза по высоте, но не в 5–10. Глазу не нужны «взрывы» масштаба.

Шаг 6. Добавьте ритм, но ровный
Равномерные интервалы между строками, абзацами, карточками. Шаг должен быть постоянным или с небольшим варьированием. Никаких «ускоряющихся» интервалов — это внесёт динамику.

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

Шаг 8. Проверьте ощущение
Закройте глаза, откройте. Вы чувствуете покой? Если хочется что-то подвинуть, наклонить — вы, возможно, случайно сделали динамику. Вернитесь к шагу 4.

Итоговая формула и чек-лист

Чек-лист для самопроверки (для любого макета, который вы задумали как статичный):

Нет сильных диагоналей и наклонов.
Объекты не обрезаны краями макета.
Есть достаточно большие поля (не менее 10–15%).
Разница между самым крупным и самым мелким элементом — не более 3–4 раз (по высоте/ширине).
Левая и правая части макета примерно равны по визуальному весу.
Интервалы между элементами ровные, без резких ускорений/замедлений.
Я могу смотреть на макет 10 секунд и не испытывать желания «поправить» или «встряхнуть» его.

Хочешь больше узнать о дизайне?

Пройдите бесплатный интенсив по старту в дизайне с нуля

Личный куратор
3 видео-урока

Полезные PDF-файлы
Диплом об окончании

Попробовать бесплатно

5. Динамичная композиция

Создаёт ощущение движения, энергии, скорости, беспокойства.

Динамичная композиция — это организация элементов, которая создаёт ощущение движения, скорости, энергии, напряжения. Взгляд не задерживается на месте, а скользит, «летит» или «падает» по макету. Статика успокаивает, динамика — возбуждает и вовлекает.

Классические примеры: кадр погони в фильме, постер рок-фестиваля, реклама спортивных кроссовок, интерфейс игры. Всё как будто в движении, даже если картинка статична.

Источник: pinterest.com/izuizuwU

Источник: pinterest.com/ageelmusaev

Источник: pinterest.com

Источник: pinterest.com/ageelmusaev

Главное отличие от статики:

Статика — горизонтали, вертикали, симметрия, покой.
Динамика — диагонали, наклоны, асимметрия, выход за края, сильный контраст.

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Диагонали	Главные линии макета идут не ровно, а под углом (например, текст наклонён, объект летит из левого нижнего в правый верхний угол).
Асимметрия	Вес распределён неравномерно, но динамично. Часто один угол перегружен, противоположный — почти пуст.
Сильный контраст размеров	Огромный объект рядом с крошечным. Разница в 5–10 раз — норма.
Обрезка краями	Элементы намеренно выходят за границы макета (лицо обрезано, машина «выезжает» за край). Создаётся ощущение, что действие продолжается за пределами листа.
Наклон	Текст, фото, блоки повёрнуты относительно горизонтали. Чем больше угол (до 15–30°), тем сильнее динамика.
Неравномерный ритм	Интервалы между элементами ускоряются или замедляются (1 см, 2 см, 4 см, 8 см).
Отсутствие центра	Нет явной точки покоя. Взгляд постоянно перемещается.
«Летящие» формы	Треугольники, острые углы, динамичные кривые (S-образные линии, спирали).

Как строить динамичную композицию (пошагово)

Ниже список видов лонгридов с фокусом на культуру, людей и события, каждый с конкретными примерами:

Откажитесь от центра. Ничего не кладите строго посередине. Сдвиньте главный акцент в угол или на край.
Проведите главную диагональ. Мысленно (или реально) наметьте диагональ от одного угла к противоположному. Основное движение пусть идёт вдоль этой линии.
Наклоните хотя бы один элемент. Возьмите заголовок или фотографию и поверните на 5–15°. Или используйте наклонный шрифт (италик, oblique).
Сильно контрастируйте по размеру. Пусть самый крупный объект занимает 50–60% макета, а самый мелкий — 2–3%. Разница минимум в 5 раз.
Обрежьте элемент краем. Пусть часть главного объекта (нос автомобиля, рука спортсмена, буква заголовка) выйдет за границу макета. Это создаст ощущение, что движение не закончено.
Используйте неравномерный ритм. Например, три кнопки: первая — отступ 10 px, вторая — 30 px, третья — 60 px от предыдущей. Глаз «ускоряется».
Добавьте направляющие движения. Стрелки, взгляд персонажа, летящие линии, повторяющиеся мелкие объекты (следы, искры, точки) — всё это указывает путь.
Проверьте динамику. Закройте глаза, откройте. Вам хочется моргнуть или, наоборот, «поехать» взглядом? Если есть ощущение толчка, рывка — динамика удалась.

📘 Упражнение:

Возьмите лист бумаги (или новый слайд в Figma/Canva). Напишите одно слово — например, «ПОЛЁТ» или «СПРИНТ».
Поверните слово на 20° против часовой стрелки и сдвиньте его в правый верхний угол так, чтобы часть букв ушла за край листа.
В левом нижнем углу (по диагонали) разместите три маленьких слова — например, «быстро», «выше», «сейчас» — каждое наклонено на свой угол (10°, 15°, 25°).
Между ними нарисуйте несколько хаотичных, но в целом летящих линий (как след от самолёта).
Ничего не центрируйте. Не оставляйте больших пустых полей со всех сторон — пусть одна сторона будет плотной, другая — разреженной.
Сфотографируйте. Вы получили простейшую, но работающую динамичную композицию. Если замените слово на «ТИШИНА», ощущение не обманет — динамика всё равно останется.

Итоговая формула

Динамичная композиция = диагонали + наклон + сильный контраст + обрезка краем + неравномерный ритм + отсутствие центра

Запомнить: Статика — это сидеть на стуле. Динамика — бежать, падать, лететь. Не путайте.

📘 Подытог:

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

Статичная композиция создаёт впечатление устойчивости, надёжности и равновесия. Динамичная, наоборот, передаёт активность, напряжение, развитие и направление движения.

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

Таким образом, статичность и динамичность являются лишь одним из признаков композиции и рассматриваются вместе с другими её характеристиками.

6. Замкнутая (центрическая) композиция

Все элементы сгруппированы внутри чёткой границы или тяготеют к центру. Края макета остаются пустыми или содержат только фон.

Замкнутая (центрическая) композиция — это такая организация элементов, где всё внимание стягивается к центру, а края остаются свободными или играют второстепенную роль. Главный объект (или группа объектов) расположен в середине макета, а все остальные детали либо симметрично его окружают, либо подчинены ему по иерархии.
Визуально это напоминает: мишень, розетку на потолке, солнце с лучами, мандалу, икону в алтаре, круглый логотип в центре визитки. Глаз постоянно возвращается в центр, не «убегая» за края.

Источник: pinterest.com

Источник: pinterest.com/adamrwarner

Источник: pinterest.com

Источник: pinterest.com/adamrwarner

Источник: pinterest.com/jonasmajidi

Источник: pinterest.com/yizhagohome

Главное отличие от открытой композиции:

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

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Явный геометрический центр	Главный объект находится в середине макета (или очень близко к ней). Ось симметрии чаще всего вертикальная и горизонтальная одновременно.
Симметрия относительно центра	Левая и правая, верхняя и нижняя части макета примерно одинаковы по весу и расположению элементов.
Круговое или радиальное расположение	Элементы выстроены по кругу, дуге или лучами от центра (как спицы колеса).
Чёткая граница или рамка	Композиция визуально «заперта» внутри: прямоугольник, круг, овал или просто плотное поле вокруг центра.
Минимальная активность на краях	Поля большие, на периферии почти ничего нет, либо есть только фоновые или декоративные элементы.
Взгляд возвращается в центр	Куда бы ни посмотрел зритель, глаз автоматически «оттягивается» обратно к середине.

Как строить замкнутую (центрическую) композицию

Найдите точный центр макета. Для прямоугольника — это пересечение диагоналей. Поставьте там мысленную точку.
Поместите главный акцент в центр (или очень близко). Это может быть логотип, фотография, заголовок, икона, кнопка. Всё второстепенное — вокруг него.
Используйте симметрию. Чаще всего центрическая композиция симметрична по вертикали и горизонтали, но допустима и лучевая симметрия (поворот на 90°, 120°).
Создайте «рамку» вокруг центра. Это могут быть: поля (много белого пространства), декоративная линия, тонкая граница, размытый круг, или просто то, что все остальные элементы расположены ближе к краям, но внутри границ.
Расположите второстепенные элементы кольцом или лучами. Например: четыре маленьких иконки по углам квадрата вокруг центральной картинки; или три блока текста, образующих треугольник вокруг заголовка.
Ничего не должно выходить за края макета. Вся композиция целиком помещается внутри полей. Обрезка краем недопустима — она разрушит замкнутость.
Проверьте ощущение. Посмотрите на макет. Если глаз постоянно «проваливается» в центр и не хочет уходить на периферию — вы сделали всё верно. Если взгляд улетает в угол и застревает там — композиция не замкнулась.

📘 Упражнение «Мишень за 5 минут»

Нарисуйте на листе бумаги большой круг (диаметром 10–12 см) — это ваша граница. Внутри этого круга вы будете работать. Всё, что за кругом, — пустое поле (его потом вы можете обрезать или оставить как поля).
В центре круга нарисуйте или приклейте самую яркую и крупную фигуру — например, красный круг диаметром 3 см. Это главный акцент.
Вокруг центральной фигуры расположите четыре маленькие фигуры (квадратики, треугольники или звёздочки) строго симметрично: сверху, снизу, слева, справа, на одинаковом расстоянии от центра.
Между этими маленькими фигурами (по диагоналям) добавьте ещё четыре элемента ещё меньше — например, точки или мелкие кружочки.
Убедитесь, что ни одна фигура не касается внешнего круга (большой границы). Поля внутри круга между элементами и границей — одинаковые или близкие.
Отрежьте лишнюю бумагу вокруг большого круга (или обведите его толстой линией). Получилась замкнутая центрическая композиция — «мишень» или «медальон». Глаз постоянно в центре.

Итоговая формула

Замкнутая (центрическая) композиция = центр + симметрия + граница/рамка + поля + отсутствие обрезки краем

Запомнить: Всё внутри, центр — король, края — только охрана. Как икона в храме или солнце в круге.

7. Открытая (свободная) композиция

Элементы как будто «выпадают» за край макета, обрезаются, не вписываются в рамку. Создаётся ощущение, что композиция продолжается за пределами листа.

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

Источник: pinterest.com

Источник: figma config

Источник: pinterest.com/behanc

Источник: pinterest.com/baileyalex79

Источник: pinterest.com/ngthanhbean

Главное отличие от замкнутой композиции:

Замкнутая — всё внутри, центр главный, границы чёткие.
Открытая — элементы выходят за края, центр размыт, границы случайны.

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Обрезка краями (кадрирование)	Главный объект намеренно обрезан верхним, нижним, левым или правым краем макета. Часть его остаётся «за кадром».
Отсутствие явного центра	Нет одной точки, куда возвращается взгляд. Движение направлено к краям и за них.
Асимметрия (часто сильная)	Вес сосредоточен у одного края или угла, противоположная сторона почти пуста.
Диагонали, уходящие за край	Линии, взгляды, движение объектов направлены строго за границу макета.
Отсутствие рамки или полей	Поля минимальны или отсутствуют. Элементы вплотную подходят к краю или выходят за него.
Незавершённость, фрагмент	Композиция выглядит как вырезанный фрагмент чего-то большего.
Направление «наружу»	Все динамические линии, повороты объектов, взгляды персонажей обращены вовне макета.

Как строить открытую композицию

Уберите поля или сделайте их минимальными. Элементы должны доходить почти до самого края. Никаких больших отступов.
Выберите один или два элемента, которые будут обрезаны краем. Например: крупное лицо, где линия обрезки проходит через глаз и подбородок; или буква огромного заголовка, которая «выезжает» за левый край.
Сдвиньте главный акцент к краю или в угол. Не в центр. Пусть он будет как бы «на полпути наружу».
Создайте направление за край. Используйте: взгляд персонажа, смотрящего за границу макета; стрелку, указывающую в пустоту; диагональную линию, уходящую в угол; летящие объекты, часть которых уже за кадром.
Не закрывайте композицию рамкой. Никаких толстых линий по периметру, никаких визуальных ограничителей. Граница макета должна быть случайной, а не архитектурной.
Используйте сильную асимметрию. Например, весь вес в левой верхней части, а правый нижний угол почти пуст. Это усилит ощущение незавершённости и движения в пустоту.
Проверьте ощущение. Посмотрите на макет. Если вам хочется «довернуть» голову, чтобы увидеть, что же там за краем — открытая композиция удалась. Если взгляд спокойно гуляет внутри — вы не до конца «открыли» её.

📘 Упражнение:

Возьмите любое фото с человеком или животным (можно из журнала или распечатать). Главное условие: взгляд направлен вбок.
Обрежьте фото так, чтобы:

взгляд персонажа был направлен строго за край макета;
часть лица (нос, лоб, подбородок) тоже ушла за край;
с противоположной стороны осталось пустое пространство (куда смотрит взгляд).

Приклейте этот фрагмент на лист бумаги так, чтобы обрезанные края совпадали с краями листа (никаких полей). Если не совпадают — обрежьте сам лист.
Добавьте один элемент, который тоже «уходит» за тот же край: например, нарисуйте линию, начинающуюся изнутри и уходящую за границу; или приклейте букву, выступающую за край.
Сфотографируйте результат. Глаз будет стремиться «выйти» из картинки туда, куда смотрит персонаж. Вы построили открытую композицию.

Итоговая формула

Открытая композиция = обрезка краем + отсутствие полей + направление наружу + асимметрия + никакой рамки

Запомнить: Замкнутая — всё внутри, как в коробке. Открытая — всё наружу, как вылетел за порог.

📘 Подытог:

Замкнутая и открытая композиции относятся к одной группе — по взаимодействию с границами формата (по замкнутости пространства). Они определяют, воспринимается ли композиция как завершённая внутри заданных границ или визуально продолжается за их пределами.

Замкнутая композиция удерживает внимание зрителя внутри макета и создаёт ощущение завершённости, устойчивости и целостности. Открытая композиция, наоборот, направляет взгляд за пределы формата, создавая ощущение пространства, свободы и продолжения.

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

Таким образом, открытость и замкнутость являются самостоятельным признаком композиции и показывают, как элементы взаимодействуют с границами листа, экрана или любого другого формата.

8. Симметричная композиция

Зеркальное отражение относительно вертикальной, горизонтальной или диагональной оси. Левая и правая стороны почти одинаковы по весу и расположению элементов.

Симметричная композиция — это такая организация элементов, при которой левая и правая части макета (или верхняя и нижняя) являются зеркальным отражением друг друга относительно оси. Ось может быть вертикальной (чаще всего), горизонтальной или диагональной (реже). Каждый элемент на одной стороне имеет «парный» элемент с той же формой, размером и положением на другой стороне.
Классические примеры: фасад здания с колоннами по обе стороны от входа, бабочка с симметричными крыльями, официальное приглашение с гербом по центру, лендинг с двумя одинаковыми колонками текста.

Источник: pinterest.com

Источник: pinterest.com/Pixflow

Источник: pinterest.com

Источник: pinterest.com/Pixflow

Источник: pinterest.com/

Источник: designcomcafe.com.br

Главное отличие от асимметричной композиции:

Симметричная — точное (или почти точное) зеркало, спокойствие, формальность.
Асимметричная — равновесие через разный вес, динамика, современность.

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Вертикальная ось	Через центр макета проходит воображаемая линия. Слева и справа от неё — одинаковое расположение элементов.
Зеркальность	Если слева красный круг, то справа — такой же красный круг на том же расстоянии от оси.
Центральный элемент (опционально)	Часто на самой оси располагается главный акцент (заголовок, логотип, фото), который не дублируется, а служит «якорем».
Отсутствие «весовой» асимметрии	Ни одна сторона не перетягивает. Визуальный вес левой и правой половины строго равен.
Формальность и порядок	Композиция выглядит правильной, предсказуемой, даже строгой.
Спокойный ритм	Интервалы и отступы повторяются симметрично.

Как строить симметричную композицию

Проведите вертикальную ось через центр макета. Это может быть мысленная линия или направляющая в редакторе.
Разместите центральный элемент (если он есть) точно на оси. Например, заголовок, логотип, большую фотографию. Он не должен быть сдвинут влево или вправо.
Для каждого элемента слева создайте парный элемент справа. Если слева колонка текста шириной 300 px на расстоянии 100 px от оси, то справа должна быть колонка текста шириной 300 px на расстоянии 100 px от оси.
Соблюдайте одинаковые расстояния от оси до элементов. Зеркало не терпит «почти одинаково».
Проверьте вертикальную ритмику. Симметрия может быть не только по горизонтали, но и по вертикали (верх и низ как отражение), но для новичка лучше начинать с вертикальной.
Добавьте «нарушителя» спокойствия (опционально). Чтобы симметрия не стала скучной, иногда добавляют один маленький асимметричный акцент (например, яркую кнопку не на оси, а чуть сбоку). Но это уже не чистая симметрия.
Проверьте ощущение. Если макет выглядит устойчивым, как отражение в зеркале, и не хочется ничего двигать — вы построили симметричную композицию.

📘 Упражнение:

Нарисуйте прямоугольник 9×5 см (стандартная визитка). Проведите вертикальную ось посередине (4,5 см).
Разместите строго на оси: логотип (небольшой круг или квадрат) и под ним фамилию «Иванов».
Слева от оси, на расстоянии 1 см, напишите «Тел: +7 123 456». Справа от оси, на том же расстоянии 1 см, напишите «Email: ivanov@mail.ru».
Слева, чуть ниже телефона, на расстоянии 1,5 см от оси, поместите иконку телефона. Справа, симметрично, иконку письма.
Все элементы по высоте также расположите зеркально: если левая иконка телефона находится на уровне 3 см от верхнего края, то правая иконка письма — тоже на 3 см.
Сфотографируйте. Это строгая, правильная симметричная композиция. Она выглядит формально и надёжно, но чуть скучно. Для веселья можете добавить один цветной элемент несимметрично (например, красную точку в правом нижнем углу). Но сначала запомните чистый вариант.

Итоговая формула

Симметричная композиция = вертикальная (или горизонтальная) ось + зеркальное равенство левой и правой частей + центральный элемент (необязательно) + формальность

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

Освой профессию
Веб-дизайнер

Научитесь создавать дизайн лендингов, многостраничных сайтов с нуля до выхода на доход от 50 000₽

Узнать подробнее

-40%

9. Асимметричная композиция

Нет зеркальности, но есть равновесие за счёт визуального веса. Самая частая в современном дизайне.

Асимметричная композиция — это такая организация элементов, при которой нет зеркального равенства левой и правой (или верхней и нижней) частей макета, но общее равновесие сохраняется за счёт разного визуального веса объектов. Это живая, современная, динамичная структура, где маленькое тёмное пятно может уравновесить большое светлое, а один яркий элемент — группу бледных.
Классические примеры: постер с огромным заголовком в левом верхнем углу и мелкой подписью в правом нижнем; веб-сайт с широкой фотографией слева и узкой колонкой текста справа; реклама кроссовок, где одна туфля крупно, а вторая — мелко и далеко.

Источник: pinterest.com

Источник: pinterest.com/ngthanhbean

Источник: pinterest.com

Источник: designcomcafe.com.br

Главное отличие от симметричной композиции:

Симметричная — зеркальное равенство, спокойствие, формальность.
Асимметричная — равенство через разный вес, динамика, современность.

Приёмы и отличительные черты

Приём / черта	Как это выглядит
Нет оси симметрии	Левая и правая части явно разные, нельзя провести линию, которая разделит макет на зеркальные половины.
Уравновешивание разным весом	Крупный бледный объект слева уравновешивается маленьким ярким (тёмным) объектом справа.
Группировка мелких элементов	Несколько мелких объектов, собранных вместе, «весят» как один крупный.
Сдвиг центра тяжести	Визуальный центр макета не совпадает с геометрическим. Композиция «тяжелее» с одной стороны.
Динамичность и естественность	Асимметрия встречается в природе (облака, деревья, реки) и выглядит более живой, чем идеальное зеркало.
Частое использование сетки	Колонки разной ширины (например, 4 и 8 колонок из 12) — типичный приём асимметричного баланса.

Как строить асимметричную композицию

Забудьте про центр. Не кладите ничего строго посередине. Сдвигайте элементы к краям, углам, вверх или вниз.
Работайте с визуальным весом. Представьте, что каждый элемент имеет «массу»: чем крупнее, темнее, контрастнее и сложнее форма, тем он тяжелее.
Уравновесьте левую и правую части, но разными способами. Например:

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

Используйте «рычаг» расстояния. Чем дальше элемент от центра, тем больше его визуальный вес. Маленькая точка на дальнем краю может уравновесить большой объект рядом с центром.
Создайте диагональную связь. Часто в асимметричной композиции элементы располагаются по диагонали: левый верх — правый низ. Это создаёт динамическое равновесие.
Проверьте баланс. Прищурьтесь и посмотрите на макет как на размытое пятно. Если пятно не сползает в одну сторону — баланс достигнут. Если перевешивает — добавьте вес на лёгкую сторону (чуть крупнее, темнее, ближе к краю).
Избегайте случайной асимметрии. Асимметрия должна быть намеренной и сбалансированной. Сдвиг на 2 пикселя от центра — это не асимметрия, это ошибка. Сдвиг на треть макета — осознанный приём.

📘 Упражнение:

Возьмите белый лист бумаги. Вырежьте из чёрной бумаги два прямоугольника: большой (10×6 см) и маленький (3×2 см).
Положите большой прямоугольник в левую половину листа, отступив от края 2 см, на уровне середины.
Теперь попробуйте уравновесить его, расположив маленький прямоугольник справа. Двигайте маленький:

Если положить его близко к центру — будет перевес влево.
Если положить почти у правого края — перевес вправо.
Найдите такое положение, чтобы лист не «заваливался» ни влево, ни вправо.

Запомните это положение: маленький далеко на краю уравновешивает большой вблизи центра.
Замените маленький чёрный прямоугольник на ярко-красный круг того же размера. Красный «легче» чёрного, поэтому переместите его ещё дальше к краю или добавьте ещё один маленький объект рядом.
Сфотографируйте. Вы создали асимметричную композицию с равновесием через разный вес и расстояние.

Итоговая формула

Асимметричная композиция = разный визуальный вес + уравновешивание группой + расстояние как рычаг + динамический баланс

Запомнить: Симметрия — это весы с одинаковыми гирями на одинаковом расстоянии. Асимметрия — весы, где маленькая гиря далеко уравновешивает большую гирю близко.

📘 Подытог:

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

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

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

Таким образом, симметрия и асимметрия являются одним из признаков композиции и описывают способ достижения визуального равновесия между её элементами.

Краткая шпаргалка по видам композиции (для новичка)

Другие виды композиции

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

В отличие от предыдущих классификаций, которые описывают свойства композиции, структурные виды показывают, каким образом организованы элементы внутри макета и по какой схеме строится их взаимодействие.

К таким видам относятся:

центрическая (лучевая);
линейно-ленточная (фризовая);
решетчатая (сеточная);
модульная;
иерархическая (древообразная);
блочная композиция.

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