«Воздухом» в веб-дизайне называют свободное пространство между элементами страницы: поля вокруг текста, отступы между блоками, расстояние между строками и кнопками. В англоязычных материалах то же самое называют white space или negative space. Пустое место не обязательно белое: это может быть цветной фон, градиент или спокойная фотография, на которой ничего не происходит.
Новички часто воспринимают свободное место как недоработку и стараются заполнить его баннерами, иконками и лишним текстом. На деле именно воздух делает страницу читаемой: глаз быстрее находит заголовок, понимает, какие элементы связаны между собой, и замечает кнопку целевого действия.
Какой бывает воздух
Удобно разделять свободное пространство на два уровня.
- Макропространство — крупные промежутки: поля по краям страницы, расстояние между секциями, пустые зоны вокруг первого экрана. Они задают ритм всей страницы и отделяют одну смысловую часть от другой.
- Микропространство — мелкие интервалы: межстрочное расстояние, отступы между абзацами, расстояние от подписи до картинки, внутренние поля кнопок. От них зависит, насколько легко читается текст.
Ещё одно полезное различие — активное и пассивное пространство. Пассивное появляется само собой, например поля внутри колонки. Активное дизайнер оставляет намеренно, чтобы выделить главный элемент: крупный заголовок посреди пустого экрана или единственную кнопку в отдельной секции.
Зачем нужен воздух на сайте
Текст легче читать
Длинный абзац без отступов, набранный плотно, утомляет даже на большом мониторе. Межстрочный интервал около 1,4–1,6 от размера шрифта и заметный отступ между абзацами заметно упрощают чтение. Строку тоже не стоит растягивать на всю ширину экрана: комфортной считается длина примерно в 60–80 знаков.
Понятно, что с чем связано
Элементы, стоящие близко друг к другу, воспринимаются как группа. Если подпись находится ближе к следующей фотографии, чем к своей, посетитель запутается. Правило простое: внутри группы отступы меньше, между группами — больше.
Главное заметнее
Кнопка «Записаться» в окружении пустого пространства привлекает внимание сильнее, чем такая же кнопка, зажатая между тремя баннерами. Чем больше воздуха вокруг элемента, тем выше его визуальный вес.
Сайт выглядит аккуратнее
Просторная компоновка ассоциируется с порядком и продуманностью. Для сайтов услуг, портфолио и интернет-магазинов это работает на доверие к бренду.
Как добавить воздух в редакторе Wix
Проверьте поля секций. Выделите секцию или полосу и увеличьте её высоту, чтобы содержимое не прилипало к верхнему и нижнему краям. Одинаковые отступы у соседних секций создают ровный ритм страницы.
Настройте межстрочный интервал. В панели настроек текста откройте параметры интервалов и увеличьте межстрочное расстояние и расстояние между абзацами. Сохраните удачные настройки в темах текста, чтобы не повторять их для каждого блока.
Ограничьте ширину текстовых блоков. Не растягивайте текстовое поле на всю ширину сетки: узкая колонка читается легче, а по бокам остаётся естественное пустое пространство.
Выравнивайте по сетке. Включите линейки и направляющие, используйте инструменты выравнивания и распределения. Равные промежутки между карточками, кнопками и иконками выглядят аккуратнее, чем расставленные на глаз.
Добавьте внутренние поля кнопкам и контейнерам. Текст внутри кнопки или карточки не должен касаться её границ. Небольшие внутренние отступы делают элемент визуально легче.
Уберите лишнее. Каждый элемент на странице должен решать задачу. Декоративные полосы, повторяющиеся иконки и дублирующие тексты лучше удалить, чем уменьшать отступы, чтобы всё поместилось.
Воздух в мобильной версии
Мобильный редактор Wix собирает версию для смартфонов автоматически, и отступы в ней часто получаются неравномерными. После переключения на мобильный вид пройдите страницу сверху вниз:
- уберите слишком большие пустые зоны, которые остались от широких десктопных секций;
- проверьте, что между кнопками достаточно места, чтобы по ним было удобно попадать пальцем;
- скройте декоративные элементы, которые на маленьком экране только отнимают место;
- убедитесь, что текст не прижат к краям экрана.
Типичные ошибки
- Слишком много пустоты. Если между блоками приходится долго прокручивать пустой экран, посетитель решит, что страница закончилась. Воздух должен связывать содержимое, а не разрывать его.
- Разные отступы без причины. Когда расстояния между похожими блоками каждый раз разные, страница выглядит небрежно. Выберите два-три стандартных шага отступов и придерживайтесь их.
- Экономия места на первом экране. Попытка уместить на первый экран всё сразу — меню, слайдер, три оффера и форму — обычно приводит к тому, что посетитель не видит ничего из этого.
Короткий чек-лист
- Заголовок, текст и кнопка каждой секции читаются как одна группа.
- Между секциями отступы больше, чем между элементами внутри секции.
- Строки текста не длиннее 60–80 знаков, межстрочный интервал не меньше 1,4.
- Вокруг главной кнопки есть свободное место.
- Мобильная версия проверена отдельно.
Воздух — один из самых простых способов сделать сайт на Wix аккуратнее без новых картинок и платных шаблонов. Начните с одной страницы: увеличьте отступы, сократите лишнее и сравните, насколько легче её стало читать.