Сила белого пространства

Структуру веб-страницы задают много разных визуальных объектов. Заголовки, тексты, иконки, изображения и так далее. Белое пространство (негативное пространство, «воздух») — это фон, который объединяет в дизайне все элементы вместе, позволяя им выделиться.

Давайте посмотрим, почему белое пространство так важно.

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

К сожалению, многие заказчики и менеджеры воспринимают белое пространство как упущенную выгоду. Столько пустого места! Можно же заполнить его «продающим» текстом, ну или хотя бы картинку поставить для привлечения внимания.

Напротив, белое пространство — прекрасный инструмент для сбалансирования визуальных элементов и организации контента для улучшения визуальной коммуникации.

Дизайнер должен учитывать другие детали интерфейса, используя незаполненную область, и экспериментировать, чтобы найти необходимый баланс между ней и остальными элементами.

Микро-белым пространством называется небольшое пространство между элементами дизайна. Вы можете его увидеть, например, между строками и абзацами. Оно также включает в себя промежутки между сеткой изображений и разделяет пункты меню.

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

Макро-контрформа — большое пространство между основными элементами и пространство, окружающее все элементы. Его можно увидеть справа и слева контента большинства веб-сайтов, а также между смысловыми блоками контента.

Макро-пространство служит «контейнером» для всего дизайна.

Пожалуй, лучший пример сайта, который интенсивно (и эффективно) использует макро-белое пространство — google.com. Страница замечательно проста, но заметили ли вы что-то еще? Эта простота еще и успокаивает. Там нет беспорядка, там меньше работы для глаз и разума. Вы спокойно можете сконцентрироваться на том, зачем вы сюда пришли: погуглить!

Есть отличная история, почему Google остановился на таком решении домашней страницы. Google.com был первым из сайтов, начавших использовать обширное негативное пространство (контрформу). Когда они начинали, скорость Интернета была гораздо медленнее, чем сейчас.

Участники пользовательского тестирования ждали загрузки страницы, несмотря на то, что все уже появилось на экране. Они просто не привыкли видеть столько пустого пространства на сайте! После этих тестов дизайнеры Google решили добавить копирайт в нижней части страницы, чтобы люди знали, что страница полностью загрузилась.

Чем больше в макете информации, тем меньше макро-белого пространства. Но микро-белого, соответственно, становится больше. Этот компромисс имеет огромное значение, иначе страницы будут просто «кусками» информации, которые будет крайне трудно прочитать.

К примеру, новостные сайты полагаются на микро-незаполненное пространство для обеспечения пользователям удобочитаемости контента. Комфортное восприятие информации читателем имеет критическое значение.

Использование негативного пространства в онлайн-журналах:

Дизайн пользовательского интерфейса значительно влияет на соотношение между микро- и макро- контрформой в макете. Выбор стилистического решения является решающим фактором при выборе того или иного преобладающего пространства.

Для определения правильного баланса макро- и микро- белых пространств для конкретной аудитории проводится тестирование пользовательского опыта. Нет теории, которую можно применить ко всем пользователям. Как всегда в User Experience мы должны основываться на данных, полученных в результате исследования целевой аудитории.

Использование контрформы может говорить о бюджете компании и, соответственно, о качестве продукта. Подумайте о брендинге таких компаний, как Apple, Mercedes Benz и IKEA. Как они подтверждают эту теорию?

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

Используется для улучшения эстетического восприятия страницы через конкретное чтение и расположение контента. Например, негативное пространство между строками и абзацами функционирует таким образом:

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

Как мы видим, микро-белое пространство — это ключ к понятному и разборчивому контенту. Вы должны учитывать контрформу при выборе характеристик типографики, таких, как шрифт, размер, цвет, стиль, интерлиньяж (расстояние между базовыми линиями соседних строк), кернинг (интервал между двумя буквами в зависимости от их формы) и трекинг (равномерное увеличение или уменьшение промежутков между буквами на каком-либо участке текста).

Помните последний пример с текстами? Использование пустого пространства в дизайне влияет на удобочитаемость и общее впечатление пользователя. Счастливые читатели скорее всего останутся на вашей странице.

Негативное пространство задает тон всему дизайну. Веб-сайты с большим количеством макро-белого пространства отражают минимализм и утонченность. Сайты с меньшим количеством макро-белого пространства чаще всего бывают информативными, как в случае новостных сайтов.

Эти признаки не «высечены на камне». Всегда лучше протестировать использованную контрформу на ваших пользователях. Только они смогут сказать, как они воспринимают ваш дизайн.

Контрформа помогает пользователю сориентироваться в контенте. Она также определяет точки фокуса и направляет внимание пользователя на конкретные части страницы.

На этапе проектирования сайта важно определить приоритеты — что на странице самое главное.

Для выделения ключевых элементов можно использовать разные визуальные инструменты: цвет, размер, форма. И один из способов акцентировать внимание посетителя — поэкспериментировать с объемом незаполненного пространства вокруг этих точек фокуса.