что такое гармония в композиции

Разбираемся в законах композиции за 10 минут

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

Любая дизайнерская работа, будь то иллюстрация, визуализация или
3D-сцена, начинается с построения композиции.

Связь между объектами

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

Золотое сечение

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

Первое упоминание принципа связывают с именем Евклида, который применил золотое сечение для построения правильного прямоугольника. В искусстве принцип получил широкое распространение начиная с Леонардо да Винчи — наверняка вы знаете его легендарный рисунок «Витрувианский человек», наглядно демонстрирующий связь этого принципа с пропорциями человеческого тела.

Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.

Источник

Создание гармоничной композиции в дизайне сайта: основные правила, примеры

Зачем нужна композиция и структура

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

Почему гармоничная композиция так важна в дизайне сайтов?

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

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

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

Правильная цветовая гамма

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

Допустим, у нас есть несколько одинаковых элементов. Они ничем не отличаются ни по размеру, ни по цвету, ни по форме:

Однако, если мы сделаем цветовой акцент, картинка станет восприниматься совершенно по-другому:

Этот прием используют при создании композиции. Когда нужно выделить какой-то важный элемент, уравновесить структуру или просто сделать акцент на детали:

Баланс

На примере мы видим множество одинаковых блоков, которые расположены симметрично относительно центра макета.

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

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

Кроме симметричного/ассиметричного расположения элементов важно также соблюдать пропорции и масштаб объектов. Например:

На примере мы видим, как большая иллюстрация уравновешивается маленькими текстовыми элементами. Большая буква D выступает ориентиром и определяет центр всего макета.

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

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

Наличие белого пространства

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

Иерархия

Дополняющие элементы

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

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

В совокупности с симметричной композицией сайт смотрится стильно, запоминается, привлекает внимание.

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

Повторение

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

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

Структура и внимание к деталям

Что такое четкая структура? Больше данный термин относится к навигации сайта. Контент, навигационные элементы, призывы к действию расположены таким образом, что сразу становится понятно, какую функцию выполняет тот или иной элемент. Блоки расположены по четким линиям, соблюдены одинаковые интервалы (если речь идет о симметричной композиции), текст и изображения распределены по разным блокам и объединяются по смыслу. Например:

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

Концепция страницы

Управление вниманием пользователя

1. Использование фотографий человека

2. Выделение цветом

3. Движение

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

Студия дизайна IDBI разрабатывает дизайн сайтов с учетом правил и принципов создания гармоничной композиции на макете. Мы уделяем внимание цветовой гамме, используем модульные сетки и предлагаем как традиционные, так и нестандартные решения. Наши работы можно посмотреть в разделе «Портфолио».

Источник

ОСНОВЫ КОМПОЗИЦИИ | Часть №3

ОСНОВНЫЕ СРЕДСТВА КОМПОЗИЦИИ

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

Симметрия является той идеей, посредством которой человек на протяжении веков пытался постичь и создать порядок, красоту и совершенство.
/Г.Вейль/

Симметрия – равентсво, тождество, схожесть.
Симметрия предполагает неизменность не только самого объекта, но и каких-либо его свойств по отношению к преобразованиям, выполненным над объектом. Неизменность тех или иных объектов может наблюдаться по отношению к разнообразным операциям – к поворотам, переносам, взаимной замене частей, отражениям и т.д. В связи с этим выделяют разные виды симметрии.

Симметрии на плоскости бывают:
• Зеркальная симметрия — основывается на равенстве двух частей фигуры, расположенных одна относительно другой как предмет и его отражение в зеркале. Воображаемая плоскость, которая делит такую фигуру пополам, называется плоскостью симметрии.

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

• Асимметрия значит отсутствие соразмерности, полное нарушение симметрии, повторяющиеся элементы отсутствуют или их нельзя совместить путём сдвигов или поворота.
• Диссимметрия – частичное нарушение симметрии. Диссимметрия хорошо воспринимается, так как, обладая структурными качествами симметрии, содержит больше свободы.

В композициях ритм может быть явным и скрытым:
• явный ритм очевиден, если, например, поместить элементы на полосатый фон;
• скрытый ритм представляет собой сложное чередование акцентов, иногда смысловых, направлений, технических приемов.

Существует метрический и ритмический порядок.
Метр и ритм в основе своей имеют симметрию. Но ритм, к отличие от метра, строится на основе разных, но повторяющихся элементов. В отличие от метрического повтора закономерность, на которой основан ритм, выражается в постепенных количественных изменениях в ряду чередующихся элементов – в нарастании или убывании чередований, объема или площади, в сгущениях или разрежениях структуры, силы тона и т.п.

Динамический ритмический ряд можно построить следующими способами:
• увеличением или уменьшением элемента по величине при одинаковых интервалах;
• возрастанием или убыванием интервала, но при одинаковых элементах;
• одновременным возрастанием или убыванием и элементов, и интервалов.
Обязательным условием при построении ритмического ряда должно быть ясное его прочтение. Поэтому элементы или интервалы должны повторяться не менее 3-5 раз.

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

Метр и ритм могут взаимно сочетаться.

✔️ МАСШТАБ ПРОПОРЦИЯ

Другие виды пропорциональных отношений:
— арифметическая прогрессия: 1, 3, 5, 7, 9…;
— геометрическая прогрессия: 1, 3, 9, 27, 81…;
— квадратичные отношения: 2, 4, 16, 256…;
— ряд Фибоначчи: 1, 2, 3, 5, 8… и др.

• МАСШТАБ
Масштабность – соразмерность принятому эталону. Существуют композиции, строящиеся на использовании мелкого масштаба, например, как на географических картах, и строящиеся
на крупных планах, например, фотографии макросъемки. Эффект создаваемой композиции зависит
от того, как выбранный масштаб и размер изображения соответствуют цели автора.
Важно заметить, что подсознательно эталоном для сравнения у человека является сам человек.

✔️ КОНТРАСТ НЮАНС ТОЖДЕСТВО

Одномерный контраст – контраст только по одному параметру, например по форме
Многомерный контраст – контраст по нескольким параметрам сразу: например, форма и цвет.

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

✔️ АКЦЕНТ ДОМИНАНТА АНАЛОГ

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

• Доминанта – это главный элемент композиции, которому подчиняются все остальные.

• Аналог (греч. «сходство») – уподобление (одинаковые или похожие друг на друга элементы в композиции). Аналоги придают композиции единство. Чаще всего бывают по цвету, форме, фактуре.

✔️ СТАТИКА ДИНАМИКА

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

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

✔️ ТЕКТОНИКА АТЕКТОНИКА

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

✔️ КОМПОЗИЦИОННЫЕ ОСИ

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

Приемы композиции – это процесс обоснованного выбора и применения средств композиции, например: пропорционирование, ритмизация, масштабирование, контрастирование, нюансировка и т.д.

Источник

ПЯТЬ ПРИНЦИПОВ ГАРМОНИИ В КОМПОЗИЦИИ

Равновесие

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

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

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

Соподчинение элементов

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

1) двухуровневая (доминанта и второстепенные элементы);

2) трехуровневая (например: доминанта, акценты и второстепенные элементы).

Композиционный центр определяется:

– положением на плоскости;

– формой, которая отличается от формы других элементов;

– фактурой, которая отличается от фактуры других элементов;

– сложностью формы и степенью проработки по отношению к второстепенным элементам.

Соразмерность

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

Повторение целого в его частях

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

Единство

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

Основные черты принципа единства:

1) неделимость композиции, или невозможность воспринимать ее как сумму разрозненных элементов;

2) необходимость связи и взаимной согласованности всех элементов композиции.

Задание № 1. Равновесие.

Выполнить 3 композиции:

1) отсутствие равновесия;

2) равновесие, основанное на симметрии относительно вертикальной оси,

расположенной по центру формата;

3) равновесие в ассиметричной композиции.

Задание № 2. Соподчинение: композиционный центр.

Выполнить 4 композиции:

1) композиционный центр по размеру;

2) композиционный центр по тону;

3) композиционный центр по сложности формы;

4) композиционный центр по положению на плоскости.

Задание № 2а. Соподчинение: иерархия.

Выполнить 3 композиции:

1) 2-уровневая иерархия;

2) 3-уровневая иерархия;

3) 5-уровневая иерархия.

Задание № 3. Соразмерность.

Выполнить 3 композиции на различных модульных сетках:

Задание № 4. Повторение целого в его частях.

Выполнить 4 композиции:

1) повторение свойств геометрической формы;

2) повторение пропорциональных свойств;

3) повторение графической фактуры;

4) по выбору автора.

Задание № 5. Единство как результат соблюдения четырех предыдущих принципов.

Выполнить 5 композиций:

1) гармоничная композиция с соблюдением 4 принципов;

2) фрагменты (кадрировки) – не менее 2-х;

3) дополнения и удаления элементов композиции – не менее 2-х.

Общие требования: стремление к соблюдению общих законов композиции в каждом задании.

Элементы – простые геометрические формы, цветность – градации серого, формат в пределах А6.

Техника: графические средства, аппликация, компьютерная графика.

СВОЙСТВА КОМПОЗИЦИИ: СТАТИЧНОСТЬ – ДИНАМИЧНОСТЬ

Динамичность

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

Статичность

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

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

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

Асимметрия – это вариант композиции, сочетание и расположение элементов которой не подчиняется точкам, осям, плоскостям симметрии.

Задание № 1. Статичность.

Выполнить несколько композиций, в которых статичность обеспечивается:

– положением основных осей;

– равновесием и симметрией;

– положением элементов на плоскости;

Задание № 2. Динамичность.

Выполнить несколько композиций, в которых динамичность обеспечи-вается:

– положением основных осей;

– динамическим равновесием и асимметрией;

– положением элементов на плоскости;

Композиции расположить парами «динамичность – статичность» в соот-ветствии с использованным приемом.

Общие требования: стремление к соблюдению общих законов композиции в каждом задании.

Элементы – простые геометрические формы, цветность – градации серого, формат в пределах А6.

Техника: графические средства, аппликация, компьютерная графика.

Механическое удерживание земляных масс: Механическое удерживание земляных масс на склоне обеспечивают контрфорсными сооружениями различных конструкций.

Общие условия выбора системы дренажа: Система дренажа выбирается в зависимости от характера защищаемого.

Источник