Пространство как элемент дизайна

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

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

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

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

· установить контраст, акцент и иерархию;

· создавать драму и напряжение;

· обеспечить визуальный отдых между группами элементов.

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

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

· Микро-пространство
Это пространство внутри элементов в группе. Это пространство между буквами, словами и параграфами.

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

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

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

· степень детализации,

· простота,

· роскошь,

· чистота,

· уединенность,

· открытость.

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

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

Несколько примеров пространства на веб-сайтах

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

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 образует единую форму, которая размещена в практически пустом пространстве.

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

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