Руководство по использованию негативного пространства в макетах веб страниц

Перевод статьи  Negative Space in Webpage Layouts: A Guide Джошуа Джонсона

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

Что такое негативное пространство?

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

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

 

Негативное пространство — это не минимализм

Правильное использование негативного  пространства не имеет ничего общего с минимализмом.

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

Значение негативного пространства в веб макетах

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

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

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

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

Учитесь видеть негативное пространство

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

Ниже приведен известный пример с бокалом и контурами лица.

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

Негативное пространство в логотипах

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

Пожалуй,самый известный из них — логотип FedEx со скрытой стрелкой между «е» и «х» (стрелка символизирует скорость и точность — два основных принципа этой компании — прим. переводчика).

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

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

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

Упрощаем дизайн основных форм, чтобы выявить негативное пространство

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

К примеру, возьмем следующий дизайн и применим этот метод к нему. 

 Чтобы исключить все отвлекающие факторы, мы конвертируем его в черно-белые объекты и преобразуем их в простые прямоугольники.

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

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

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

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

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

Итак, важно чтобы вы поняли это и начали обращать внимание на эти понятия в вашем собственном дизайне.

Анализ и улучшение негативного пространства

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

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

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

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

Давайте разберем его, используя простые формы, как мы сделали с предыдущим дизайном. 

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

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

Что здесь не так?

Давайте посмотрим на некоторые проблемы с отрицательного пространства в этом дизайне. 

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

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

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

Закрепляем полученные знания

А теперь мы попробуем исправить недостатки в этой работе. Мы не будем менять дизайн, а изменим только размер и расположение элементов, для решения проблемы, изложенной выше.

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

Здесь мы видим более логичное распределение негативного пространства. Площадь хэдера и расстояния по вертикали между элементами сократились.

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

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

Вот так выглядит макет страницы после того, как мы изменили в нем расположение и размер объектов.

Больше не обязательно лучше

Обратите внимание, что отрицательное пространство на странице, в целом уменьшилось.

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

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

На самом деле, улучшение ваших макетов подразумевает анализ количества и соответствия пустого пространства в вашем дизайне, и решение: каких областей слишком много, а каких – слишком мало.

Негативное пространство в дизайне

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

Широкие, открытые пространства

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

 

 

100% органика

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

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

Заполненное негативное пространство

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

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

 

Упорядочивание негативного пространства с помощью модульной сетки

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

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

В заключение о негативном пространстве

Итак, негативное пространство не представляет из себя что-то необычное. Это главная особенность каждого дизайна, которая в значительной степени определяет восприятие содержания и воздействие на зрителя.

Умение видеть и использовать негативное пространство является ключом к созданию сильного, визуально четко иерархированного макета.

Поделиться в соц. сетях

Опубликовать в Google Plus
Опубликовать в LiveJournal
Опубликовать в Мой Мир
Опубликовать в Одноклассники

5 Ответы to “Руководство по использованию негативного пространства в макетах веб страниц”

  1. Игорь 04.08.2011 at 18:45 #

    Огромное спасибо за перевод прекрасной статьи
    Добавил ваш ресурс в RSS-ленту , надеюсь на скорое ее обновление

    • Анжела Хомутова 11.10.2011 at 23:01 #

      Пожалуйста! Главное, чтобы всё впрок шло:)))

  2. Сементий 05.08.2011 at 08:42 #

    Хорошая статья! ) взял на вооружение.

  3. Dаниил 02.10.2012 at 13:30 #

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

    • Анжела Хомутова 02.10.2012 at 14:54 #

      Да, совершенно с Вами согласна. Страшно смотреть во что превращается, вылизанный дизайнером макет сайта, когда до него добираются руки контент-менеджеров. Какое уж там негативное пространство? Там всё приходит в негодность!!!!

Ответить на Анжела Хомутова