Хороший макет легко превратить в перегруженный. Проблема в том, что мы привыкли замечать объекты, а не расстояния между ними. Хотя именно пустое пространство часто определяет, как будет восприниматься вся композиция.
В дизайне это называют негативным пространством, или negative space. Еще встречаются термины «отрицательное пространство» и white space («белое пространство». Последний, правда, может запутать: пространство не обязано быть белым.
Негативное пространство в дизайне — это область между визуальными объектами. Она может отделять заголовок от текста, кнопку от соседнего блока, изображение от края страницы или одну секцию сайта от другой. Воздух в дизайне работает так же, как цвет, типографика или композиция: помогает расставлять акценты, объединять элементы и управлять вниманием.
Зачем нужен воздух в интерфейсах и графике
У негативного пространства есть довольно определенная функция. Оно помогает быстрее разобраться в информации, снижает визуальный шум и показывает, какие элементы связаны между собой. Иногда за счет одного только отступа можно изменить смысл целого блока.
Это особенно заметно в интерфейсах. Если на экране заголовок, изображение, описание и кнопка стоят вплотную друг к другу, пользователь видит один большой объект. Если между элементами появляются понятные расстояния, структура становится очевидной. В таком случае нет необходимости в дополнительных подписях.
Снижаем когнитивную нагрузку
Когда элементов много, глазам приходится постоянно искать связи между ними. Что относится к чему? Где начинается новый блок? На какую кнопку нажать? Чем сложнее эта задача, тем выше когнитивная нагрузка.
Здесь работает простой принцип, который хорошо объясняет гештальт-психология. Это принцип близости. Объекты, которые находятся рядом, человек склонен воспринимать как группу. Соответственно если элементы связаны друг к другом, их можно расположить ближе. Если между ними разные смысловые отношения — увеличить расстояние. Поэтому расстояние между заголовком и его текстом обычно меньше, чем расстояние между этим текстом и следующим разделом.
Помогаем пользователю понять, куда смотреть
Воздух также может быть инструментом для расстановки акцентов. Чем больше свободного пространства вокруг объекта, тем сильнее он отделяется от остальных элементов. Поэтому не всегда нужно делать кнопку огромной или использовать самый яркий цвет, чтобы привлечь к ней внимание. Если дать кнопке больше пространства, она получает визуальный приоритет. Это особенно полезно для CTA («призыва к действию»).
Делаем текст удобнее
На удобочитаемость (readability) влияет не только размер шрифта. Важны длина строки, контраст, межбуквенное расстояние, интерлиньяж и расстояние между абзацами. Если строки стоят слишком близко, текст превращается в плотное пятно. Если между абзацами нет пауз, сложно понять, где заканчивается одна мысль и начинается другая. Именно эти маленькие расстояния во многом определяют, насколько спокойно человек будет читать текст.
Создаем нужное настроение
Воздух влияет не только на удобство, но и на характер дизайна. Плотная композиция может казаться энергичной, насыщенной и даже агрессивной. Большие поля и расстояния дают противоположное ощущение — спокойствия, уверенности. Когда вокруг продукта много пространства, он становится главным объектом, потому что ему не приходится конкурировать с десятью дополнительными сообщениями.
Но важно учитывать, что если увеличить все отступы без понимания задачи, дизайн просто станет разреженным. Воздух работает только тогда, когда он встроен в систему.
Микро- и макропространство: в чем разница
С воздухом происходит примерно то же, что с типографикой: есть детали, которые мы рассматриваем вблизи, и есть система целиком.
Поэтому логично говорить отдельно о макро- и микропространстве. Микропространство работает внутри отдельных элементов. Макропространство — между крупными блоками.
Микро: что происходит внутри компонента
Между иконкой и текстом есть отступ. Вокруг текста — внутренние поля. Между текстом и границей кнопки тоже остается пространство. Все это — микропространство.
То же самое происходит в тексте. Интерлиньяж, трекинг, расстояние между заголовком и абзацем — маленькие интервалы, которые влияют на восприятие конкретного элемента.
Макро: что происходит с экраном целиком
К макропространству относятся, например, поля страницы. Если текст почти касается краев экрана, сайт может выглядеть перегруженным. Если у контента есть понятные поля, появляется ощущение структуры.
Можно идеально подобрать интерлиньяж и расстояние между иконкой и текстом, но весь экран все равно будет выглядеть плохо, если секции случайно прыгают по вертикали.
Если между секциями расстояние 96 px, а между заголовком и текстом — 8 px, это должно быть осознанным решением, а не случайностью. Поэтому дизайнер работает не с отдельными отступами, а с системой расстояний.
Использование негативного пространства в логотипах
Пустота сама по себе может перестать в новый объект — так появляются скрытые фигуры. Мы видим одну форму, а потом замечаем внутри нее вторую. И после этого уже сложно смотреть на объект по-старому.
Стрелка в логотипе FedEx
Самый известный пример негативного пространства — логотип FedEx. Если присмотреться, то между буквами E и x есть стрелка. Она возникает из пространства между буквами. Зритель сначала считывает название бренда, а потом замечает дополнительный смысл — движение вперед.
Медведь в Toblerone
С упаковкой шоколада Toblerone похожая история. Сначала мы видим Маттерхорн — гору, которая давно стала частью визуального образа бренда. Но внутри ее силуэта спрятан медведь. Бренд Toblerone появился в 1908 году в швейцарском городе Берн, а медведь — один из символов города. В результате одна форма рассказывает сразу две истории бренда.
Буква C в Carrefour
Знак французской сети появился в 1966 году и представлял собой букву C внутри ромба: красная часть слева, синяя справа. Позже черные линии убрали, и буква стала менее очевидной. Сегодня многие видят сначала две цветные формы и только потом замечают C между ними.
Хороший прием негативного пространства не должен превращаться в головоломку. Если приходится пять минут искать спрятанную букву, дизайнер, скорее всего, перестарался. Скрытый смысл работает тогда, когда его можно заметить самостоятельно, а после объяснения он кажется очевидным.
Как научиться работать с пустотой: советы новичкам
Сначала определите группы
Определите, что с чем связано. Например:
Заголовок и описание — одна группа.
Описание и кнопка — следующая.
Кнопка и соседняя карточка — еще одна.
Когда эти отношения понятны, создать систему отступов становятся гораздо проще. Используйте принцип близости из гештальт-психологии: близко расположенные элементы воспринимаются как связанные. Поэтому расстояние между элементами внутри одной группы должно быть меньше, чем между самими группами.
Работайте с системой
Вместо того чтобы ставить отступ 17px здесь, 23px там и 41px ниже, задайте систему. Например, выберите базовый шаг (обычно это 4px) и собирайте отступы из его значений. Важно, чтобы одинаковые отношения между элементами и группами повторялись.
Если два одинаковых компонента имеют разные внутренние отступы без причины, пользователь может этого даже не осознать, но интерфейс будет выглядеть менее аккуратным.
Увеличивайте пространство постепенно
Когда макет кажется тесным, не нужно сразу увеличивать все отступы в три раза. Сначала попробуйте добавить немного воздуха только между крупными группами. Потом увеличьте расстояние между секциями. Затем проверьте текст. Так станет понятно, какой именно отступ решает проблему.
Используйте сетку
Сетка нужна не только для того, чтобы выровнять объекты. Она помогает понять, где заканчивается одна визуальная группа и начинается другая. Если все секции лендинга построены по одной системе, пространство между ними тоже начинает восприниматься как часть этой системы.
Проверяйте макет целиком
На увеличенном макете легко решить, что отступ 64 px выглядит слишком большим, но если посмотреть целиком, именно этот отступ может оказаться тем, что держит композицию. Поэтому периодически отдаляйтесь от макета.
Не рассматривайте каждый компонент отдельно. Проследите, куда движется взгляд, где он останавливается и насколько легко понять структуру страницы. Это особенно важно для макропространства.
Частые вопросы
Обязательно ли негативное пространство должно быть белым? Нет. White space («белое пространство») — исторически привычный термин, но негативное пространство может быть любого цвета. Оно может совпадать с фоном, быть частью фотографии или даже образовываться внутри другого объекта.
Если область помогает разделить элементы или создать дополнительную фигуру, она работает как негативное пространство.
Может ли негативного пространства быть слишком много? Да, если элементы расположены слишком далеко, они могут перестать восприниматься как связанные. Пользователю придется самостоятельно искать отношения между ними. Поэтому задачей будет найти такое расстояние, при котором композиция остается одновременно свободной и связной.
Как объяснить клиенту, что пустое место не нужно заполнять Лучше всего показать в сравнении. Сделайте два варианта макета: один с минимальными отступами, а второй с продуманным пространством. А затем объясните, что именно изменилось и почему, например, заголовок и CTA теперь считываются быстрее.
Когда у воздуха в дизайне появляется конкретная задача, он перестает восприниматься как свободное место, которое нужно чем-нибудь занять.
