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

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

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

Микро- и макроуровни негативного пространства

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

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

Итак, равное расстояние между тематическими блоками задает структуру дизайна и четкость восприятия. По законам композиции пробелы между маленькими блоками должны составлять 1/3 расстояния между большими блоками.

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

Это вариант с нарушенными пропорциями:

Неправильное использование пустого пространства может разрушить структуру макета.

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

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

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

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

Однотипность отступов — важный момент в использовании пробелов.

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

Интерлиньяж

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

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

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

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

Минимум графики и максимум пространства — хороший выбор для “серьезного” дизайна сайтов.

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

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

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

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

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

Совсем не пустое пространство

Мы уже говорили о том, что негативное пространство не обязательно должно быть однотонным белым фоном. За последние два года в области веб-дизайна появилась мода на Photo background style. Этот достаточно новый подход в использовании негативного пространства, который уже успел завоевать популярность. Он интересен тем, что внимание посетителя переноситься с позитивного на негативное пространство. То, что раньше было не в фокусе, теперь несет основной эстетический посыл, выражая главную стилистическую идею сайта.

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

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

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

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

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

Согласитесь, выглядит восхитительно. Такой подход к созданию логотипа, привлекает внимание зрителя, так как креативность всегда запоминается.

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

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

Манипулируя вниманием посетителя при помощи грамотно созданного негативного пространства, проще подвести его к нужной информации.

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

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

1. Заставлять фотографию дышать, наполнять ее воздухом.

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

3. Создавать однородный фон для четкого и читабельного разделения планов.

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

5. Подчеркивать контраст между объектами, заложенный в фотографию автором.

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

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

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

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

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

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

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

Итак, знакомьтесь, негативное пространство – это место вокруг изображаемого объекта. Проще говоря, это область, незанятая содержанием.

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

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

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

«Негативное пространство» может становиться самодостаточным в композиции, конкурировать с «позитивным пространством» или поддерживать его. Однако в грамотном дизайне оно не должно отвлекать внимание от основного предмета композиции.

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

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

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

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

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

Один из инструментов, который используется преподавателями в художественных вузах, стал известен благодаря книге профессора Бетти Эдвардс «Рисование правой частью мозга» . В упражнении студенты переносили изображение с фотографии или рисунка, размещенного «вверх ногами».

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

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

Широкие возможности «негативного пространства».

Применяя возможности «негативного пространства» можно добиться:

1. Ощущения воздушности и элегантности композиции.
2. Концентрации внимания на самом главном элементе композиции.
3. Лёгкости восприятия текста.
4. Управления взглядом зрителя. Например, от заголовка к иллюстрации, от иллюстрации к тексту.
5. Передачи дополнительного смысла работы.

Очень интересно использует отрицательное пространство в своих картинках израильский иллюстратор Нома Бар (Noma Bar). Его рисунки лаконичны, просты и в то же время остроумны. Он выпустил книгу иллюстраций «Негативное пространство» («Negative Space»). Данная подборка была опубликована в изданиях The Guardian и New York Times Magazine.

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

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

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

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

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

by Nathalie Rendu

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

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

by Octavian Andrei

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

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

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

«Негативное пространство похоже на холст: это фон, который объединяет элементы в дизайне, позволяя им выделяться», — говорит Мэдс Согаард из Interaction Design Foundation.

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

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

В чем разница между белым пространством и негативным?

Короткий ответ: никакой разницы. Эти понятия полностью взаимозаменяемы.

Почему это явление отражается в двух разных терминах? Легко ответить, если проследить происхождение. Термин «белое пространство» происходит из дизайна печати, с тех пор, когда страницы были в основном белыми, поэтому белое пространство было вокруг, между буквами и символами, а также вокруг иллюстраций. Сегодня, используемый в дизайне, этот термин не имеет ничего общего с белым цветом: все дело в пустом пространстве, а не в цвете. Термин «негативное пространство» происходит из фотографии: на фотоснимках, положительное пространство — это то, что привлекает внимание (объекты), и, соответственно, фон — негативное пространство.

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

Почему негативное пространство важно?

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

Как клиенты, так и некоторые дизайнеры могут захотеть разместить на одной странице или экране как можно больше элементов и функций, думая, что это будет полезно для потребителей. Но это ошибка: на самом деле пользователям не нужно все сразу. Более того, слишком много элементов без достаточного количества воздуха значительно повышают уровень отвлечения: перегруженные информацией и интерактивными элементами, и пользователям приходится прилагать усилия, чтобы найти то, что нужно. Как заметил Ааррон Уолтер: «Если все кричит, то ничего не слышно».

Среди преимуществ продуманного применения негативного пространства в дизайне мы могли бы упомянуть следующее:

1. оно поддерживает чтение страницы;
2. оно улучшает визуальную иерархию;
3. оно поддерживает визуальную связь между элементами;
4. оно обеспечивает достаточно воздуха на странице, чтобы она не чувствовалась загроможденной;
5. оно фокусирует внимание пользователя на основных элементах и уменьшает уровень отвлеченности;
6. оно добавляет стиль и элегантность на страницу.

Например, давайте посмотрим на целевую страницу Big City Guide. Здесь дизайнер применяет фоновое фото, и оно играет роль негативного пространства. Более того, элементы фотографии и надписи основного элемента взаимосвязаны: это делает отрицательное пространство активным элементом дизайна и придает странице единый гармонический вид.

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

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

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

Исходя из этого, негативное пространство оказывает влияние на визуальное восприятие в таких аспектах, как:

• текстовое содержимое;
• графический контент;
• навигация;
• идентичность бренда.

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

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