что такое симметрия и асимметрия в композиции
Принципы дизайна: композиционное равновесие, симметрия и асимметрия
Сбалансированная композиция кажется правильной. Она смотрится устойчиво и эстетически привлекательно. Хотя какие-то из ее элементов могут особенно выделяться, являясь фокальными точками — ни одна часть не притягивает взгляд настолько, чтобы подавлять остальные. Все элементы сочетаются друг с другом, плавно соединяясь между собой и образуя единое целое.
Несбалансированная композиция вызывает напряжение. Когда дизайн дисгармоничен, отдельные его элементы доминируют над целым, и композиция становится меньше, чем сумма ее частей. Иногда подобная дисгармония может иметь смысл, но чаще всего баланс, упорядоченность и ритм — это лучшее решение.
Баланс физический и визуальный
Несложно понять, что такое баланс с точки зрения физики — мы ощущаем его постоянно: если что-то не сбалансировано, оно неустойчиво. Наверняка в детстве вы качались на качелях-доске — вы на одном конце, ваш друг — на другом. Если вы весили примерно одинаково, вам было легко на них балансировать.
Нижеследующая картинка иллюстрирует баланс: два человека одинакового веса находятся на равном расстоянии от точки опоры, на которой балансируют качели.
Качели в симметричном равновесии
Человек на правом конце доски раскачивает ее по часовой стрелке, а человек на левом — против. Они прикладывают одинаковую силу в противоположных направлениях, так что сумма равна нулю.
Но если бы один человек был намного тяжелее, равновесие бы исчезло.
Эта картинка кажется неправильной, потому что мы знаем, что фигура слева слишком мала, чтобы уравновесить фигуру справа, и правый конец доски должен касаться земли.
Но если передвинуть более крупную фигуру в центр доски, картинка приобретет более правдоподобный вид:
Качели в асимметричном равновесии
Вес более крупной фигуры нивелируется тем, что она расположена ближе к точке опоры, на которой балансируют качели. Если вы когда-нибудь качались на таких качелях или, по крайней мере, видели, как это делают другие, то понимаете, что происходит.
Композиционное равновесие в дизайне основано на тех же принципах. Физическая масса заменяется визуальной, и направление, в котором на нее действует сила притяжения, заменяется визуальным направлением:
1. Визуальная масса — это воспринимаемая масса визуального элемента, мера того, насколько данный элемент страницы привлекает внимание.
2. Визуальное направление — это воспринимаемое направление визуальной силы, в котором, как нам кажется, двигался бы объект, если бы он мог двигаться под влиянием физических сил, действующих на него.
Для измерения этих сил нет инструментов и для расчета зрительного баланса нет формул: чтобы определить, сбалансирована ли композиция, вы ориентируетесь только на свои глаза.
Почему визуальное равновесие важно?
Визуальное равновесие так же значимо, как и физическое: несбалансированная композиция вызывает у зрителя дискомфорт. Посмотрите на вторую иллюстрацию с качелями: она кажется неправильной, потому что мы знаем, что качели должны касаться земли.
С точки зрения маркетинга, визуальная масса — это мера визуального интереса, который вызывает какая-либо область или элемент страницы. Когда лендинг визуально сбалансирован, каждая его часть вызывает некоторый интерес, а сбалансированный дизайн удерживает внимание зрителя.
При отсутствии визуального равновесия посетитель может не увидеть некоторые элементы дизайна — скорее всего, он не станет рассматривать области, уступающие другим по визуальному интересу, так что информация, связанная с ними, останется незамеченной.
Если вы хотите, чтобы пользователи узнали все, что вы намерены им сообщить — подумайте о разработке сбалансированного дизайна.
Четыре типа равновесия
Есть несколько способов добиться композиционного равновесия. Картинки из раздела выше иллюстрируют два из них: первая — пример симметричного баланса, а вторая — асимметричного. Два других типа — радиальный и мозаичный.
1. Симметричное равновесие
Симметричное равновесие достигается, когда объекты, равные по визуальной массе, размещаются на равном расстоянии от точки опоры или оси в центре. Симметричное равновесие вызывает ощущение формальности (поэтому иногда оно называется формальным равновесием) и элегантности. Приглашение на свадьбу — пример композиции, которую вы, скорее всего, захотите сделать симметричной.
Недостаток симметричного равновесия в том, что оно статично и иногда кажется скучным: если половина композиции — это зеркальное отражение другой половины, то как минимум одна половина будет достаточно предсказуема.
2. Асимметричное равновесие
Асимметричное равновесие достигается, когда объекты по разные стороны от центра имеют одинаковую визуальную массу. При этом на одной половине может находиться доминирующий элемент, уравновешенный несколькими менее важными фокальными точками на другой половине. Так, визуально тяжелый элемент (красный круг) на одной стороне уравновешен рядом более легких элементов на другой (синие полосы).
Асимметричное равновесие более динамично и интересно. Оно вызывает ощущение современности, движения, жизни и энергии. Асимметричного равновесия сложнее достичь, потому что отношения между элементами более сложны, но, с другой стороны, оно оставляет больше простора для творчества.
3. Радиальное равновесие
Радиальное равновесие достигается, когда элементы расходятся лучами из общего центра. Лучи солнца или круги на воде после того, как в нее упал камень — это примеры радиального равновесия. Удерживать фокальную точку (точка опоры) легко, поскольку она всегда в центре.
Лучи расходятся из центра и ведут к нему же, делая его самой заметной частью композиции.
4. Мозаичное равновесие
Мозаичное равновесие (или кристаллографический баланс) — это сбалансированный хаос, как на картинах Джексона Поллока. У такой композиции нет выраженных фокальных точек, и все элементы одинаково важны. Отсутствие иерархии, на первый взгляд, создает визуальный шум, но, тем не менее, каким-то образом все элементы сочетаются и образуют единое целое.
Симметрия и асимметрия
И симметрия, и асимметрия может применяться в композиции вне зависимости от того, каков тип ее равновесия: вы можете использовать объекты симметричной формы для создания асимметричной композиции, и наоборот.
Симметрия, как правило, считается красивой и гармоничной. Впрочем, она также может показаться статичной и скучной. Асимметрия обычно представляется более интересной и динамичной, хотя и не всегда красивой.
Симметрия
Зеркальная симметрия (или двусторонняя симметрия) возникает, когда две половины композиции, расположенные по разные стороны от центральной оси, являются зеркальными отражениями друг друга. Скорее всего, услышав слово «симметрия», вы представляете себе именно это.
Направление и ориентация оси могут быть какими угодно, хотя зачастую она или вертикальная, или горизонтальная. Многие естественные формы, растущие или движущиеся параллельно поверхности земли, отличаются зеркальной симметрией. Ее примеры — крылья бабочки и человеческие лица.
Если две половины композиции отражают друг друга абсолютно точно, такая симметрия называется чистой. В большинстве случаев отражения не полностью идентичны, и половины немного отличаются друг от друга. Это неполная симметрия — в жизни она встречается гораздо чаще, чем чистая симметрия.
Круговая симметрия (или радиальная симметрия) возникает, когда объекты располагаются вокруг общего центра. Их количество и угол, под которым они расположены относительно центра, могут быть любыми — симметрия сохраняется, пока присутствует общий центр. Естественные формы, растущие или движущиеся перпендикулярно поверхности земли, отличаются круговой симметрией — например, лепестки подсолнуха. Чередование без отражения может быть использовано, чтобы продемонстрировать мотивацию, скорость или динамичное действие: представьте крутящиеся колеса движущегося автомобиля.
Трансляционная симметрия (или кристаллографическая симметрия) возникает, когда элементы повторяются через определенные промежутки. Пример такой симметрии — повторяющиеся планки забора. Трансляционная симметрия может возникнуть в любом направлении и на любом расстоянии, если направление совпадает. Естественные формы обретают такую симметрию через репродукцию. При помощи трансляционной симметрии вы можете создать ритм, движение, скорость или динамичное действие.
Бабочка — пример зеркальной симметрии, планки забора — трансляционной, подсолнух — круговой.
Симметричные формы чаще всего воспринимаются как фигуры на фоне. Визуальная масса симметричной фигуры будет больше, чем масса асимметричной фигуры подобного размера и формы. Симметрия создает баланс сама по себе, но она может оказаться слишком стабильной и слишком спокойной, неинтересной.
Асимметрия
У асимметричных форм нет такой сбалансированности, как у симметричных, но вы можете и асимметрично уравновесить всю композицию. Асимметрия часто встречается в естественных формах: вы правша или левша, ветки деревьев растут в разных направлениях, облака принимают случайные формы.
Асимметрия приводит к более сложным отношениям между элементами пространства и поэтому считается более интересной, чем симметрия, а значит — ее можно использовать, чтобы привлечь внимание.
Пространство вокруг асимметричных форм более активно: узоры часто непредсказуемы, и в целом у вас больше свободы самовыражения. Обратная сторона асимметрии в том, что ее сложнее сделать сбалансированной.
Вы можете совмещать симметрию и асимметрию и добиваться хороших результатов — создавайте симметричное равновесие асимметричных форм и наоборот, разбивайте симметричную форму случайной меткой, чтобы сделать ее интереснее. Сталкивайте симметрию и асимметрию в композиции, чтобы ее элементы привлекали больше внимания.
Принципы гештальт-психологии
Принципы дизайна не возникают из ничего: они следуют из психологии нашего восприятия визуальной среды. Многие принципы дизайна вырастают из принципов гештальт-психологии, а также основываются друг на друге.
Так, один из принципов гештальт-психологии касается именно симметрии и порядка и может применяться к композиционному равновесию. Впрочем, это едва ли не единственный принцип, применимый к нему.
Другие принципы гештальт-психологии, такие как фокальные точки и простота — складываются в визуальную массу, а фактор хорошего продолжения, фактор общей судьбы и параллелизм, задают визуальное направление. Симметричные формы чаще всего воспринимаются как фигуры на фоне.
Примеры различных подходов к веб-дизайну
Настало время реальных примеров. Лендинги, представленные ниже, сгруппированы по четырем типам равновесия. Возможно, вы воспримите дизайн этих страниц по-другому, и это хорошо: критическое мышление важнее, чем безоговорочное принятие.
Примеры симметричного равновесия
Дизайн сайта Helen & Hard симметричен. Страница «О нас» на скриншоте снизу и все остальные страницы этого сайта сбалансированы похожим образом:
Скриншот страницы «О нас» сайта Helen & Hard
Все элементы, находящиеся по разные стороны вертикальной оси, расположенной в центре страницы, зеркально отражают друг друга. Логотип, навигационная панель, круглые фотографии, заголовок, три колонки текста — центрированы.
Впрочем, симметрия не идеальна: например, колонки содержат разное количество текста. Кстати, обратите внимание на верх страницы. И логотип, и навигационная панель расположены по центру, но визуально они не кажутся центрированными. Возможно, логотип стоило центрировать по амперсанду или, по крайней мере, по области рядом с ним.
В трех текстовых ссылках меню, расположенных в правой части навигационной панели, больше букв, чем в ссылках левой части — кажется, что центр должен располагаться между About и People. Может быть, если расположить эти элементы в действительности не по центру, но так, чтобы визуально они казались центрированными, композиция в целом выглядела бы более сбалансированной.
Домашняя страница Tilde — еще один пример дизайна с симметричным равновесием. Как и на Helen & Hard, все располагается вокруг вертикальной оси, проходящей по центру страницы: навигация, текст, люди на фотографиях.
Скриншот домашней страницы Tilde
Как и в случае с Helen & Hard, симметрия не идеальна: во-первых, центрированные строчки текста не могут быть отражением фотографии снизу, а во-вторых, пара элементов выбивается из общего ряда — стрелка «Meet the Team» указывает вправо, и текст внизу страницы заканчивается еще одной стрелкой вправо. Обе стрелки являются призывами к действию и обе нарушают симметрию, привлекая к себе дополнительное внимание. Кроме того, по цвету обе стрелки контрастируют с фоном, что тоже притягивает взгляд.
Примеры асимметричного равновесия
Домашняя страница Carrie Voldengen демонстрирует асимметричное равновесие вокруг доминирующей симметричной формы. Глядя на композицию в целом, можно увидеть несколько отдельных друг от друга форм:
Скриншот веб-сайта Carrie Voldengen
Большую часть страницы занимает прямоугольник, состоящий из решетки меньших прямоугольных изображений. Сама по себе решетка симметрична и по вертикальной, и по горизонтальной оси и выглядит очень прочной и стабильной — можно даже сказать, что она слишком сбалансирована и выглядит неподвижной.
Блок текста справа нарушает симметрию. Решетке противопоставлен текст и круглый логотип в левом верхнем углу страницы. Эти два элемента имеют примерно равную визуальную массу, воздействующую на решетку с разных сторон. Расстояние до воображаемой точки опоры примерно такое же, как и масса. Блок текста справа больше и темнее, но круглый голубой логотип добавляет веса своей области и даже совпадает с верхним левым углом решетки по цвету. Текст внизу решетки, кажется, свисает с нее, но он достаточно легкий, чтобы не нарушать композиционного равновесия.
Обратите внимание, что пустое пространство тоже кажется сбалансированным. Пустоты слева, сверху и снизу, а также справа под текстом — уравновешивают друг друга. В левой части страницы больше пустого пространства, чем справа, но в правой части есть дополнительное пространство вверху и внизу.
Изображения в шапке страницы Hirondelle USA сменяют друг друга. Скриншот, представленный ниже, был сделан специально для того, чтобы продемонстрировать асимметричное композиционное равновесие.
Скриншот Hirondelle USA
Колонна на фотографии смещена чуть вправо от центра и создает заметную вертикальную линию, поскольку мы знаем, что колонна — это очень тяжелый объект. Перила слева создают прочную связь с левым краем экрана и тоже представляются достаточно надежными.
Текст над перилами как будто опирается на них; к тому же, справа он визуально сбалансирован фотографией мальчика. Может показаться, что перила как бы свисают с колонны, нарушая баланс, но наличие мальчика и более темный фон за ним уравновешивают композицию, а светлый текст восстанавливает баланс в целом.
Золотистого цвета ссылки в левом верхнем и нижнем правом углу создают ощущение трансляционной симметрии, как и кнопка внизу страницы. Белый текст так же повторяется.
Примеры радиального равновесия
Домашняя страница Vlog.it демонстрирует радиальное равновесие, что заметно на скриншоте. Все, кроме объекта в правом верхнем углу, организовано вокруг центра, и три кольца изображений вращаются вокруг центрального круга.
Скриншот домашней страницы Vlog.it
Впрочем, на скриншоте не видно, как страница загружается: линия рисуется из нижнего левого угла экрана к его центру — и с этого момента все, что появляется на странице, вращается вокруг центра или расходится из него лучами, как круги по воде.
Маленький круг в правом верхнем углу добавляет трансляционной симметрии и асимметрии, повышая визуальный интерес к композиции.
На домашней странице Opera’s Shiny Demos нет кругов, но все текстовые ссылки расходятся из общего центра, и легко представить, как вся эта конструкция вращается вокруг одного из центральных квадратов или, может быть, одного из углов:
Скриншот домашней страницы Opera’s Shiny Demos
Название Shiny Demos в левом верхнем углу и логотип Opera в правом нижнем — уравновешивают друг друга и тоже как будто исходят из того же центра, что и текстовые ссылки.
Это хороший пример того, что для достижения радиального равновесия не обязательно использовать круги.
Примеры мозаичного равновесия
Вы можете подумать, что мозаичный баланс используется на сайтах реже всего, особенно после того, как в качестве примера были названы картины Джексона Поллока. Но мозаичное равновесие встречается гораздо чаще, чем кажется.
Яркий пример — домашняя страница Rabbit’s Tale. Разбросанные по экрану буквы определенно создают ощущение хаоса, но композиционное равновесие присутствует.
Скриншот домашней страницы Rabbit’s Tale
Почти равные по величине области цвета и пространства, расположенные с двух сторон, справа и слева — уравновешивают друг друга. Кролик в центре служит точкой опоры. Каждый элемент не привлекает внимания сам по себе.
Сложно разобраться, какие конкретные элементы уравновешивают друг друга, но в целом баланс присутствует. Может быть, визуальная масса правой стороны немного больше, но не настолько, чтобы нарушить равновесие.
Сайты с большим количеством контента, например, новостные порталы или сайты журналов, тоже демонстрируют мозаичное равновесие. Вот скриншот домашней страницы The Onion:
Скриншот домашней страницы The Onion
Здесь множество элементов, их расположение не симметрично, размер текстовых колонок не одинаков, и сложно понять, что уравновешивает что. Блоки содержат разное количество контента, и, следовательно, их размеры различаются. Объекты не располагаются вокруг какого-нибудь общего центра.
Блоки разных размеров и плотности создают некоторое ощущение беспорядка. Поскольку сайт обновляется каждый день, структура этого хаоса постоянно меняется. Но в целом равновесие сохраняется.
Можно посчитать этот пример мозаичного равновесия притянутым за уши, но многие сайты организуют свой контент подобным образом. Хотя, наверное, в основном беспорядок не спланирован специально.
Заключение
Принципы дизайна во многом берут начало из гештальт-психологии и теории восприятия и опираются на то, как мы воспринимаем и интерпретируем окружающую визуальную среду. Например, одна из причин, по которым мы замечаем фокальные точки, заключается в том, что они контрастируют с элементами вокруг них.
Тем не менее, принципы дизайна — это не жесткие правила, которым обязательно надо следовать, а скорее рекомендации. Так, не существует единого способа точно определить визуальную массу того или иного объекта. Вы не обязаны безоговорочно выполнять все описанные выше приемы, но неплохо бы их понимать, хотя бы для того, чтобы нарушать правила осознанно.
Композиционные приёмы
Приёмы в композиции очень разнообразны и служат для достижения разного визуального эффекта. Самое главное достичь композиционной выразительности, чтоб максимально повлиять на зрителя.
К композиционным приёмам относят:
Чтоб выявить сходства и различия в композиционных элементах, можно сравнивать их только по определенным свойствам. Например, только по цвету или фактуре, по размеру или форме.
!Все примеры графического дизайна взяты абсолютно рандомно с просторов интернета!
Визуальный вес
Вы изначально должны понимать, какого баланса в композиции вы хотите достичь — симметричного или асимметричного. Под балансом понимают такое расположение элементов, при котором их визуальный вес распределяется равномерно.
Визуальный вес описывает степень, в которой объект привлекает внимание зрителя и удерживает его.
Тяжелый вес имеют объекты, которые обладают такими свойствами как крупный размер, темные цвета, очень контрастные, сложные или плотные, например, близко расположены друг к другу. Визуальные элементы, расположенные на краю формата, обладают большим визуальным весом, чем элементы в центре. Кроме того, размещение объектов в соответствии с правилом третей увеличивает их визуальный вес.
Легкий вес мы воспринимаем у объектов, которые светлых цветов, небольших размеров, простые по конструкции или менее плотные.
Композиционная гармония строится следующими приёмами:
Симметрия и её виды, асимметрия
Существует два пути достижения баланса в макете — создание симметричных и асимметричных композиций. Когда вы будете понимать, что именно передаёт каждый из подходов, то вам будет легко сделать выбор, отвечающий вашей цели.
Симметрия бывает разных видов
Самая первая, которая приходит на ум многим — это зеркальная или осевая симметрия. Симметрия в одном объекте выражается в том, что если провести ось, то одна половина будет равна другой. Если же ось провести рядом, то один объект повторится рядом с другим. Ось может проходить как угодно. Но в дизайне симметрию можно рассмотреть более абстрактно, если мы объекты объединим в формы, то эти формы будут располагаться симметрично, тем самым создавая полное равновесие.
Центральная симметрия — это когда мы, рядом с объектом ставим точку «О» и относительно неё перемещаем копию объекта. Расстояние всех точек исходного объекта до точки «О» равняется такому же расстоянию всех точек копии объекта до той же точки «О».
Вращательная симметрия. Хорошим примером такой симметрии служит винтовая лестница. Т.е. объект дублируется, относительно какой-то точки по вращательной. При этом объект может увеличиваться.
Димметрия получается тогда, когда у нас есть симметричный объект или несколько объектов и в каком-то месте будет отличие. Но в целом объект будет оставаться симметричным.
Антисимметрия — это когда объекты симметричны в общем, но обладают каким-то противоположным свойством или качеством.
Зеркальная или осевая симметрия наиболее привлекательная в графическом дизайне и чаще других применяется. Это тот тип баланса, который создаёт ощущение стабильности и гармонии, отражает состояние покоя и равновесия. Симметричный дизайн представляет собой формальный подход к компоновке, которая выглядит эстетично. Определенная простота и узнаваемость симметрии позволяет легко расшифровывать передаваемое сообщение аудитории. Недостатком симметричной компоновки служит её инертность. Пустое пространство вокруг элементов может выглядеть лишним, незаконченным, а не намеренно оставленным. С симметричным дизайном сложнее создать акцент или фокусную точку. Чаще всего этому служит самый крупный объект в центре, но если такого нет, то дизайн может выглядеть пресным и скучным.
Симметрия уместна, если вы стремитесь к гармоничному, спокойному дизайну.
Асимметрия
Асимметрия — это отсутствие какой бы то ни было симметрии. Идеальной асимметрией является такая композиция, которая построена на золотом сечении.
Асимметрия вносит напряжение и нестабильность, что вызывает у зрителей интерес. При асимметрии вы лучше можете заполнить пространство, и не останется пустых дыр. Асимметрия практически превращает негативное пространство в часть дизайна. Даже если асимметричная компоновка является неравномерной, можно создать баланс с помощью элементов по обе стороны оси, которые будут служить друг другу противовесом. Но достижение баланса в асимметричных композициях не является обязательным и она целенаправленно может быть создана напряженной. В таком случае она вызовет чувство дискомфорта и тревоги у зрителя. Возможно этого и требует тема дизайна.
И симметрия и асимметрия, по сути, могут передать нужный вам смысл. Они вызывают различные эмоции. Симметричный дизайн, как правило, статичен и создаёт спокойную для восприятия композицию. Асимметричный дизайн имеет активную и динамичную композицию.
Как достичь гармонии в отношении «Симметрия — асимметрия»
Чтобы сохранить целостность и гармонию в асимметричной композиции, их фактическую неуравновешенность следует устранить визуальным равновесием формы, например по размеру или цвету. Т.е. хоть что-то должно связывать эти объекты вместе. Ось должна проходить через композиционный центр.
Чтобы сохранить целостность и гармонию в симметричной композиции с несколькими композиционными осями, нужно найти правильное соотношение, например, между главной осью и второстепенными. Их можно сблизить, им можно придать общее направление и т.д. В общем тоже чем-то объединить, при этом надо создать иерархию в объектах, выделить главное и соподчинить второстепенное.
Чтобы сохранить целостность и гармонию в композиции, которая включает и симметрию и асимметрию, ассиметричные части нужно соподчинить главной асимметричной форме. Главный элемент может быть симметричен относительно общей формы, а части асимметричны, или, наоборот.
Контраст, нюанс и тождество
Контраст
Контраст в дизайне может выражаться:
Контраст применяют для выделения определённых элементов, композиционного центра, либо расстановки акцентов. Контраст применяется для повышения выразительности и интереса. Как правило, вся важная информация выделяется с помощью контраста.
Нюанс
Нюанс это небольшое и незначительное отличие в объектах.
Нюанс может быть в:
Он вносит легкое разнообразие, разбавляет монотонность и однотипность. Если в дизайне многие свойства будут построены на нюансах, то тогда создастся впечатление единства, целостности. Но если слишком много будет нюансов, без контрастов, то есть вероятность получить пресный и скучный дизайн.
Тождество
Тождество — это равенство свойств и характеристик. Применяется для того, чтобы уравновесить композицию, придать объектам какие-то общие свойства.
Существуют степени сходства и различия в паре нюанс—контраст.
Применяют эти характеристики в дизайне по разному
Метр и ритм
Также ещё употребляют термины метрический ряд и ритмический ряд.
Метрический ряд — это когда объект повторяется без изменений на равных промежутках. На основе метрического ряда строится повторение, например, колонны у здания или орнамент. Метр основан на повторении равных элементов, что придаёт форме ясность и четкость, и делает её более доступной для восприятия. Чередование однотипных элементов похоже на чередование музыкальных тактов.
Метрический ряд очень стабилен, создаёт однообразие, равновесие и статичность.
Главная опасность при составлении метрических композиций — это их монотонность.
Чтобы избежать монотонности, можно:
Если вам нужен спокойный, уравновешенный дизайн, если надо что-то структурировать, то можно элементы пустить метрическим рядом.
Ритмический ряд — это повторение объекта с изменяющимися свойствами. Как правило, меняется расстояние между объектами, но также могут меняться свойства и характеристики объекта. Ритмический ряд изменчив, динамичен, нестабилен.
Ритмический порядок может быть строгим и свободным.
Ещё один способ организации ритмической композиции — изменение величины отдельных элементов. Если нарастание происходит плавно, композиция воспринимается как «спокойная». Если редко — как «напряженная».
Если нужно сделать форму более легкой, достаточно постепенно уменьшить интервалы между элементами. А чтобы сделать форму более тяжелой можно постепенно увеличить интервалы.
Основными видами ритмических построений являются:
Если ваш дизайн должен отображать изменчивость, динамичность, тогда вы можете создать ритмический ряд из объектов.
Статика и динамика
Статика — это статичность композиции, она уравновешена, неподвижна.
Динамика — это динамичность в композиции, когда элементы располагаются так, что создают направление куда-то. Динамика неуравновешена, асимметрична.
Статика часто присутствует там, где дизайн должен выражать устойчивость, стабильность, надежность. Характерны такие графические стили, как классика, ампир, некоторые ретро стили.
Динамика часто сопровождает темы, где нужно продемонстрировать движение, извилистость, действие, стремление. Часто присутствует там, где есть какой-то визуальный акцент, который не совпадает с геометричным центром.
Формы могут быть в разном состоянии:
Зрительно и физически статичные такие формы как квадрат, прямоугольник, параллелепипед, положенный на широкое основание, куб, пирамида и т.д.
Композиции со статичными формами получаются симметричными, метрическими, с незначительным смещением элементов, с облегченным верхом, с незначительными скосами элементов, горизонтального членения, равного расположения элементов, с крупными сближенными элементами, с крупным главным элементом, с выделенным центром.
Воспринимаются как предельно статичные и монументальные.
Физически статичные, зрительно динамичные — это стационарные формы, устремленные в одном направлении, с нарушением симметрии и т.д.
Композиция получается со смещенными от центра осями, ритмического характера с перпендикулярно расположенными элементами, с облегченным низом, искривленного вида, с диагональным членением, со свободно расположенными элементами, с вытянутыми элементами, с наклонным расположением элементов, включенные в открытое пространство.
Воспринимаются как неуравновешенные.
Зрительно статичные, но физически частично динамичные формы. Основа композиции устойчива, двигаются отдельные элементы, например, какие-то детали на объемной физической форме, или анимация на сайтах и прочее. В целом композиция считается статичной.
Зрительно и физически полностью динамичные формы, например, транспортные средства. К таким динамичным формам относятся все, которые могут перемещаться в пространстве. Они сами могут изменяться или их структура может меняться.
Воспринимаются как динамичные и стремительные.
Открытая и закрытая композиция
Открытая композиция ничем не ограничивается. Композиция может свободно выйти за пределы формата. Взгляд, как правило, может скользить от центра к краям и выходит за их пределы. Вектор от центра к внешним краям.
Закрытая композиция закрывается по краям. И там взгляд скользит от ограничений внутрь, в центр композиции. И она строится таким образом, чтоб акцент был в центре композиции. Все остальное служит рамками.
Равновесие в композиции (Отношение — пропорции)
Равновесие в композиции — это визуальное заполнение пространства, которое распределяется равномерно. При равновесии недопустимы слишком большие пустые пространства и композиционный перевес каких-то областей. Равновесие может быть выражено в размерах объекта, их расположении, цвете, фактуре.
Размер и масштаб
Размер — это характеристика величины формы и её внешнего состояния. Выражает абсолютную величину формы.
Масштаб — соизмерения одной формы относительно другой исходной величины. Масштаб выражает относительную величину формы. Размерный масштаб показывает отношение естественного размера к изображенному. Например, создавая уменьшенную копию используют численный масштаб 1:5 или 1:100 и т.д. Но можно использовать и линейный масштаб, когда линию делят на отрезки, которые уменьшают или увеличивают в несколько раз относительно исходной величины.
Основными примерами масштабной корректировки (укрупнения и размельчения) формы являются:
Все композиционные приёмы работают вместе и нельзя отделять одни от других. Элементам в дизайне придаются разные свойства, чтоб достичь нужного визуального эффекта и восприятия. У каждого дизайна своя целевая аудитория и он должен воздействовать именно на неё. С помощью композиционных приёмов усиливают послание, которое не всегда подкрепляется текстовой частью, а держится только на визуальных характеристиках.
Теперь у меня появилась страница на Facebook. Если вам интересна эта тема, можете присоединиться и следить за выходом новых статей. Буду рада вас видеть 🙂