Использование белого (или негативного) пространства в своих проектах.

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

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

Что такое белое пространство?

Как я только что объяснил, белое (или негативное) пространство – это промежуток между разными элементами, в котором ничего не содержится. Для сравнения заполненное пространство мы называем позитивным. На самом деле негативное пространство помогает формировать и разделять то, что является позитивным пространством. Это можно рассмотреть на оптической иллюзии внизу.

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


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

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


Google, как видно, ярый защитник белого пространства в своих проектах. У этого поисковика, как широко считается, аккуратный дизайн, так как внимание концентрируется на основной цели страницы, без массивных добавлений в прочие области (не то, что у других).


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


Негативное пространство не обязано, на самом-то деле, быть цельным цветовым блоком. На фотографии любая область, не находящаяся в фокусе, может быть определена как негативное пространство. В этом примере недостаток фокуса на фоне привлекает ваш взгляд к кружке. (И, кроме того, разве Starbucks не сменил свой логотип?)

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

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

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

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

Негативное пространство улучшает читабельность

Вы может поинтересоваться, зачем вам беспокоиться о том, чтобы негативное пространство было правильным?

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

Вкратце, белое пространство все разделяет, дает элементам их собственное личное пространство, самостоятельность, различимость, легкость для чтения и взаимодействия.