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

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

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

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

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

Значимость «воздуха» в дизайне и в искусстве в целом была признана в начале ХХ века. Естественно, вслед за этим свободное пространство стало активно использоваться и в более узком направлении — дизайне сайтов.

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

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

2) Легко воспринимать текст. Наверняка, вы видели сайты с длинными «полотнами» из букв, как их называют. От одного только взгляда на них становится понятно, каким утомительным занятием окажется его чтение. И совершенно другое дело, когда тексты логически разбиты на абзацы, между которыми достаточно «воздуха», чтобы глаз мог отдохнуть в процессе изучения информации.

3) Создавать визуальную иерархию. Активно работая с пробелами — уменьшая и увеличивая их, — можно создать целую систему: выделить наиболее важную информацию, менее полезную и обладающую самой низкой ценностью. Например, вам необходимо акцентировать внимание посетителей сайта на бесплатной консультации, блок с информации о ней, вы отделяете от остальной информации самыми большими горизонтальными пробелами. Следующая по значимости информация — о высокой компетентности специалистов, ее вы можете выделить немного меньшим количеством «воздуха» сверху и снизу. И т.д.

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

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

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

1) Длинный текст с минимальным количеством «воздуха». Да, эту проблему мы уже упоминали выше, но она до сих пор встречается часто и достаточно сильно влияет на конверсию (не лучшим способом). Поэтому мы не только хотели бы напомнить о ней в разделе про ошибки, но и ставим ее здесь на первое место.

2) Нет единства в системе отступов. Например, равнозначные по важности блоки могут быть отделены друг от друга разным количеством «воздуха».

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


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