От автора: в веб-дизайне к пустому пространству относят области без текста и изображений. Можно сказать, что это «визуальная тишина». Чтобы наш дизайн функционировал, необходимо правильно сочетать пустое пространство с используемым.
Прежде чем начать, посмотрите видео ниже. Роуэн Аткинсон: добро пожаловать в ад:
Что вы заметили? Конечно, невероятное остроумие Роуэна. Но заметили ли вы, как он использует тишину, чтобы заставить людей смеяться? Этот прием называется комический выбор времени, один из важнейших навыков, которым должен обладать успешный комик.
Представьте выступление Роуэна Аткинсона без этих пауз. Не очень смешно, потому что именно тишина делает шутку смешной. У этой тишины очень важная задача.
То же самое можно сказать и про музыку. Хотя там это может быть лишь затишье перед резким нарастанием ритма, а не полная тишина.
Заметили, как в примере выше «падает» бит на 0,45 и 1,29? Тишина придает драматизма будущим событиям. Я взял танцевальный трек, но с легкостью мог взять пятую симфонию Бетховена.
В обоих примерах тишина – критический фактор привлечения внимания. Точно так же работает пустое пространство. В веб-дизайне к пустому пространству относят области без текста и изображений. Можно сказать, что это «визуальная тишина». Чтобы наш дизайн функционировал, необходимо правильно сочетать пустое пространство с используемым.
Хотя Google не всегда славились своими дизайнерскими навыками, они всегда были сторонниками пустого пространства, что заметно по их домашней странице. Google запустили свой редизайн, когда страницы их конкурентов типа Yahoo! были плотно упакованы прогнозами погоды, новостями и почтой. Интерфейс без излишеств позволил пользователям сосредоточить внимание на основной задаче – поиске в интернете, не отвлекаясь на то, что им не нужно.
Трудно по-настоящему оценить, насколько радикальны были решения в дизайне за последние 20 лет, но мы знаем на кого смотреть в этом плане.
Два типа пустого пространства
Активное пустое пространство: пространство между элементами дизайна, часто используемое для постановки визуального ударения и структурирования. Это ассиметричный тип пространства, делающий дизайн более динамичным и активным.
Пассивное пустое пространство: пространство между словами в строке или пространство вокруг логотипа и других графических элементов.
Взгляните на домашнюю страницу 500px, как на ней используется активное и пассивное пустое пространство.
При работе с пространством мы в основном смотрим на активное пустое пространство, однако пассивному пространству также нужно уделять достаточно много внимания и тому, как оно работает с дизайном.
Два размера пустого пространства
Пустое микропространство: данный термин относится к небольшим площадям пустого пространства между буквами и словами, а также между несколькими графическими элементами. Правильная настройка пустого микропространства задает общий тон для всего дизайна, не меняя его главного компонента. Что-то похожее на ритм в танцевальных песнях. Песня та же, но какая-то сонная.
На скриншоте выше показано пустое микропространство между кнопками Log In и Sign up, а также между заголовком и параграфом.
Пустое макропространство: данный термин описывает большие объемы пустого пространства. Например, пространство между колонками или параграфами. Оптимизация макропространства зачастую может кардинально изменить ваш дизайн, потенциально улучшив поток внимания и ритм на веб-странице.
В дизайне Tumblr пустое макропространство четко прослеживается в пустом футере и боках.
Пустое пространство белого цвета?
Термин пустое пространство подразумевает отсутствие цвета или тона, что может сбить с толку. Пустое пространство, на самом деле, может быть любого цвета, который отвечает в вашем дизайне за пустоту – желтый, синий, зеленый или даже текстура (как в примере Todoist ниже).
Ваш выбор цвета не имеет никакого значения, однако не стоит забывать, что на цвета и текстуры куда приятнее смотреть, чем на суровый белый. Принцип сохраняется, даже если вы выберите другой цвет или текстуру.
Где и как использовать пустое пространство
Пустое пространство и элементы призыва к действию (CTA)
Всегда представляйте, что пользователь не знает, куда двигаться дальше, и правильно проектируйте пустое пространство. Идея проста – если рядом с кнопкой на странице ничего нет, значит, на нее необходимо нажать. И наоборот, если страница забита элементами, пользователь даже не заметит эту кнопку из-за беспорядка.
Как видно по изображению выше, второй CTA элемент намного привлекательнее, чем первый, так как он не захламлен другими элементами.
Использование пустого пространства для эмоционального отклика
Существует множество способов вызвать эмоции в дизайне, среди которых шрифты, цвет и изображения. Все эти способы помогают добавить драматизма, однако пустое пространство является самым сильным компонентом и менее затратным. Некоторые называют это хорошим вложением средств.
На скриншоте выше видно, как Todoist использует пустое пространство вокруг заголовка, заставляя фоновое изображение сиять и передавать положительные эмоции. Также они взяли изображение со счастливым парнем, а не приложением, что тоже большой плюс.
Как побороть желание заполнить пустоты
Как дизайнеры и просто люди, у нас есть природное желание заполнить пустое пространство. Когда мы покупаем большой шкаф, гараж или дом, заполнить это новое пространство у нас не занимает много времени.
Эта привычка часто переходит и на дизайн. Стоит нам только заметить пустую область в нашем дизайне, мы начинаем думать «Чем бы его заполнить?». Такое мышление может вызвать проблемы у дизайнеров.
Не заполняйте свой дизайн элементами, попробуйте разместить одну CTA кнопку в центре и создать вокруг нее «безопасную зону» (пустое пространство). Помните, что пустое пространство не бесполезное пространство.
Кто хорошо использует пустое пространство?
За всю свою историю Volkswagen был мастером применения пустого пространства в рекламе в журналах. С самого начала их простые, но динамичные макеты выделялись среди статичной журнальной рекламы.
Макропространство четко прослеживается над и под автомобилем, что ставит авто в центр внимания. Несимметричность пустого пространства заставляет нас пройтись глазами по автомобилю, вниз к тексту и обратно наверх. Глаза не стоят на месте. Что если мы немного обрежем рекламу VW?
Основные компоненты на месте, но реклама уже не оказывает такого эффекта, как раньше:
автомобиль кажется менее впечатляющим;
взгляд уже не так легко порхает над макетом;
сложнее преподнести историю с упавшим в обморок мужчиной.
Как видно на изображениях внизу, с 1960-х до сегодняшнего дня Volkswagen использовал пустое пространство для достижения большего эффекта.
По сравнению с Volkswagen компания Apple новичок, но уже показала себя ярым приверженцем дизайна с пустым пространством – от их сайта, изделий и до знаменитого дизайна и архитектуры Apple store.
Заключение
Мы узнали, что пустое пространство не белое, а также что это то место в дизайне, где ничего не происходит. Крайне важный принцип в дизайне, про который нельзя забывать дизайнерам. Именно пустое пространство решает, можно ли работать со страницей или нет, а также нужно ли придать какому-то элементу дополнительное внимания.
Мы узнали, что пустое пространство бывает двух типов (активное и пассивное) и двух размеров (микро и макро). Мы рассмотрели пример эквивалента пустого пространства в комедии (комичный выбор времени), как он заставляет людей смеяться, а также изучили пример пустого пространства в музыке.
Наконец, как дизайнер хочу добавить «чем меньше, тем больше». От этого и отталкивайтесь в своей работе. Пустое пространство может сделать дизайн лучше, а может сломать его. Надеюсь, эти идеи помогут вам в вашем следующем дизайне.
Автор: Saad Al-Sabbagh
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
