Основы дизайна: пространство и соотношение фигуры и фона

Соотношение фигуры и фона

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

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

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

Соотношение фигуры и фона

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

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

«Пустое пространство следует рассматривать в качестве активного элемента, а не пассивного фона».

— Ян Чихольд

01-figure-ground-relationship

Соотношение фигуры и фона. (Графический материал позаимствован из учебника Алекса Уайта «Элементы графического дизайна»)

  1. Равномерно размещенные черные линии, создают серое поле. Фигура и фон находятся в устойчивом соотношении.
  2. Пространство устранено. Фигура доминирует и мы видим сплошное черное поле.
  3. Устранены две черные линии. Пространство стало активным и проявилось.

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

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

Кстати, рекомендую посмотреть прямо сейчас:

Стабильное, обратимое и неоднозначное соотношение фигуры и фона.

Есть три типа соотношения фигуры и фона:

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

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

Принцип фигуры и фона являются не единственным принципом «гештальта», в котором пространство играет важную роль. Два других таковы:

  • Близость
    Близость использует пространство для объединения и разделения элементов, заключая некоторые элементы в пространство. Пример, который мы могли бы принять за данность, — абзацы текста на странице. Интервалы между абзацами больше, чем расстояние между строками текста в абзаце.
  • Замыкание
    Пространство используется в качестве промежутков между элементами. Зрители заполняют пробелы своей собственной информацией, чтобы составить из частей целое. Слишком много места – и замыкание не происходит. Слишком мало пространства – и в замыкании нет необходимости. Только правильное соотношение пустого и заполненного пространства активирует пространство и ведет к замыканию.

Замыкание.

Роль пространства в соотношении пространства и формы

Подумайте о музыке на мгновение. Если бы каждая нота или аккорд игрались в одно и то же время, у нас бы не было музыки. Это был бы шум. Музыка возникает, когда звуки контрастируют с тишиной. Изменение сочетания звука и тишины создает ритм и мелодию. Без тишины нет никакой музыки.

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

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

Пространство может сделать следующее:

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

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

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

  • Микро-пространство
    Это пространство внутри элементов в группе. Это пространство между буквами, словами и параграфами.
  • Макро-пространство
    Это пространство между основными элементами. Это разделяет элементы или группы элементов и обеспечивает глазу «путь» передвижения и места для отдыха между элементами.

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

Пространство также может передавать такие признаки, помимо качества, как:

  • степень детализации,
  • простота,
  • роскошь,
  • чистота,
  • уединенность,
  • открытость.

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

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

Примеры соотношения пространства и формы на веб-сайтах

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

Принцип пространства и формы на сайте Old Guard

Дизайн Old Guard Тома Джонсона использует много белого пространства, давая тексту и другим элементам место. Там легко понять, где фигура, а где фон.

Old Guard использует много белого пространства, давая тексту и другим элементам место. (Полная версия)

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

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

Соотношение пространства и формы на странице состояния heroku

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

Часть страницы состояния Heroku. (Полная версия)

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

Соотношение пространства и формы Introducing the novel

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

Пространство в верхней части страницы Introducing the Novel асимметричное и активное. (Полная версия)

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

Elliot Jay Stoks

Сайт Elliot Jay Stocks должен быть вам знаком, так как он стоит за дизайном этого сайта. Асимметричность пространства на сайте Elliot приводит к его активности.

Асимметричность пространства на сайте Elliot приводит к его активности. (Полная версия)

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

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

Phil Coffman

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

Содержание веб-сайта Phil Coffman образует единую форму, которая размещена в практически пустом пространстве.

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

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

New adventures in web design

Как и многие из приведенных здесь веб-сайтов, сайт для конференции 2013 года New Adventures in Web Design (Новые приключения в веб-дизайне) оставляет щедрые пробелы вокруг элементов. Отдельные группы информации содержатся в пространстве, а пространство активно во всем дизайне.

New Adventures оставляет щедрые пробелы вокруг элементов. (Полная версия)

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

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

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

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

Соотношение пространства и формы в логотипах

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

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

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

Различные логотипы, хорошо использующие пустое пространство.

— Cloud Bed
— Black Cat Lounge
— Shift
— Dolphin & Seal Logo Designer
— Dental Implants Guide
— Wineforest

Выводы

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

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

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

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

Добавить комментарий