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

Posted on by riasevastopol

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

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

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

  • подобия и Принципы контраста как средства ясности в веб-дизайне

Баланс физический и визуальный

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

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

Качели в симметричном равновесии

Человек на правом финише доски раскачивает ее по часовой стрелке, а человек на левом — против. Они прикладывают однообразную силу в противоположных направлениях, так что сумма равна нулю.

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

Отсутствие равновесия

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

Но в случае если передвинуть более большую фигуру в центр доски, картина купит более похожий на правду вид:

Качели в асимметричном равновесии

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

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

1. Визуальная масса — это принимаемая масса визуального элемента, мера того, как этот элемент страницы завлекает внимание.

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

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

  • 3 уровня визуального и эмоционального дизайна посадочных страниц

Из-за чего визуальное равновесие принципиально важно?

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

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

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

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

  • Дизайн лендинг пейдж: 6 основных трендов 2015 года

Четыре типа равновесия

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

1. Симметричное равновесие

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

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

2. Асимметричное равновесие

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

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

3. Радиальное равновесие

Радиальное равновесие достигается, в то время, когда элементы расходятся лучами из неспециализированного центра. Лучи солнца либо круги на воде по окончании того, как в нее упал камень — это примеры радиального равновесия. Удерживать фокальную точку (точка опоры) легко, потому, что она неизменно в центре.

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

4. Мозаичное равновесие

Мозаичное равновесие (либо кристаллографический баланс) — это сбалансированный хаос, как на картинах Джексона Поллока. У таковой композиции нет выраженных фокальных точек, и все элементы одинаково ответственны. Отсутствие иерархии, на первый взгляд, формирует визуальный шум, но, однако, каким-то образом все элементы сочетаются и образуют единое целое.

  • 5 правил оформления визуального контента: рекомендации от издательства «МИФ»

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

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

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

Симметрия

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

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

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

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

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

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

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

Бабочка — пример зеркальной симметрии, планки забора — трансляционной, подсолнух — круговой.

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

Асимметрия

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

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

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

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

  • Привлеките внимание за счет дизайна, либо Принцип 3W!

Правила гештальт-психологии

Правила дизайна не появляются из ничего: они следуют из психологии отечественного восприятия визуальной среды. Многие правила дизайна вырастают из правил гештальт-психологии, и основываются приятель на приятеле.

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

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

  • применение принципов и Визуальное восприятие гештальта в веб-дизайне

Примеры разных подходов к веб-дизайну

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

Примеры симметричного равновесия

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

Скриншот страницы «О нас» сайта HelenHard

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

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

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

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

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

Скриншот домашней страницы Tilde

Как и при с HelenHard, симметрия не совершенна: во-первых, центрированные строки текста не смогут быть отражением фотографии снизу, а во-вторых, пара элементов выбивается из неспециализированного последовательности — стрелка «Meet the Team» показывает вправо, и текст внизу страницы заканчивается еще одной стрелкой вправо. Обе стрелки являются призывами к действию и обе нарушают симметрию, завлекая к себе дополнительное внимание. Помимо этого, по цвету обе стрелки контрастируют с фоном, что также притягивает взор.

  • Баланс контента и дизайна: формула высокой конверсии лендинг пейдж

Примеры асимметричного равновесия

Домашняя страница Carrie Voldengen демонстрирует асимметричное равновесие около главной симметричной формы. Глядя на композицию в целом, возможно заметить пара отдельных друг от друга форм:

Скриншот сайта Carrie Voldengen

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

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

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

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

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

Скриншот Hirondelle США

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

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

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

  • Как навести порядок на целевой странице, либо О важности пробелов

Примеры радиального равновесия

Домашняя страница 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

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

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

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

  • 10 примеров креативного дизайна визиток

Заключение

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

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

Высоких вам конверсий!

По данным: smashingmagazine.com. image source dmcwa

Случайные статьи:

Урок #3. Композиция в фотографии.Симметрия и ассиметрия


Подборка похожих статей:

riasevastopol

More Posts