Основы композиции в дизайне: что это, какие есть принципы и законы, как применять в дизайне

Понятие композиции и почему она важна

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

Одно из первых классических определений композиции появилось еще в эпоху Возрождения. Архитектор Альберти описал композицию как «сочинение, выдумывание, изобретение». Художники и дизайнеры используют это понятие и сейчас.

Основные принципы создания композиции

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

Центральный элемент композиции

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

Точка, линия и плоскость

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

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

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

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

Симметрия и асимметрия

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

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

Иерархия и доминанта

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

Доминанта выделяется на фоне остального пространства контрастным цветом или формой. Она не всегда расположена по центру. Ее главная функция — выделить определенную область во всей композиции.

Пропорции и масштаб

В любой работе нужно понимать, насколько элементы пропорциональны друг другу. Особенно в живописи, где пропорции и масштаб напрямую связаны с композицией, отвечают за реалистичность и визуальный баланс. Так например, в картине «Охотники на привале» Василия Григорьевича Перова только по пропорциям и масштабу в композиции мы можем понять, что степь находится далеко позади героев, а ружья лежат ближе к нам.

Форма и пространство

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

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

Цвет, тон и текстура

С помощью комплементарных или контрастных цветов можно выделить разные области, задать настроение.

Читайте также

Как создать свой шрифт: инструкция

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

Равновесие и баланс

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

Законы элементов в композиции

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

Закон близости

Закон близости описывает явление, когда группу объектов, которые находятся близко друг к другу, воспринимают как единое целое: взгляд автоматически объединяет их.

Закон ритма и повторения

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

Закон гештальта

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

Виды композиции

Есть статика и динамика, а еще открытая и закрытая композиции.

Статическая и динамическая

Противостояние статичности и динамичности строится на визуальном «движении» и направлении элементов. Статическая композиция подразумевает статичный взгляд зрителя, строение по центру, а динамическая создает ощущение движения всех элементов.

Открытая и закрытая

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

Техники построения композиции

Практические техники построения композиции помогают рассчитать расположение элементов и их соотношение. Среди таких техник выделяют золотое сечение и правило третей.

Читайте также

Стоп-кадр. Правила композиции в кино

Золотое сечение и числа Фибоначчи

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

С помощью такой математической последовательности и правила золотого сечения Леонардо Да Винчи создал знаменитую «Мону Лизу». Если наложить золотую спираль на картину, можно заметить, как центральная фигура практически идеально подходит под данную композицию, начиная с положения рук и заканчивая чертами лица.

Правило третей

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

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

Композиционные схемы

Есть несколько композиционных схем, которые используют художники и дизайнеры в своих креативных проектах. Разберем одни из самых популярных: диаграмму Гутенберга, схемы F и Z.

Диаграмма Гутенберга

Диаграмма, или диагональ, Гутенберга делит пространство на четыре зоны. У каждой области есть потенциал — вероятность, с которой на нее обратит внимание пользователь. Так области делятся на благоприятные и неблагоприятные, а еще определяют, как взгляд человека будет двигаться по изображению.

Схемы F и Z

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

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

А вот пример использования схемы Z на главной странице Contented. С помощью контрастного цвета шрифта мы читаем верхнее меню, а потом автоматически переходим к заголовку, и взгляд следует до самой стрелки в правом нижнем углу страницы.

Важно помнить, что основное отличие схемы Z от диаграммы Гутенберга в том, что схема только описывает общее направление взгляда зрителя, в то время как диаграмма Гутенберга разделяет все пространство на конкретные потенциальные области.

Композиция в направлениях дизайна

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

Графический дизайн

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

Если нужен лаконичный логотип, можно использовать принцип золотого сечения. В дизайн-сообществе есть целые инструкции, как именно создать логотип на основе знаменитой золотой спирали.

Веб-дизайн

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

Если говорить про лендинги и одностраничные сайты, то цель композиции в этом случае — не дать пользователю заскучать и уйти, не предприняв никакого действия.
Поэтому дизайнеры комбинируют разные композиционные приемы, задерживая взгляд пользователя на том или ином элементе. Например, на сайте Media Contented используют фокальные точки с помощью кнопки «Хочу учиться» и иконки чата в нижнем правом углу, а одинаковые по ширине элементы создают ощущение единства.

Модульные сетки для композиции в веб-дизайне

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

Дизайн интерьеров

Тут композиция принимает более объемную форму, потому что нужно учесть трехмерное пространство и все детали, которые будут в нем. Для дизайна интерьеров очень важны пропорции и масштаб, а еще удачное использование цветов и оттенков.

UX/UI-дизайн

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

Упражнения для создания хорошей композиции

Чтобы создать хорошую композицию, важно тренировать насмотренность и уметь применять этот навык в дизайне. Когда заходите на какой-либо сайт и вам он нравится, задайте себе вопросы: «Куда мой взгляд направлен сейчас? Куда я посмотрю дальше? Почему именно на этой странице композиция кажется мне удачной? Какие принципы и правила я могу заметить?».

На этапе подготовки работы с композицией помогут простые композиционные скетчи. Продумайте расположение основных форм: треугольника, круга, квадрата. Потом попробуйте создать композицию с помощью абстрактных форм. Такое упражнение тренирует построение и создание визуального баланса. А еще такие тренировки развивают воображение.

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

1. Композиция — это структура изображения, рисунка или дизайна, которая определяет согласованное и гармоничное размещение элементов и добавляет уместные акценты там, где это важно для зрителя.
2. Основными элементами в композиции считаются центральный компонент, симметрия и асимметрия, доминанта, иерархия, использование формы и пространства, а еще принципы цветовых оттенков и визуального равновесия.
3. В дизайнах и рисунках авторы часто используют определенные техники построения композиции и установленные схемы. Например, золотое сечение или диаграмму Гутенберга.
4. В дизайне принципы создания композиции применяют практически везде. Основные правила построения композиции можно найти в графическом дизайне, на веб-сайтах и в проектировании интерфейсов.
5. Создавать композицию можно, если тренировать насмотренность и выполнять упражнения по созданию небольших композиций из базовых форм.