Гармоничная композиция что это
Создание гармоничной композиции в дизайне сайта: основные правила, примеры
Зачем нужна композиция и структура
Для начала разберемся, что такое композиция и почему она так важна в дизайне.
Почему гармоничная композиция так важна в дизайне сайтов?
Существуют некоторые правила, благодаря которым можно создать гармоничную композицию на сайте и сделать структуру еще одним эффективным инструментом повышения конверсии. Рассмотрим основные принципы и приведем примеры реальных ресурсов, которые смогут проиллюстрировать данные правила.
Основные принципы создания композиции на сайте
Ощущение гармонии и правильно организованный контент, подобранное расположение элементов и разработанная структура дают возможность не только увеличить прибыль ресурса, но и воплотить идеи дизайнеров, соблюдая принципы юзабилити. Рассмотрим основные приемы, благодаря которым можно создать гармоничную композицию и тем самым расположить к себе клиентов сайта.
Правильная цветовая гамма
От подобранной цветовой схемы зависит впечатление пользователей от дизайна и сайта в целом. Также с помощью цветов можно обращать внимание на нужные элементы, цвет является одной из основ построения композиции. Объясним на примере.
Допустим, у нас есть несколько одинаковых элементов. Они ничем не отличаются ни по размеру, ни по цвету, ни по форме:
Однако, если мы сделаем цветовой акцент, картинка станет восприниматься совершенно по-другому:
Этот прием используют при создании композиции. Когда нужно выделить какой-то важный элемент, уравновесить структуру или просто сделать акцент на детали:
Баланс
На примере мы видим множество одинаковых блоков, которые расположены симметрично относительно центра макета.
Также бывает ассиметричная композиция, где блоки различны по размерам и типу, но составляют собой единое целое:
Здесь мы видим человека, который смотрит в правую сторону. На правой части макета расположена крупная надпись, которая уравновешивается заголовком и большим блоком текста в левой части страницы. Даже маленькие иконки и логотип расположены симметрично друг другу. Соблюдая баланс, дизайнер создал приятную атмосферу, где все элементы расположены на своих местах.
Кроме симметричного/ассиметричного расположения элементов важно также соблюдать пропорции и масштаб объектов. Например:
На примере мы видим, как большая иллюстрация уравновешивается маленькими текстовыми элементами. Большая буква D выступает ориентиром и определяет центр всего макета.
Правило третьей
Необязательно использовать данное правило каждый раз, когда дизайнер создает макет. Однако, данный подход является отличным инструментом для создания гармоничной композиции и поиска оптимальных решений. Пример использования правила:
Наличие белого пространства
Пустое пространство на примере является частью композиции сайта. На ресурсе используется горизонтальный скроллинг, поэтому с помощью пространства мы понимаем, что слайдшоу будет продолжаться. Большие интервалы создают ощущение легкости, что влияет на восприятие контента и атмосферу на сайте в целом. Более подробно о белом пространстве мы писали в этой статье.
Иерархия
Дополняющие элементы
Взаимодополняющие элементы в дизайне делают страницу не только гармоничной с точки зрения структуры, но и невероятно стильной и привлекающей внимание. Что такое дополняющие элементы:
Например, на сайте одежды используются фото из одной фотосессии:
В совокупности с симметричной композицией сайт смотрится стильно, запоминается, привлекает внимание.
Типографику тоже стоит подбирать в том же стиле, что и изображения и другие элементы. Так детали, которые будут дополнять друг друга, станут единым целым и оставят приятное впечатление о дизайне.
Повторение
Повторение сопутствует успешной композиции сайта. Чтобы макет выглядел согласованным и последовательным, нужно использовать одинаковые или похожие элементы на протяжении всей страницы. Этот прием позволяет «перетекать» из одного экрана в другой и создавать ощущение целостности. Также данный подход приветствуется при создании дизайна многостраничных сайтов. Если страницы не согласованы между собой, значительно отличаются друг от друга по дизайну и не составляют единую концепцию, пользователь может перестать легко ориентироваться на сайте и в конце концов уйти с ресурса.
Здесь мы видим одинаковые карточки, которые ведут на определенные страницы с турами. Такие элементы повторяются в каждом блоке и создают единый стиль сайта.
Структура и внимание к деталям
Что такое четкая структура? Больше данный термин относится к навигации сайта. Контент, навигационные элементы, призывы к действию расположены таким образом, что сразу становится понятно, какую функцию выполняет тот или иной элемент. Блоки расположены по четким линиям, соблюдены одинаковые интервалы (если речь идет о симметричной композиции), текст и изображения распределены по разным блокам и объединяются по смыслу. Например:
Добиться такой четкой структуры можно с помощью модульных сеток. Макет разделяется на несколько невидимых пользователю колонок, элементы располагаются в соответствии с невидимыми линиями. Так можно добиться одинаковых интервалов, оставить место под пустое пространство и создать четко выверенные колонки с контентом. Больше о модульных сетках можно прочитать в этой статье.
Концепция страницы
Управление вниманием пользователя
1. Использование фотографий человека
2. Выделение цветом
3. Движение
Как правило, анимация также привлекает внимание пользователя. Увидев движение на макете, взгляд тут же перемещается на объект. Использование анимации также стоит учитывать при создании гармоничной композиции на сайте и уделять внимание балансу.
Студия дизайна IDBI разрабатывает дизайн сайтов с учетом правил и принципов создания гармоничной композиции на макете. Мы уделяем внимание цветовой гамме, используем модульные сетки и предлагаем как традиционные, так и нестандартные решения. Наши работы можно посмотреть в разделе «Портфолио».
Разбираемся в законах композиции за 10 минут
Законы композиции пригодятся иллюстраторам, визуализаторам и дизайнерам. Чтобы узнать все самое необходимое, достаточно нашей статьи.
Любая дизайнерская работа, будь то иллюстрация, визуализация или
3D-сцена, начинается с построения композиции.
Связь между объектами
Построение композиции стоит начинать с распределения ролей задействованных объектов. Если каждый из них будет притягивать внимание в равной степени, то зритель просто растеряется и не поймет, чему посвящена картинка, и, скорее всего, посчитает ее неинтересной. Именно поэтому важно подчеркнуть главный объект визуализации и, уже отталкиваясь от него, строить композицию, пользуясь приемами привлечения внимания, о которых мы поговорим ниже.
Золотое сечение
Про принцип построения композиции на основе золотого сечения слышали даже те, кто не имеет ничего общего с миром искусства. Интересно, что он использовался еще древними египтянами при строительстве пирамид, хотя историки и спорят о том, насколько осознанно жители Древнего Египта применяли золотое сечение.
Первое упоминание принципа связывают с именем Евклида, который применил золотое сечение для построения правильного прямоугольника. В искусстве принцип получил широкое распространение начиная с Леонардо да Винчи — наверняка вы знаете его легендарный рисунок «Витрувианский человек», наглядно демонстрирующий связь этого принципа с пропорциями человеческого тела.
Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.
ОСНОВЫ КОМПОЗИЦИИ | Часть №2
Основные принципы (законы) композиции:
— целостность,
— равновесие,
— соподчиненность, подчиненность второстепенного главному, то есть наличие доминанты;
Если взять такую фигуру, как круг, и расположить его в геометрическом центре плоскости, то, казалось бы, должен получиться эффект наиболее устойчивого равновесия. Но зрительно круг воспринимается сдвинутым немного вниз.
По законам зрительного восприятия, в силу оптических иллюзий глаз переоценивает верхнюю часть и недооценивает нижнюю часть плоскости, поэтому любую фигуру, чтобы она казалась расположенной в центре, необходимо немного поднять вверх.
На вес изобразительных элементов влияет их форма.
Геометрически правильная форма воспринимается тяжелее, чем неправильная. Самой тяжелой фигурой является квадрат в устойчивом положении. Треугольник устойчив в том положении, когда одна его сторона совпадает с горизонталью плоскости.
Мозг человека может одновременно активно воспринять не более 5-7 элементов или групп. При большом количестве элементов композиция не воспринимается как целое и кажется раздробленной. Потребность «организовать», «группировать» элементы формы является свойством человеческой психики.
Правила группировок основаны на применении «принципа подобия». Группирующий эффект может возникать в нашем сознании путем:
• «подобия по размерам»,
• «подобия на основе формы»,
• «подобия по скорости»,
• «подобия света и цвета»,
• «подобия по расположению» (правилом близости или родства),
• «подобия пространственной ориентации»,
• «подобия по направлению».
✔️ КОМПОЗИЦИОННЫЙ ЦЕНТР
• Поддержкой называют второстепенные элементы/мотивы, которые поддерживают композиционный центр. Поддержка всегда менее активна, чем главный композиционный элемент.
Композиция и зрительная гармония
Композиция — одно из важнейших средств создания художественной формы в искусстве, без которого не может быть выражено содержание произведения, смысл художественной формы.
Вы наверняка не раз обращали внимание на изображения, причем не обязательно фотографические, которые приятны взгляду безотносительно к содержанию. Их как правило можно перевернуть, отразить в зеркале, а иногда даже и обесцветить, не нарушив при этом зрительной привлекательности. Чем же объясняется такая «устойчивость» эмоционального восприятия? О фотографиях, имеющих подобные свойства, говорят, что в них присутствует визуальная гармония, и причина ее — в особом расположении элементов по полю изображения, или гармоничной композиции. Слово композиция происходит от латинского сompositio — «составление». Правила художественной композиции были разработаны еще в античности и с тех пор практически не изменились. Они настолько универсальны, что зритель любого возраста, пола, расы и вероисповедания в состоянии отличить сильную композицию от слабой. Гармоничная композиции может иметь различные пространственные основы: пропорцию, симметрию, ритм, контраст, перспективу.
Главное, о чем следует помнить: композиция — важнейший элемент художественной формы, придающий произведению единство и цельность.
Композиция — одно из важнейших средств создания художественной формы в искусстве, без которого не может быть выражено содержание произведения, смысл художественной формы. В этом уроке мы рассмотрим принципы работы с композицией
Композиционное построение включает:
— выяснение центра композиции и подчинение ему других частей произведения;
— объединение отдельных частей произведения в гармоническом единстве;
— соподчинение и группировка с целью достичь выразительности и пластической целостности произведения.
О НАСЛЕДИИ ДРЕВНИХ ГРЕКОВ
Учение о гармонии берет свое начало в Древней Греции. Наиболее глубокий след в мировой культуре оставили пифагорейцы. Последователи Пифагора представляли вселенную, включая человека, как единое целое, в котором все гармонично взаимосвязано. Пытаясь математически обосновать идею единства мира, пифагорейцы утверждали, что в основе мироздания лежат симметричные геометрические формы. Они фактически ввели понятие пропорции как основы гармоничности. На основе пропорций человеческого тела последователи Пифагора утвердили математический канон красоты, по которому скульптор Поликлет создал статую «Канон». Существуют разные виды пропорций, но для нас наиболее важен частный случай геометрической пропорции, получивший название «золотое сечение»: a:b=b:(a+b). Отрезок a относится к большему отрезку b так же, как b относится к отрезку суммарной длины a+b. Отношение золотого сечения выражается числом 0,618. Если отрезок прямой выразить через единицу, а затем разделить его на два отрезка по золотому сечению, то больший отрезок будет равен 0,618, а меньший — 0,382.
На плоскости золотое сечение — это прямоугольник со сторонами в пропорции 1:0,618, который можно получить геометрическим построением, показанным на рис. 1.
Если стороны AB и AD прямоугольника ABCD относятся друг к другу в пропорции золотого сечения, грубо — 5:8 (что очень близко к размеру кадра), а отрезок CE перпендикулярен диагонали BD, то проекция из точки Е на сторону AD делит ее в той же пропорции, то есть FD:AF=5:8. Если расположить структурные элементы изображения в получившихся треугольниках, а диагонали — вдоль разделяющих отрезков, то результат будет радовать глаз, чем бы эти треугольники ни были наполнены (рис. 2). Диагонально-треугольная композиция часто встречается в пейзажной фотографии (фото 1).
Упрощенный вариант использования золотого сечения — правило трех третей. Оно является полезным в практике приближением, потому что строится гораздо проще золотого сечения и в большинстве случаев работает не менее эффективно. Согласно правилу третей, гармоничная композиция создается помещением структурных элементов в точки пересечения линий, разделяющих поле изображения на девять почти равных прямоугольников.
При построении кадра нужно помнить о разнице между восприятием живого глаза и неодушевленного объектива и стараться при компоновке изображения внимательно следить не только за объектом съемки, но и за всем, что находится в пределах видоискателя
КОМПОЗИЦИЯ И ПЕРСПЕКТИВА
Как вы помните по лекции о свойствах оптических систем, объективы делятся на три категории: короткофокусные (широкоугольные), нормальные и длиннофокусные (телеобъективы). Мы уже говорили о том, что для каждой из них характерны определенные искажения перспективы, которые обусловлены тем, где находится так называемая точка схождения. Что такое точка схождения, легко понять, представив себе ряд находящихся на равных расстояниях друг от друга одинаковых объектов, расположенных вдоль оптической оси. Наглядным примером будет ряд столбов, стоящих вдоль дороги, уходящей вдаль. Первый столб, находящийся рядом с вами, будет большим, второй — поменьше, третий — еще меньше, и так далее. Если через основания и верхушки столбов провести две воображаемые прямые, то они пересекутся как раз в той самой точке схождения. Находящийся в ней столб не имеет видимых линейных размеров, иными словами, он для зрителя превращается в точку (фото 2). Широкоугольные объективы приближают точку схождения, то есть объекты, расположенные рядом с фотоаппаратом, будут казаться преувеличенно большими, а те, что вдали, — слишком маленькими. Это делает изображение динамичным вне зависимости от сюжета (фото 3).
Телеобъективы, напротив, удаляют точку схождения, и расстояния между объектами, находящимися на оси, непараллельной плоскости кадра (или, как говорят, в разных планах), кажутся меньше, чем они есть на самом деле. Понимание вышеописанных свойств дает фотографу возможность строить сложные, так называемые многоплановые изображения.
О ТУННЕЛЬНОМ ЗРЕНИИ
Может показаться удивительным, сколько любительских фотографий построено совершенно идентично: главный объект — точно в центре кадра, занимает он там примерно одну десятую общей площади, а все остальное пространство заполнено мусором, не имеющим совершенно никакого отношения к сюжету. На самом деле ничего странного тут нет. Объясняется это явление тем, что часть визуальной информации мозг блокирует, помогая своему владельцу сконцентрироваться на интересующем его объекте. Кстати сказать, то же самое происходит с фоновым шумом любого происхождения. Если бы не это, мы бы наверняка уплыли в страну безумия, влекомые ошеломляющим потоком зрительных образов, звуков, запахов, вкусовых оттенков и тактильных ощущений. Но, к сожалению, то, что помогает в жизни нормальному человеку, играет злую шутку с теми, кто смотрит на мир через видоискатель фотоаппарата. Художник-живописец, например, рисует то, что видит, то есть замечает. Следовательно, фоновая информация, заботливо заблокированная его мозгом, остается ненарисованной, а главный объект занимает господствующее положение на холсте. У фотографов же все по-другому. Когда они чего-то не замечают, объектив об этом не догадывается и предательски фиксирует все, что попало в поле его зрения. Это влечет за собой две неприятности: во-первых, в кадре оказывается масса никому не нужной ерунды, в которой объект съемки теряется, как ребенок в универмаге, а во-вторых, центр интереса оказывается точно в середине изображения, что в большинстве случаев создает статичную и в то же время напряженную композицию, неприятную глазу.
Рассуждая о многоплановой композиции, я хотел бы передать близко к тексту сказанное как-то Сергеем Максимишиным, известным фотожурналистом и талантливым фотографом: новичок фотографирует сюжет «ехал Ваня на коне», фотограф поопытнее усложняет композицию вторым планом и снимает карточку «ехал Ваня на коне, вел собачку на ремне», а совсем уж опытный и хитрый фотограф добавляет третий план, в котором «старушка в это время мыла фикус на окне». Таким образом, прожженный фотожурналист не только создает сложное изображение, в котором основной объект каждого плана находится в композиционно важной точке, но и делает сюжет более занимательным, вводя в него конфликт (Ваня и собачка заняты одним, а старушка — совершенно другим). Рассмотрите фото 5.
Основная задача фотографа в процессе компоновки изображения — заставить взгляд зрителя оставаться в пределах фотографии как можно дольше. Многоплановая композиция с правильным расположением элементов подходит для этого как нельзя лучше. Если объекты в кадре нанизаны, словно шашлык на палочку, то взгляд проносится по ним со скоростью и неостановимостью бронепоезда. В результате через несколько минут зритель уже не помнит, что было на фотографии. Расположение объектов вдоль ломаной линии или — еще лучше — спирали заставляет зрителя кружить взглядом по фотографии гораздо дольше.
КОМПОЗИЦИЯ И ЭМОЦИИ
Наверняка вы замечали, что некоторые фотографии не просто несут какую-то информацию, но еще и вызывают эмоции. Более того, существуют изображения, которые заставляют зрителя переживать, грустить или радоваться при полном отсутствии сюжета. Секрет таких работ в том, что эмоциональное воздействие оказывает не только информация, содержащаяся в изображении, но и взаимодействие визуальных элементов, обусловленное их взаимным расположением в кадре.
Если композиционно важные элементы расположены в кадре таким образом, что взгляд переходит с одного на другой без скачков и движется по плавной кривой, то такая фотография воспринимается без напряжения и имеет успокаивающий эффект. Он выражен особенно сильно, если в основе композиции лежит S-образная кривая (фото 6, 7) или в разных планах есть пологие диагонали, встречно пересекающие кадр (фото 8).
Параллельные диагонали, в отличие от встречных, делают изображение динамичным. Если действовать осмысленно, то можно успешно сочетать в одном изображении разные композиционные элементы. При этом общий психологический эффект будет определяться совокупным воздействием всех элементов.
При построении кадра нужно помнить о разнице между восприятием живого глаза и неодушевленного объектива и стараться при компоновке изображения внимательно следить не только за объектом съемки, но и за всем, что находится в пределах видоискателя. Исключением, в некотором смысле, можно считать «ковровую» композицию, целиком состоящую из «мусора». Гармоничность здесь достигается повторяющимися элементами и контрастами (фото 9).
Хорошее упражнение на фотографическое внимание: поймав объект в кадр, подходите к нему до тех пор, пока все ненужное останется за пределами видоискателя, и выбирайте такой ракурс, чтобы главный объект оказался не в центре поля изображения, а в точке пересечения линий золотого сечения. Хотелось бы подчеркнуть, что на первом этапе обучения фотографии лучше не пользоваться оптикой с переменным фокусным расстоянием, а снимать штатным объективом. Напомню, что штатный объектив — это тот, фокусное расстояние которого примерно равно диагонали кадра. Таким образом, в мире это будет примерно 50 мм (для особо въедливых — 43 мм), в среднем формате 6×6 см штатным будет объектив с фокусным расстоянием 80 мм, а для цифровой камеры с сенсором формата APS это 35 мм. Фотография, сделанная штатным объективом, имеет важную особенность: перспектива на ней очень близка к тому, как видит человеческий глаз.
Компонуя изображение таким образом, чтобы взгляд вынужден был перепрыгивать с одного элемента на другой или резко менять направление, можно добиться ощущения напряжения и беспокойства, которое легко усилить, нарушив композиционный баланс. Однако, наклоняя горизонт, зрителю нужно дать понять, что сделано это специально. На фото 10 это достигнуто идеально вертикальным расположением статуи и деревьев в третьем и четвертом планах.
Основная задача фотографа в процессе компоновки изображения — заставить взгляд зрителя оставаться в пределах фотографии как можно дольше
КОМПОЗИЦИЯ И УПРАВЛЕНИЕ ВНИМАНИЕМ
Если вы еще не слышали, что главный объект должен занимать в кадре не менее 60% площади, а остальные 40% должны по крайней мере от него не отвлекать, то услышите не раз. На самом деле это очередной пример сочетания твердолобого догматизма с примитивным пониманием действительности. Правильно используя законы композиции, можно привлечь внимание зрителя даже к одному лицу в огромной толпе или к нескольким объектам в разных частях кадра. Сделать это можно несколькими способами. Самым простым и часто используемым является включение в кадр диагоналей, ведущих к центру интереса или как бы проходящих сквозь него. Помимо этого, объект можно выделить цветом или тоном, а также заключить его в рамку, присутствующую в кадре на правах самостоятельного структурного элемента. Фотография на фото 11 являет собой пример одновременного применения всех упомянутых способов. Использование сразу нескольких композиционных приемов в этой фотографии не случайно. Явление синергизма, с которым вы еще не раз столкнетесь в этом курсе, проявляет себя в том, что кумулятивный эффект сильнее, чем простая сумма составляющих. Важно здесь еще то, что эффект, достигнутый применением чисто композиционных приемов, усиливается выражением лица модели, то есть элементом смысловым. Частным случаем ритмической структуры (то есть последовательности повторяющихся элементов) можно считать и включение в кадр двух или трех конгруэнтных фигур.
Количество сюжетно значимых объектов в кадре имеет существенное значение. Если это один или два объекта сюжет, как правило, простой и добиться эмоциональной выразительности весьма сложно. Если в композиции много элементов связанных отношениями, сознанию сложно воспринимать такой образ.
Удобнее всего при постороении композиции считать до трех. Число 3 обладает особыми семантическими свойствами, которыми мы пользуемся, сами того не сознавая, практически с самого рождения. Драматическая история о трех поросятах, беседа трех девиц под окном, приключения трех богатырей по нашу сторону границы и трех мушкетеров по противоположную навсегда застряли в мозговых извилинах любого мало-мальски грамотного человека. Даже те, кто не знает, кто такой Посейдон, прекрасно разбираются в количестве зубцов на символе владения подводным царством, а не читавшие Ремарка кучкуются по трое в подворотнях с целью совершенно определенной. Причиной психологической важности числа 3 является то, что оно резко снижает возможность случайности происходящего. Например, случайное столкновение двух знакомых на улице — явление достаточно частое, но непреднамеренная встреча трех как правило вызывает очень сильное удивление, а иногда и подозрение, в зависимости от результатов и последствий этого примечательного события. Та же простая логика применима и при построении фотографического изображения. Если в нем присутствуют всего два похожих предмета, зритель может и не подумать, что так было задумано, но когда повторений три, ему понадобятся дополнительные усилия, чтобы не заметить преднамеренности. Более подробно о неявных элементах изображения мы поговорим позже, в курсе «Фотография как средство художественного повествования».
ВМЕСТО ЗАКЛЮЧЕНИЯ
Хорошему фотографу не нужно делить кадр воображаемыми линиями и потом раскладывать картинку по получившимся треугольникам. Вместо этого он руководствуется внутренним голосом, который шепчет ему в нужный момент: жми кнопку прямо сейчас! Как правило фотография, сделанная по команде этого голоса, интереснее, глубже и непринужденнее той, что выверена микрометром и транспортиром. Поэтому во время съемки лучше руководствоваться чувствами, а анализировать результаты (если захочется, конечно) уже потом, изучая отпечаток или глядя на компьютерный экран.
_______________________
Читайте также: