Пустое пространство (whitespace) в дизайне

Что такое whitespace

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

Начинающие заказчики часто просят «заполнить пустое место». Но профессиональные дизайнеры знают: whitespace — не пустота, а молчание между нотами, которое делает музыку музыкой.

Виды whitespace

Макро-whitespace

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

Микро-whitespace

Мелкие отступы внутри компонентов: между строками текста (line-height), между буквами (letter-spacing), внутри кнопок (padding), между элементами списка. Микро-whitespace определяет читаемость и «полированность» дизайна.

Зачем нужен whitespace

Читаемость

Текст без отступов — стена символов, которую невозможно читать. Типографика работает только с правильными отступами: line-height 1.5–1.7, отступы между абзацами, поля текстового блока.

Визуальная иерархия

Больше пространства вокруг элемента = больше внимания к нему. Hero-секция с большими отступами выглядит значительнее, чем сжатая. CTA-кнопка с пространством вокруг заметнее, чем зажатая между текстом и картинкой.

Группировка

Закон близости Гештальта: элементы, расположенные рядом, воспринимаются как группа. Меньше пространства внутри группы, больше — между группами. Заголовок ближе к своему тексту, чем к предыдущему блоку.

Элегантность

Премиальные бренды используют больше whitespace. Сравните Apple.com (много пространства) с AliExpress (плотная компоновка). Whitespace создаёт ощущение качества и уверенности.

Фокус

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

Правила работы с whitespace

Система отступов

Используйте кратные значения: базовый отступ 8px, шаг × 2 (16px), × 3 (24px), × 4 (32px), × 6 (48px), × 8 (64px), × 12 (96px). Это создаёт ритм и порядок. Все отступы на сайте — из этой шкалы.

Правило связанности

Отступ между элементами одной группы < отступ между группами. Заголовок H2 → отступ 16px → текст → отступ 48px → следующий H2. Заголовок визуально «прилипает» к своему контенту.

Адаптивность

На мобильных пространства меньше, но пропорции сохраняются. Если между секциями 80px на десктопе — на мобильных 48px, не 10px. Адаптивный дизайн масштабирует whitespace, а не убирает.

Баланс

Слишком много whitespace — страница кажется пустой и незавершённой. Слишком мало — давит и путает. Баланс зависит от контента и аудитории. Для лендинга — больше пространства. Для новостного портала — меньше.

Whitespace в разных элементах

Кнопки

Padding внутри кнопки: минимум 12px по вертикали, 24px по горизонтали. Кнопка с маленькими отступами выглядит «зажатой». Между кнопкой и окружающим контентом — минимум 16px.

Карточки

Padding внутри карточки: 16–24px. Расстояние между карточками: 16–24px. Если карточки слипаются — теряется граница между ними.

Текстовые блоки

Максимальная ширина текста: 720px (65–75 символов). Отступы по бокам: минимум 16px на мобильных. Между абзацами: 1em (размер шрифта). Подробнее — в статье о типографике.

Секции страницы

Вертикальные отступы между секциями: 64–120px на десктопе, 48–80px на мобильных. Секции отделяются пространством, а не линиями — пространство работает чище.

Убедить заказчика

Заказчики часто просят «заполнить пустоту». Аргументы:

• Покажите A/B тест: версия с whitespace конвертирует лучше
• Покажите конкурентов из премиум-сегмента — они все используют пространство
• Объясните: «пустое пространство — это не бесплатное место для рекламы, а функциональный элемент, как паузы в речи»

Хотите профессиональный дизайн с правильным использованием пространства? Свяжитесь с нами — мы создаём сайты, где каждый пиксель работает.