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

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

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

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

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

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

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

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

Оглавление статьи:

1. Фронтальная композиция
2. Объёмная композиция
3. Статичная композиция
4. Динамичная композиция
5. Замкнутая (центрическая) композиция
6. Открытая (свободная) композиция
7. Симметричная композиция
8. Асимметричная композиция

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 есть плагины) или просто наклонять и трансформировать элементы так, чтобы они «уходили» в точку схода.

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

1. Три круга — три плана (5 минут)

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

2. Переделайте плоский макет в объёмный (10 минут)

Возьмите любой свой старый плоский макет (или нарисуйте простой: заголовок, фото, кнопка).
Размойте фон (если он есть) или добавьте текстуру с низким контрастом.
Добавьте тень под главным объектом (фото, продукт, иконка).
Сделайте заголовок частично перекрывающим фото, но с лёгкой тенью.
Уменьшите насыщенность всех элементов, кроме одного (акцента).
Сравните до/после. Разница в ощущении глубины будет колоссальной.

3. Коллаж из журналов (15 минут)

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

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

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

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

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

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

Источник: pinterest

Источник: 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 секунд и не испытывать желания «поправить» или «встряхнуть» его.

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

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

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

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

Источник: 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 от предыдущей. Глаз «ускоряется».
Добавьте направляющие движения. Стрелки, взгляд персонажа, летящие линии, повторяющиеся мелкие объекты (следы, искры, точки) — всё это указывает путь.
Проверьте динамику. Закройте глаза, откройте. Вам хочется моргнуть или, наоборот, «поехать» взглядом? Если есть ощущение толчка, рывка — динамика удалась.

📘 Упражнение «Падающий текст за 5 минут»:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: figma config

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Когда использовать: официальные документы, классические сайты, визитки консервативных компаний, храмовая архитектура.

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

Совет: Добавьте один асимметричный акцент (например, яркую кнопку сбоку), чтобы оживить строгую симметрию.

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

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

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

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

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

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

Когда использовать: почти везде, кроме самых консервативных проектов.

Как строить: Большое светлое пятно слева уравновешивается маленьким тёмным справа. Несколько мелких элементов собираются в группу, которая «весит» как один крупный.

Совет: Асимметрия сложнее симметрии. Начинайте с набросков — двигайте элементы, пока не почувствуете баланс.

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

📘 Больше информации в статье:

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

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

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

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

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

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

Основные элементы и принципы композиции в дизайне

Основные элементы композиции в дизайне

Это то, из чего строится любая композиция, «кирпичики». Без них ничего не будет.

Точка — самый простой элемент. Привлекает взгляд, задаёт фокус.
Линия — соединяет точки, направляет движение, делит пространство (прямая, кривая, ломаная).
Пятно — крупный элемент (силуэт, форма). Создаёт объём, тон, контраст.
Форма и контрформа — две стороны одного явления. Форма — это фигура, контрформа — это организованное пространство вокруг и внутри неё
Объём — иллюзия трёхмерности (светотень, перспектива).
Тон — светлотность элемента (от белого до чёрного).
Цвет — цветовой тон, насыщенность, яркость.
Фактура / текстура — характер поверхности (гладкая, шершавая, блестящая).
Пространство — пустота или заполненность, глубина, фон.

Принципы композиции

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

Главные принципы композиции (классические):

Целостность — все элементы воспринимаются как единое целое, а не разрозненные части. Ничего нельзя выбросить без потери смысла.
Равновесие (баланс) — все части композиции уравновешены по зрительному «весу» (размеру, тону, цвету). Бывает:

Симметричное (зеркальное)
Асимметричное (уравновешенное «на глаз»)

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

Метр (равномерный повтор)
Ритм (ускорение/замедление, изменение шага)

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

10 главных принципов дизайна

Статья в тему

Дополнительные принципы композиции(важные в дизайне):

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

Главные принципы композиции (классические)

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

Основы (элементы)

Точка, линия, пятно, форма, объём, тон, цвет, фактура, пространство

Принципы (как их организовать)

Целостность, баланс, иерархия, ритм, контраст/нюанс, пропорции, масштаб, движение, единство

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

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

1. Закон целостности

Суть: Восприятие стремится к простым, замкнутым, устойчивым формам (гештальт). Часть воспринимается как целое, даже если есть разрывы.
Пример: Пунктирная линия — мы видим линию, а не точки. Логотип WWF (панда) — угадываем форму даже без деталей.
Связь с принципами: Принцип целостности, единства

2. Закон пропорций

Суть: Отношения частей между собой и с целым подчиняются определённым числовым соотношениям (золотое сечение 1:1.618, правило третей, модулор, квадратура).
Пример: Расположение горизонта на уровне 1/3 или 2/3 высоты кадра. Формат A4 (корень из 2).
Связь с принципами: Принцип пропорций, масштаба, гармонии

3. Закон ритма

Суть: Закономерное чередование любых элементов (интервалов, форм, размеров) создаёт предсказуемость, движение или покой в композиции.
Пример: Метр — равномерный повтор (колоннада). Ритм — ускорение/замедление (ряды уменьшающихся окон).
Связь с принципами: Принцип ритма, динамики

4. Закон контраста

Суть: Различия между элементами должны быть достаточно выражены, чтобы восприниматься, но не разрушать связность. Противоположности усиливают друг друга.
Пример: Чёрное на белом, маленькое рядом с большим, круглое на фоне квадратного.
Связь с принципами: Принцип контраста, доминанты

5. Закон равновесия (баланса)

Суть: Композиция воспринимается как устойчивая, если зрительный вес элементов распределён относительно осей или центра так, что нет ощущения падения или опрокидывания.
Пример: Симметрия — полное равновесие. Асимметрия — уравновешивание цветом/размером/положением.
Связь с принципами: Принцип баланса

6. Закон доминанты (соподчинения)

Закон композиции: доминанты (соподчинения)

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

7. Закон единства и борьбы (объединения) — дополнительный

Закон композиции: единства и борьбы (объединения)

Суть: Элементы тяготеют к объединению по сходству (закон подобия) и по близости (закон близости), но при этом нужны и различия для интереса.
Пример: Близкие по форме и цвету кнопки объединяются в группу. Группа отделена от другой группы расстоянием.
Связь с принципами: Принцип группировки, единства

Как не путать: законы vs принципы

Закон — «так работает человеческое зрение и мозг» (объективно).
Принцип — «так сделай, чтобы использовать этот закон».

Законы (что диктует природа восприятия)	Принципы (что делает дизайнер, следуя законам)
Закон целостности — мы достраиваем неполное	Принцип «используй незамкнутые формы для динамики»
Закон пропорций — определённые отношения вызывают удовольствие	Принцип «сетка 12 колонок», «правило третей»
Закон контраста — различие необходимо для различения	Принцип «выдели главное цветом»
Закон равновесия — неуравновешенное вызывает тревогу	Принцип «уравновесь яркое пятно большим бледным»

Шпаргалка (6 главных законов для запоминания)

Целостность (дорисовываем, группируем)
Пропорции (золотое сечение, правило третей)
Ритм (чередование)
Контраст (различие)
Равновесие (зрительный вес)
Доминанта (главное и второстепенное)

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

10 главных принципов дизайна

Статья в тему

Композиция в графическом дизайне

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

баннеров,
плакатов,
презентаций,
рекламы,
упаковки,
социальных сетей.

Главная задача композиции в графическом дизайне — быстро донести информацию и создать нужный эмоциональный эффект.
Именно поэтому дизайнеры активно используют: