Успешные графические дизайнеры знают, что искусство визуального баланса — это ключ к эффективной коммуникации. Когда ваши лендинги станет отличать сбалансированность — это касается как симметричного, так и асимметричного дизайна, — они достигнут большей гармонии, и вашей аудитории не нужно будет тратить много энергии, чтобы извлечь из них информацию.
Понимать симметрию и асимметрию несложно, но реализовать эти принципы поначалу может быть трудно. Чтобы вам стало все кристально ясно, рассмотрим несколько показательных примеров.
Содержание статьи
Что такое визуальный баланс? И что такое симметрия?
Симметричный баланс
Асимметричный баланс
Радиальный баланс
Мозаичный баланс
Различные типы симметрии и асимметрии
Зеркальная симметрия
Трансляционная симметрия
Скользящая зеркальная симметрия
Асимметрия
Понимание баланса для создания лучших проектов
Что такое визуальный баланс? И что такое симметрия?
Симметрия и баланс связаны между собой. Но это не совсем одно и то же. Сравним определения:
- Симметрия — это визуальное качество, при котором части изображения повторяются по оси, в определенном направлении или вокруг центра.
- Асимметрия, с другой стороны, относится ко всему, что не является симметричным.
- Баланс — это визуальный принцип, помогающий дизайну выглядеть одинаково взвешенным по всей композиции.
Баланс измеряет визуальный вес композиции, в свою очередь влияющий на то, насколько каждый элемент привлекает внимание вашей аудитории.
Симметричный баланс
Симметричный баланс возникает, когда ваша композиция имеет одинаковый визуальный вес на каждой стороне оси. Представьте себе идеальные зеркальные изображения, смотрящие друг на друга относительно центральной оси.
Симметричный логотип от Starbucks
Пример симметрии на лендинге
Этот тип баланса способствуют изящности и простоте. На него приятно смотреть, но есть минус — это предсказуемо.
Асимметричный баланс
Композиция, характеризующаяся неравным весом с обеих сторон, имеет асимметричный баланс.
Ассиметричный логотип от Steam
Эта визуальная техника имеет основной акцент с одной стороны и несколько менее значимых акцентов с другой. Смотрится визуально интереснее, чем его симметричный аналог.
Пример асимметрии на лендинге
Радиальный баланс
Когда визуальные элементы исходят из общей центральной точки, это называется радиальным балансом. Представьте лучи солнечного света, идущие от солнца.
Радиальный логотип от Umbrella Corporation
Пример радиального баланса на лендинге
Мозаичный баланс
Мозаичный баланс можно определить как организованный хаос. Для кого-то это покажется шумом, но на самом деле баланс здесь создается благодаря отсутствию четкого фокуса.
Мозаичный логотип от Windows
Пример мозаичного баланса на лендинге
Каждый элемент имеет общий акцент, при этом ни один элемент не доминирует в композиции.
Различные типы симметрии и асимметрии
Баланс — это ключ к отличному дизайну, а симметрия — один из инструментов для достижения баланса. Вкратце расскажем о четырех типах симметрии.
Зеркальная симметрия
Представьте, что вы взяли яблоко и разрезали его пополам. Обе стороны являются зеркальным отражение друг друга относительно центральной линии, и это и есть зеркальная (двусторонняя) симметрия.
Метод используется вертикально, горизонтально или по диагонали.
Зеркальная симметрия может быть идеальной симметрией, тогда обе стороны изображения будут идентичны. В природе, однако, ничто не является безупречно симметричным, поэтому зачастую на каждой стороне появляются тонкие различия — так же как в двух половинках человеческого лица.
Трансляционная симметрия
Когда визуальные элементы повторяются в пространстве, мы имеем дело с трансляционной симметрией (симметрией переноса). Повторение форм может происходить на протяжении любой длины и в любом направлении.
Вращательная симметрия
Представьте себе движущиеся колеса автомобиля или вращающиеся лопасти ветряной мельницы, и вы получите симметрию вращения.
Этот метод, также известный как радиальная симметрия, подразумевает вращение визуальных элементов вокруг центра под любым углом. Этот тип симметрии идеально подходит для передачи ощущения движения, динамического действия или скорости.
Скользящая зеркальная симметрия
Мы все видели шаги на песке или снегу. По сути, каждый след является отражением следа противоположной ноги, но из-за движения изображения следов не выровнены относительно друг друга.
Скользящая зеркальная симметрия представляет собой игру с обычной зеркальной симметрией, но она включает в себя изменение положения каждого зеркального изображения. Как и вращательная симметрия, она также передает ощущение движения вперед.
Асимметрия
Если композиция не вписывается в вышеуказанные рамки, она, вероятно, является асимметричной.
Асимметрия бросает вызов вам как дизайнеру и одновременно помогает вам. Сбалансированный, симметричный дизайн, как правило, более вовлекающий, так как наши глаза считают его более интересным и привлекательным.
Для того чтобы добиться баланса с асимметричными визуальными элементами, придется попотеть, зато у вас появится свобода экспериментов со схемами и формами, что недоступно симметрии.
Понимание баланса для создания лучших проектов
Знание того, как правильно использовать симметрию и асимметрию на посадочной странице, является ключом к передаче вашего оффера с помощью графического дизайна. Используя принцип хорошего баланса, вы превратите обычные проекты в нечто захватывающее и запоминающееся.
Высоких вам конверсий!
По материалам: 99designs.com
