Негативное пространство: как делать дизайн из «воздуха»

Дистанция спасает дизайн! И пандемия тут ни при чём. Белый фон несёт более важную миссию, чем тысячи цветных пикселей.

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

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

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

Дарья Тамилина

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


Почему это важно

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

Мы воспринимаем любую форму благодаря контрасту с фоном и взаимодействию с другими формами.

Теперь посмотрим на интерфейс сайта.

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

А вот так я похулиганила:

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

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

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

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

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

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

У Slack в знаке больше деталей, охранная зона равна высоте всего логотипа. А у Asana лаконичный знак, и охранная зона равна высоте строчной буквы (гораздо меньше высоты логотипа)

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

Ещё можно использовать фон не только в утилитарных, но и в художественных целях. Вы наверняка знаете картинки-перевёртыши.

Такой приём можно использовать при создании логотипов и иллюстраций

Картинки-перевёртыши не только занимательно рассматривать. Они ещё и учат нас относиться к фону как к полноценной части композиции.

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

Работаем с типографикой

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

Двигать можно трекинг (расстояние между всеми знаками) и кернинг (расстояние между конкретными парами знаков).

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

Мы избавились от «хвоста» с помощью увеличения межбуквенных интервалов

Когда текст длинный, удобно уменьшать трекинг. Я показываю короткий текст, и при уменьшении на 5% висячая строка никуда не делась. Даже 10% тут не спасают положение. Поэтому я увеличила интервалы на 5%, слово «строку» не вместилось и ушло вниз, весь текст подвинулся. И на последней строчке уже целых четыре слова, а это вполне терпимо.

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

Сверху надпись капсом с «заводскими» настройками, снизу — с увеличенным на 20% трекингом

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

Здесь с помощью уменьшения кернинга буквы сцепились друг с другом

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

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

Мы обращаем внимание на симпатичное сочетание букв, белый фон не отвлекает нас

Представьте эти буквы, стоящие в одной строке последовательно. Сверху и снизу от диагонали у N очень много пустого пространства. Буква Y, наоборот, узкая и плотная. Они бы не были гармоничными. А при наложении букв друг на друга огромные белые пятна исчезли, негативное пространство распределяется относительно равномерно.

Нередко в логотипах создают отдельные фигуры из фона. Вот самый известный пример:

Вы уже знаете о спрятанной стрелочке между E и X?

Это надпись шрифтом Futura Bold, буква X изначально была более высокой. Её слегка сплющил дизайнер, чтобы получилась стрелка. Такая компоновка придаёт надписи завершённый проработанный вид, хотя саму стрелку многие могут и не заметить.

Работаем с картинками

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

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

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

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

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

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

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

Здесь можно увидеть женскую фигуру и мужское лицо

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

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

Как подружить картинки с текстом

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

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

Расстояние между картинкой и надписью гораздо меньше высоты строки

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

Теперь пройдёмся по сайтам. Вот блок с буллитами — списком текстовых элементов и иконок:

Здесь расстояние от текста до иконок меньше, чем между подзаголовками и основным текстом

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

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

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

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

Подытожим

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


Хотите круто проектировать интерфейсы и улучшать пользовательский опыт? Записывайтесь на наш курс по веб-дизайну. Вы научитесь работать в Photoshop и Figma, создавать качественные интерфейсы для ПK и мобильных девайсов.

Курс

Профессия Веб-дизайнер


Двухлетний учебный курс для глубокого погружения в профессию дизайнера. Вы разберётесь в тонкостях веб-дизайна, изучите UX/UI и к концу обучения наработаете хорошее портфолио.

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

Хочешь получать персональную подборку статей по дизайну?
Подпишись на рассылку Skillbox