Вы когда-нибудь задавались вопросом, как объединять элементы для успешного дизайн проекта? Хорошо скомпилированный дизайн хорошо работает, и это вовсе не случайность. Большинство успешных дизайн конструкций используют принципы гештальт группировки для организации информации, что помогает нам понять взаимосвязь и различия между элементами. Как дизайнеры, мы можем использовать эти принципы для создания привлекательного и успешного проекта.
В данной статье сосредоточимся на принципах замкнутости и взаимодействия фигуры и фона в организации пространства, которые позволяют выстраивать взаимоотношения между визуальными элементами. Мы рассмотрим, как работают эти принципы, а затем перейдем к реальным примерам, чтобы проиллюстрировать их использование.
Замыкание (завершение)
В соответствии с универсальными принципами дизайна, принцип замкнутости гласит, что у нас есть тенденция воспринимать набор отдельных элементов, как единую, узнаваемую модель, а не несколько ее отдельных частей. Использование замкнутости эффективно снижает сложность за счет уменьшения элементов в наименьшее количество возможных частей, необходимых для завершения объекта. При условии достаточной информации, мы можем заполнить недостающие части, чтобы создать целое. Это достигается за счет использования положительного и отрицательного пространства.
В приведенном ниже примере, мы мысленно завершаем линии, чтобы сформировать круг, несмотря на то, что формы круга не существует. Положительное и отрицательное пространство объединяются и формируют в нашем сознании восприятие круга.
Замкнутость используется, чтобы заставить нас воспринимать объекты или узоры, используя наименьшее количество информации. Наш разум так стремятся заполнить недостающую информацию, что это может быть сделано с очень немногими элементами. Тем не менее, если мы не даем достаточного количества информации, чтобы завершить картину, нам не удастся воспринимать объект, и закрытие терпит неудачу. Посмотрите на следующий пример. Здесь гораздо труднее сформировать в нашем сознании круг, не так ли? Все из-за недостаточного количества предоставленной информации.
Создание эффективного закрытия.
Приведенные выше примеры являются очень простыми иллюстрациями того, как мы воспринимаем образы, чтобы сформировать замыкание. На самом деле, есть много визуальных элементов, которые мы можем использовать для создания эффективного закрытия композиции:
-Положительное и отрицательное пространство
Положительное и отрицательное пространства, объединенные по принципу замыкания, образуют единое целое. Это может быть достигнуто путем поиска скрытых форм в отрицательном пространстве дизайна или в пределах шрифта. Кроме того, удаление элементов из переднего плана могут создавать интересные негативные формы, и при этом, упрощать дизайн.
— Контраст
Ключом к формированию закрытия является сильный контраст между передним планом элементов и фоном. Как всегда, черно-белый создает лучший контраст, но можно экспериментировать и с дополнительными цветами.
— Цвет
Цвет не только добавляет жизни дизайну, его можно использовать для усиления связей, особенно при использовании в дизайне абстрактных форм.
В принципе закрытия используются многие, если не все из указанных выше визуальных элементов. Экспериментируйте с адаптацией вашего дизайна – это позволит открыть новые формы.
А теперь, давайте взглянем на принцип замыкания в реальном мире, чтобы и увидеть, как это все работает вместе.
Замыкание на практике
Используя замыкание, мы можем уменьшить элементы, необходимые для передачи визуальной информации, снижая сложность и делая дизайн более привлекательным. Наиболее распространено применение этого принципа в разработке логотипов. Закрытие позволяет упростить конструкцию, чтобы быстро передать айдентику бренда.
Взгляните на приведенный ниже известный логотип — павлин NBC. При сравнении текущего логотипа (справа) со старым, вы можете увидеть, что они не сильно отличаются. Но за счет уменьшения элементов и работы с отрицательным пространством, нынешний логотип становится гораздо более упрощенным и элегантным. Замыкание успешно достигнуто с использованием плотно сгруппированных, положительных форм перьев, а восприятие тела павлина достигается использованием отрицательного пустого пространства в середине.
Другой хорошо узнаваемый логотип, который успешно использует закрытие — FedEx. В этом логотипе, оно достигается с помощью отрицательного белого пространства. Верхний регистр «Е» и строчной «х» используется, чтобы сформировать знакомый образ движущейся вперед стрелки. Дизайнер экспериментировал с множеством конструкций, подтягивая буквы все ближе, и ближе друг к другу, пока не увидел стрелу, образующуюся между «Е» и «х». Это показывает, как эксперимент с упрощением дизайна может дать фантастический результат.
Приведенные выше примеры являются хорошо известными логотипами, которые используют замыкание очевидными способами. Есть и менее известные логотипы, использующие закрытие более тонко. Houzz, к примеру, использует этот прием более концептуально. На первый взгляд, зеленые, черные и белые фигуры могут походить на полку, часть здания или поверхность стены, учитывая тематическую направленность сайта. Но более пристальный взгляд увидит кое-что еще. Стремление нашего сознания заполнить пробелы в элементах позволяет объединить отдельные формы в единое целое, образуя верхний регистр буквы «H» в трехмерном пространстве.
Наряду с созданием интересных логотипов, принцип закрытия может работать и в других сферах. Веб-сайты также используют положительные и отрицательные пространства при разработке интерфейсов для создания эффективного закрытия. Ниже показан логотип Uncrate, который использует белое пространство на черном фоне для формирования букв своего логотипа и создания брендинга сайта. Также, это хороший пример взаимодействия фигуры и фона.
Использование закрытия при создании иконок
Иконки обычно используются для того, чтобы передать сообщение или усилить концепцию на небольшом пространстве. Они должны быть простыми и урезаться до основных элементов, чтобы помочь людям быстро понять их смысл. Закрытие хорошо работает при создании иконок. Оно использует положительные и отрицательные пространства для уменьшения сложности, и в то же время предлагает формы или объекты, которые мы воспринимаем целостно. Обратите внимание на эти примеры, взятые с сайта Noun Project.
Абстрактное закрытие
Закрытие позволяет получить довольно абстрактные, и в то же время узнаваемые узоры. Одно из самых известных применений этого принципа – дудлы Google. Они зависят от узнаваемости нами логотипа Google, что позволяет нам читать изображение, несмотря на то, что они содержат довольно абстрактные фигуры. При этом цвет дополнительно способствует укреплению отношений между каждой буквы логотипа Google.
Итак, используя положительные и отрицательные пространства творчески, а также сокращая элементы в дизайн-проектах, мы можем создать действительно интересные формы. С помощью закрытия можно воспользоваться необходимостью заполнить недостающие части, чтобы уменьшить сложность и упростить дизайн.
Далее рассмотрим, как можно использовать положительные и отрицательные пространства для создания взаимодействия фигуры и фона.
Каков принцип фигуры и фона? В соответствии с универсальными принципами дизайна, это соотношение, в котором мы воспринимаем элементы либо как объекты, либо как фон. Как и закрытие, это принцип работает за счет использования положительного и отрицательного пространства. Фигура-фон – это практически все, что мы воспринимаем визуально — будь то сцена, композиция, веб-сайт, логотип или знак.
Фигура и фон устойчивы, когда объекты различимы от фона, а фон не представляет никакого интереса. Стабильное взаимоотношение между фигурой и фоном обеспечивает настройку внимания на нужные объекты. Например, мы воспринимаем изображение ниже как круг на фоне. Круг находится в центре внимания и удерживает его, в то время как фон мало нас интересует. Этот пример демонстрирует мощную стабильность принципа фигура-фон, так как фигура имеет форму и воспринимается передним элементом, в то время как фон – это нечто бесформенное, продолжающееся за фигурой.
Когда фигура-фон не стабильны, как в следующем примере, возникает неоднозначность восприятия, и отношения между элементами становятся неясными. В этом примере все намеренно упрощенно, например, фигура и фон являются обратимыми, заставляя нас поочередно видеть сначала один элемент, затем другой.
Неопределенность – это не обязательно плохо. Отсутствие стабильности восприятия может быть преимуществом в дизайне. Целенаправленная дестабилизация отношения фигура-фон может вызвать диссонанс или напряженность, добавив интерес к дизайну. Один из ярких примеров использования этой напряженности — серия плакатов Criminal Underworld. Здесь художник намеренно дестабилизирует элементы фигуры и фона, которые сражаются за наше сознание также, как герои и злодеи, изображенные на плакате, борются друг против друга.
Создание хорошего взаимоотношения между фигурой и фоном
Есть много визуальных элементов, которые мы можем использовать для усиления данного эффекта. Используя их, можно достичь замечательных результатов:
— Контраст
Белый или черный, в сочетании с ярким цветом создает очень сильный контраст. Дополнительные цвета также отлично подходят для создания контраста. Если чистые цвета слишком интенсивны, можно использовать темные и светлые тона.
— Цвет
Теплые цвета (желтый, оранжевый, красный) воспринимаются как приближение, что может быть использовано для усиления фигуры. Холодные цвета (пурпурный, синий, зеленый) воспринимаются как отступающие и могут использоваться для укрепления фона.
— Размер
Когда большой элемент заполняет большую часть фона, фон будет восприниматься как фигура. С другой стороны — именно маленький элемент на большом фоне будет воспринимать фигурой.
— Позиция
Элементы, расположенные в нижних областях композиции будут восприниматься как фигуры, а элементы, расположенные в верхних областях будет восприниматься как фон. Это связано с психологией визуального восприятия расстояния. Мы воспринимаем объекты, расположенные в нижних областях, в качестве таковых, что располагаются ближе, а те, которые помещены в верхних областях, кажутся отдаленными.
— Фокус
Элементы, находящиеся в фокусе будут восприниматься как фигуры, а элементы, которые находятся вне фокуса, размытые, блеклые или тонированные, будут восприниматься как фон.
Большинство хороших соотношений фигура-фон создаются из комбинаций множества этих визуальных элементов.
А теперь давайте посмотрим на некоторые реальные примеры, чтобы ощутить, как эти элементы работают вместе.
Фигура-фон на практике
Пример серии плакатов, приведенный выше, показывает принцип неустойчивости в изображении, где фигура и фон сражаются друг с другом за внимание. Нестабильность принципа фигура-фон хорошо работает в простом дизайне, содержащем несколько элементов. Тем не менее, с этим приемом следует обходиться осторожно. Часто при разработке дизайна сайта необходимо передать сложную информацию, и при этом, дизайн должен оставаться четкими и годным к употреблению. Когда фигура-фон стабильны, мы можем направить внимание в нужное русло и избежать какой-либо двусмысленности.
Посмотрите на пример ниже — веб-сайт Apple Music. Скорее всего, ваш глаз обращается к образу смартфона, который, вместе с текстом слева от него, являются основными элементами. В то время как фон начинает бороться за наше внимание, основные элементы расширяются за счет использования нескольких визуальных приемов. Во-первых, они усилены размером – большое изображение смартфона и крупный шрифт. Во-вторых, позиционирование смартфона в нижней части экрана, визуально выдвигает изображение вперед. Контраст между ярким экраном и темным фоном также обеспечивают хорошее разделение между фигурой и фоном.
В следующем примере, на веб-сайте Naya, размер рисунка является самым сильным визуальным элементом, который используется для создания хорошей фигуры на фоне. Здесь мы видим женщину (и ее очень большую шляпу!), которая заполняет большую часть фона. Кроме того, холодный цвет в фоновом изображении, а также грамотное использование перекрывающихся элементов, помогает визуально отодвинуть фон. И, наконец, как и на примере Apple Music, есть хороший контраст, отделяющий передний план от фона.
Еще одни прекрасный пример отделения основного элемента от фона мы видим на сайте R/m Design School . Здесь, для отделения элементов от фона, используются яркие контрастные цвета. К тому же, теплый цвет используется для усиления восприятия фигуры, приближая ее визуально. Так и хочется протянуть руку, чтобы захватить эти яркие плитки!
Заключение
Понимание того, как использовать два рассмотренных нами приема, поможет выстроить прочные отношения и различия между элементами в дизайне. Присмотритесь к отрицательному пространству так же, как и к положительному – и вы обнаружите интересные формы. Поиграйте с удалением элементов с переднего плана, используйте отрицательное пространство для формирования формы, и, наконец, смешивайте визуальные элементы, такие как контрастность, цвет, размер, положение, для создания устойчивого или неустойчивого отношения фигуры и фона. Теперь, когда вы знаете, как использовать эти два принципа, идите вперед и создавайте свои собственные неповторимые проекты!
