Асимметрия и симметрия: Симметрия и асимметрия в композиции

8.2. Симметрия и асимметрия в природе . Концепции современного естествознания

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

Симметрия (от греч. symmetria – соразмерность, порядок, гармония) является всеобщим свойством природы. Представление о симметрии у человека складывалось тысячелетиями. Термин «симметрия» фигурирует в представлениях человека как элемент чего-то «правильного», прекрасного и совершенного. В своих раздумьях над картиной мироздания человек определял симметрию как магическое качество природы, ее целесообразность, совершенство и старался отразить эти свойства в музыке, поэзии, архитектуре. В определенной мере симметрия выражает степень упорядоченности системы. В связи с этим имеется тесная корреляционная связь энтропии как меры неупорядоченности с симметрией: чем выше степень организованности вещества, тем выше симметрия и ниже энтропия.

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

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

Асимметрия – понятие, противоположное симметрии, отражающее разупорядочение системы, нарушение равновесия, что связано с изменением и развитием системы.

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

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

 д. Все эти виды симметрий подразделяются на внешние и внутренние.

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

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

Для чего нужна симметрия живому и как она возникла?

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

Довольно симметричны внешние формы крупных животных, человека. Растительный мир организмов также наделен симметрией, что связано с борьбой за свет, физической устойчивостью к полеганию (закон всемирного тяготения). Например, конусообразная крона ели имеет строго вертикальную ось симметрии – вертикальный ствол, утолщенный книзу для устойчивости. Отдельные ветви симметрично расположены по отношению к стволу, а форма конуса способствует рациональному использованию кроной светового потока солнечной энергии, увеличивает устойчивость. Таким образом, благодаря притяжению и законам естественного отбора ель выглядит эстетически красиво и «построена» рационально. Внешняя симметрия насекомых и животных помогает им держать равновесие при движении, извлекать максимум энергии из окружающей среды и рационально ее использовать.

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

Асимметрия также широко распространена в мире.

Внутреннее расположение отдельных органов в живых организмах часто асимметрично. Например, сердце расположено слева у человека, печень – справа и т. д. Л. Пастер, французский микробиолог и иммунолог, выделил левые и правые кристаллы винной кислоты. Молекула ДНК асимметрична – ее спираль всегда закручена вправо. Все аминокислоты и белки, входящие в состав живых организмов, способны отклонять поляризованный луч света влево.

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

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

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

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

композиционное равновесие, симметрия и асимметрия

Сбалансированная композиция кажется правильной.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Почему визуальное равновесие важно?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Симметрия

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

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

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

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

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

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

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

Асимметрия

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

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

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

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

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

Принципы гештальт-психологии

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

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

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

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

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

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

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

Дизайн сайта 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

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

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

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

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

Заключение

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

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

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

По материалам: smashingmagazine.com. image source dmcwa 

11-11-2015

Баланс 101: как использовать симметрию и асимметрию в дизайне

Логотипы, веб-сайты и многое другое…

Логотипы, веб-сайты, обложки книг и многое другое…

Получить дизайн

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

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

Что такое визуальный баланс? А что такое симметрия?

—

Симметрия и равновесие взаимосвязаны. Но это не совсем одно и то же. Взгляните на их определения:

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

Асимметрия , с другой стороны, относится ко всему, что не является симметричным.

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

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

Существует четыре основных способа достижения баланса:

Симметричный баланс

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

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

Асимметричный баланс

Композиция с неравным весом с обеих сторон имеет асимметричный баланс.

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

Радиальный баланс

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

Мозаичный баланс

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

Каждый элемент имеет общий акцент, и ни один элемент не доминирует в композиции.

Различные типы симметрии и асимметрии

—

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

Отражательная симметрия

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

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

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

Трансляционная симметрия

Представьте, что одна и та же форма повторяется снова и снова.

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

Вращательная симметрия

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

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

Симметрия отражения скольжения

Все мы видели следы на песке или снегу. Подумайте о том, как каждый шаг создает отражение противоположной ноги, но из-за движения каждый след не совпадает с другим.

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

Асимметрия

Если композиция не соответствует вышеуказанным категориям, она, вероятно, асимметрична.

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

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

Примеры баланса в графическом дизайне

—

Лучший способ узнать о балансе — посмотреть на несколько реальных примеров симметрии и асимметрии в действии.

Логотипы

Airbnb

Логотип Airbnb является примером чистой зеркальной симметрии.

через Airbnb

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

Google

Словесный товарный знак Google является примером асимметричного баланса.

через Google

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

Веб-дизайн

Apple

Веб-страница Apple Mac дает нам потрясающий пример великолепной зеркальной симметрии.

через Apple

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

The Atlantic 

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

via The Atlantic

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

Визитные карточки

InClean

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

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

Привет 

Эта ультраминималистичная визитная карточка, на одной стороне которой напечатано только слово «Привет», представляет собой композицию с явной асимметрией и намеренным дисбалансом.

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

Понимание баланса для разработки лучших продуктов

—

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

Нужен идеально сбалансированный дизайн?

Наши дизайнеры помогут вам создать что угодно.

Получить дизайн

Эта статья была написана Марком Шенкером при участии Сэма Лундквиста.

Баланс (симметрия/асимметрия) > Issaquah Schools Foundation

 

Художественная концепция: Баланс (Симметрия/Асимметрия)  

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

Типы баланса:

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

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

Примеры проектов:

• Удлиненный и симметричный портрет (2-й класс) урок рисования.
• Калейдоскоп Радиальная симметрия (2 класс) Урок рисования.
• Вырезанные из бумаги пришельцы (2-й класс), урок рисования.
• Сборка скульптур (5 класс), урок рисования.
• Урок рисования с натуры (5 класс).
• Сложите лист бумаги пополам. С помощью клея с блестками разного цвета сделайте рисунок на одной половине листа. Сложите его вместе, а затем разверните, чтобы получился симметричный узор.
• Попросите детей написать по центральной линии сложенного листа бумаги свое имя курсивом, а затем обвести его краской. Закройте и откройте бумагу, чтобы сделать зеркальное отражение имени. Вы можете оставить его или сделать из него монстра или жука.
• Используя три инициала, сделайте зеркальное отображение сверху вниз, а затем слева направо.
• Сделайте «игральную карту», ​​такую ​​как пиковый валет.
• Нарисуйте пейзаж, отражающийся в воде.
• Сделайте симметричный рисунок на маске.
• Сделайте дизайн австралийских аборигенов, используя кровельную бумагу (для коры), трафареты и порошковую краску, прикрепленную клейким аэрозолем.

Примеры баланса (симметрия/асимметрия) в архитектуре и искусстве:

Всемирный торговый центр, 1970-е годы. симметричный

Коронация Богородицы, Энгерран Куартон (голландский), 1454 г. Симметричный

Семья Вестрайх, Элис Нил (американка), 19 лет.78. асимметричный, но сбалансированный

Сикстинская Мадонна, Рафаэль (итальянец), 1513 г. асимметричная, но сбалансированная

Святой Матфей, ​​Караваджо (итал.). асимметричный, но сбалансированный

Шартский собор (1140 г.) и Римский собор (1254 г.). один симметричный, один асимметричный

Морское чудовище, Матисс (французский), 1950.