Содержание
Что такое whitespace на самом деле
Термин «whitespace» вводит в заблуждение: речь идёт не о белом цвете, а о пространстве как таковом — независимо от его цвета. Чёрный фон с широкими полями содержит whitespace в полном смысле термина. Японский дизайн-принцип «ma» (間) — промежуток, пауза, интервал — точнее передаёт суть: это активное отсутствие, которое придаёт значение присутствию.
В веб-дизайне whitespace проявляется на нескольких уровнях: поля страницы (margins), отступы между разделами (padding, gap), межстрочник (line-height), межбуквенный интервал (letter-spacing) и пространство вокруг и внутри элементов интерфейса.
Всё это — одна система. Нарушение на любом уровне разрушает целостность: широкие поля при сжатом межстрочнике создают противоречие, которое пользователь чувствует, даже если не может сформулировать его причину.
Макро- и микропространство
Различение макро- и микропространства помогает работать с ними как с отдельными системами.
Макропространство — крупные интервалы: отступы между секциями страницы, поля вокруг иллюстраций, расстояние между заголовком и телом статьи. Оно определяет ритм страницы в целом, создаёт ощущение «воздуха» или его отсутствия.
Микропространство — мелкие интервалы: межбуквенный интервал, пространство между строками, отступы внутри кнопок и элементов навигации. Оно влияет на разборчивость и тактильное ощущение от интерфейса.
Распространённая ошибка: уделять внимание только одному уровню. Раскошные макроотступы при плохом микропространстве в типографике не создают ощущения качества — они создают ощущение пустоты, не наполненной смыслом.
Исследование Crazy Egg (2022): Увеличение пространства вокруг текстовых блоков на 20% при неизменном содержании повысило субъективную оценку «профессионального качества» сайта на 37% в пользовательском тестировании с 150 участниками.
Психология пространства
Мозг использует пространство как сигнал ценности. Это можно наблюдать в физическом мире: ювелирный магазин выставляет несколько украшений в большом пустом витринном пространстве, а дешёвый базар набивает витрину как можно плотнее. Сигнал деловое очевиден даже без ценников.
В цифровых интерфейсах работает та же механика. Плотная, заполненная страница сигнализирует об информационной перегрузке ещё до того, как читатель успеет прочитать хотя бы одно слово. Свободное пространство создаёт ощущение авторитетности, обдуманности и уважения к читателю.
Закон Хика (Hick's Law) утверждает: время принятия решения логарифмически возрастает с количеством вариантов. Whitespace — это инструмент уменьшения воспринимаемого числа вариантов: пространство изолирует элементы, делает их отдельными единицами, а не частью хаотического массива.
Книги о типографике и сами являются образцами использования пространства. Сравнение обложек и разворотов разных изданий — быстрый способ откалибровать своё восприятие.
Редакционная традиция воздуха
Premium-издания — The New Yorker, The Atlantic, Harper's Magazine, Monocle — исторически использовали значительно больше пространства, чем массовые таблоиды. Это не расточительство: большие поля и щедрые отступы были дифференцирующим сигналом качества, доступным только изданиям, не стремящимся вместить максимум рекламы на каждую полосу.
Когда интернет-издания в начале 2010-х перешли на более широкие макеты с увеличенными отступами, это было осознанным заимствованием эстетики печатных premium-изданий. Medium, Substack и подобные платформы построили свою «читательскую» репутацию в том числе через типографику и whitespace.
Сегодня принцип прост: больше пространства ассоциируется с более ценным контентом. Это может быть несправедливо по отношению к насыщенным изданиям — но это реальная психологическая механика, с которой работают дизайнеры.
Как использовать whitespace системно
Системный подход предполагает базовую единицу пространства и производные от неё. Большинство современных дизайн-систем используют множитель 4 или 8 пикселей: все отступы кратны этому базовому значению.
Для редакционного контента можно предложить следующую иерархию отступов:
- Между секциями страницы: 80–120px (вертикальный ритм крупного масштаба)
- Между заголовком и телом статьи: 32–48px
- Между параграфами: 16–24px (обычно через margin-bottom)
- Поля страницы (мобиль): 20–24px с каждой стороны
- Поля страницы (десктоп): минимум 48px, рекомендуется 80–120px
- Максимальная ширина текстовой колонки: 640–720px
Преодоление сопротивления клиентов
Один из наиболее распространённых запросов клиентов — «заполните всё это пустое место чем-нибудь». Это понятный рефлекс: кажется, что пустое пространство на дорогостоящем сайте — это расточительство. Контраргумент профессионала должен быть конкретным.
Во-первых, полезно показать сравнительные примеры: страницы с minimal whitespace и страницы с generous whitespace при одинаковом содержании. В большинстве случаев клиент, глядя на оба варианта, предпочтёт более воздушный — просто он не думает о пространстве как о дизайнерском инструменте.
Во-вторых, данные: конверсия, время на странице и показатель отказов статистически лучше у страниц с адекватным whitespace. Это не эстетический аргумент — это бизнес-аргумент.
"Добавить элемент на страницу легко. Удалить — требует уверенности. Оставить пространство — требует смелости."
— Оливия Кросс, редакционный дизайнер


