Гравитация → в системе многоуровневых композиций
Эта статья расскажет, как находить баланс и равновесие в построение композиции, как формировать правильные связи элементов на всех уровнях макета, используя для этого иерархию, вес, движение и силовые поля.
Содержание
- Что такое композиция и проблемы её восприятия
- Многоуровневая система композиционных взаимосвязей
- Гравитационные силы в дизайне композиций
- Динамичная композиция
- Формы и восприятия
- Примеры контрастных отношений
- Смысловой магнетизм
1. Что такое композиция
Композиция — это способ компоновки форм в контрастном соотношении с целью достижения единства и гармонии. В правильно выстроенной композиции нельзя ничего изменить. С помощью композиции дизайнер управляет вниманием, эмоциями, рассказывает историю, и в нужном темпе доносит информацию до зрителя.
Чем качественней выстроена композиция, тем яснее звучит её визуальный язык, и мы четко видим мысль автора.
Как построить правильную композицию?
Для точного расчета композиции существуют несколько математических способов — секретных канонов, пришедших к нам из истории типографии. Понятие канонов или законов верстки в XX веке популяризовал Ян Чихольд, основываясь на работах Ван де Граафа, Рауля Розариво, Ганса Хайзера и других.
Также существует правило третей ( основанный на упрощенном правиле золотого сечения ), которое активно пропагандируется фотографами и ими же критикуется. Кадр делится на трети линиями, и в точках пересечения этих линий считается правильным располагать важные элементы, зрительные центры композиции.
Ко всему этому добавим гештальтпсихологию, применение принципов которой формирует целостное восприятие и упорядоченность композиции.
Восприятие
Восприятие — это активный процесс извлечения информации об окружающем мире, включающий в себя реальные действия по обследованию того, что воспринимается.
James Jerome Gibson
Мы считываем смысл визуальных элементов путем их преобразования в образы. При этом мозг додумывает, дорисовывает эти образы, стараясь максимально упростить процесс, как правило, основываясь на прошлом опыте. Мы не пытаемся разглядеть мельчайшие детали воспринимаемых форм и объектов, а выбираем для восприятия ровно столько, сколько нужно для понимания того, что мы видим в целом.
Проблемы восприятия
Стоит учитывать разный уровень осведомленности дизайнеров и пользователей. Многочасовые размышления, обсуждения при создании дизайна будут восприняты пользователем, который видит дизайн впервые, за пару секунд. Конечное мнение сложится из его личного опыта, которого может оказаться недостаточно для правильной интерпретации идеи.
Насмотренность в дизайне — это высокая степень осведомленности последними тенденциями, инновациями и направлениями. Формируется она за счет ежедневного серфинга и исследования высокопрофессиональных работ в дизайне. Таким образом строится хороший вкус и внимание к деталям.
Разрабатывая дизайн, снижайте когнитивную нагрузку. Упрощайте, редуцируйте сложные формы и схемы.
Чем меньше информации в одно действие требуется переработать пользователю, тем меньше шанс сбиться с пути верного восприятия
Дизайнеры обладающие большим опытом работы с композицией, зачастую интуитивно решают визуальные проблемы, способные вызвать когнитивную нагрузку. Это способность формируется за многие годы.
Избыточная информация в одном шаге восприятия — одна из частых проблем, с который приходится сталкиваться. Зачастую это связано с желанием показать все и сразу, и это “все и сразу” оставить равномерно важным. Это приводит к формированию монотонного поля из визуального шума, в котором невозможно правильно идентифицировать информацию и разложить её по приоритетам.
2. Многоуровневая система композиционных взаимосвязей
Если посмотреть на дизайн страницы сайта, то главная композиция будет включать в себя, помимо несущих блоков — заголовка, навигации и имиджа, еще десяток других сущностей. Все они входят в многоуровневую систему — композиционную вложенность. Она формируется при объединении одной композиции с другой. Каждая такая связка создает следующую композицию, стоящую на уровень выше и т.д. Эта вложенность растет и заполняет собой макет от микро до макро форм.
Так зарождаются многоуровневые экосистемы дизайна. Вкладываясь друг в друга, композиции строят единый гармоничный организм, на всех уровнях которого работают универсальные фундаментальные правила взаимосвязей.
→ От общего к частному
Построение макета дизайнером следует вести начиная с макро уровней–двигаясь от общего к частному. Как художнику намечающему основные контрасты и пятна будущей работы, строя образы из крупных форм и уже потом спускаясь в детализацию, так и при работе с информацией несущие блоки следует формировать в начале, строя каркас. После этого происходит насыщение макета композиционными формами вниз по ступеням иерархии от макро до микро уровней.
В композиции не следует использовать более трех форм — главной второстепенной и равновесной. При этом каждая из форм может включать несколько внутренних композиций.
2. Гравитационные силы в дизайне композиций
Композиции взаимодействуют между собой, формируя новые, но их внутреннее содержание — это независимая экосистема где работает своя гравитация и свои законы. Словно планета обладающая персональными характеристиками и уникальным составом, лишь в целой своей форме подчиняющаяся законам внешних сил космоса.
→ Рождение композиции и объединение силовых полей
У каждого объекта есть свое силовое поле, и если начать приближать объекты друг к другу, то в какой-то момент эти силовые поля начнут взаимодействовать, формируя композицию. Их влияние будет усиливаться пропорционально приближению, и падать при удалении. Наибольший элемент будет затягивать наименьший в свой силовой центр.
Объединившись в композицию, объекты уже будут иметь одно общее силовое поле.
Далее если начать приближать композиции со своими силовыми полями друг к другу, то мы получим тот же эффект, что и вначале, — сформируется новая композиционная форма, только она уже будет содержать в себе свои внутренние композиции и свои поля.
→ Равновесие
Люди тяготеют к равновесию форм, что создает психологический комфорт, гармонию в композиционной среде.
Чтобы сформировать композицию, дизайнеру требуется найти баланс сил, при котором ни один из элементов не будет визуально отталкиваться или притягиваться к другому. Объекты как бы застынут в невесомом единстве одной системы.
Но не стоит путать равновесие с простым равенством величин. Равновесие зависит от точки композиционного центра, динамики масс, ритма, от фактур, тональных отношений и т.д.
В сбалансированной композиции каждый элемент находится в устойчивом положении, при котором внешние силы действующие на него равны нулю. В несбалансированной композиции элементы постоянно стремятся к изменению своего местоположения или формы, а значит воспринимаются как незавершенные, незаконченные. Это подвешенное состояние неопределенности с отсутствием какого либо вывода, создает невозможность точно идентифицировать мысль дизайнера: один объект перевешивает другой своей массой; расстояние между элементами слишком маленькое, и они тяготеют друг к другу настолько сильно, что вызывают излишние напряжение стирается важность и второстепенность, рушится иерархия.
Существует перцептивное — то как мы ощущаем, — и физическое равновесие.
Объект может восприниматься совершенно не уравновешенно сам по себе, падать, вылетать за пределы композиционной формы, но в связке с другими элементами быть в композиционной гармонии, где найден баланс одновременно в движении и статике.
В начале добейтесь равновесия, а уже потом экспериментируйте добавляя, ритм, динамику, асимметрию.
Важно помнить, что у каждого композиционного решения есть своя задача. К примеру в UI/UX дизайнеры, работая с интерфейсами тоже строят композиции, но их задача правильно распределить баланс информации, максимально упрощая её восприятие. Композиции в такой среде будут самыми нейтральными. Эти многоуровневые системы напоминают модульные здания, города, в которых каждый элемент сбалансированно работает с окружением.
Но когда нам нужно передать определенный характер, построить рассказ, создать динамику, напряжение. Тогда требуются другие методы построения композиций. Тут можно нарушать правила, смещать акценты, создавать умышленный дисбаланс размеров и форм. Но не смотря на возможно сильную визуальную напряженность, в таких композициях должен оставаться баланс и гармония.
Композиции не формируется в пустоте, а имеют свои границы и рамки. Это может быть кадр, экран смартфона, или карточка товара, виджет, новостной слайдер, меню. и т.д. Помимо того, что объекты действуют друг на друга внутри этих форм, также и сами формы имеют свои силовые поля, являясь неотъемлемой частью композиции.
Некоторые формы имеют четкие видимые границы, некоторые условны и невидимы.
→ Силовые поля композиционных форм
Силовые поля в композиционных формах распределяются следующим образом:
В зависимости от позиции занимаемой объектом в форме, силовые поля будут оказывать на него свое воздействие. Как видно из схемы, объекты будет притягиваться центром и краями. Чем ближе объект будет расположен к энергетическим потокам, тем сильнее будет затягивать его в центр источника силы. В центральной точке объект замрет на месте, — это место покоя всей композиции. Тут нет движения.
Но стоит сместить объект, как на него тут же начнут действовать силы краев композиции. Если объект продолжить двигать к краю, то в какой-то момент напряжение между краем и объектом настолько усилится, что визуально будет казаться, что объект сначала обездвижено прилипнет к краю формы, потеряв контроль над собой, а в какой то момент энергия может прямо выбрасывать его за пределы.
Вся идея композиции в том, чтобы создать гармонию энергии между объектами, в которой нет излишнего напряжения, из-за которого может идти существенный перевес, и потеря контроля.
→ Акценты в композиции
В архитектуре, по мнению Сергея Чобана, баланс сил формируется в пропорциях 30:70. Это значит что 70% зданий работают, чтобы направить внимание на остальные 30%, которые являются икононическими постройками, такими как памятники архитектуры, модерновые здания, небоскребы и т.д.
Этот правило применимо и в построении композиции, когда 20–30% отводится на акцентную зону, а остальное пространство нужно чтобы этот акцент удержать.
Перевес в пропорциях создаст смещение, и размоет точку фокуса, композиция потеряет баланс.
Важному объекту не следует давать больше 20–30% площади композиции. Если дать больше, то он начнет давить на окружение, если меньше — исчезнет в нем.
→ Смысловой магнетизм
Работая с информацией, важно учитывать привязанность тех или иных её частей друг к другу по смыслу. Силовые поля при этом формируются не размером, формой и контрастом, а привязанностью той или иной информации друг к другу в контексте.
→ Пять способов концентрации внимания на главном объекте
01. Линии фона направляют внимание на главный объект
02. Контраст по тону
03. Контраст по расположению
04. Контраст по размеру
05. Контраст по форме
Вывод:
- Макет состоит из элементов, которые выстраиваются в изолированные композиции.
- Каждая композиция строится в композиционной форме, которая визуально ограничена и обладает своими силовыми полями, влияющими на элементы в ней.
- Элементы в композиции имеют иерархическое влияние друг на друга. При этом в композиции формируется не больше трех сил: главной/ второстепенно / равновесной
- Каждая композиция, присоединяясь к другой композиции, формирует еще одну. И так по всему макету. Это называется композиционной вложенностью.
