Как использовать белое пространство в веб-дизайне

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

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

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

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

В графическом дизайне, однако, существует понятие, которое помогает дизайнерам создавать великолепный дизайн, делая контент привлекательным и легким для восприятия.

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

Что такое белое пространство?

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

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

Пример использования белого пространства для улучшения качества впечатления, можно увидеть у премиального бренда одежды COS.

Эволюция концепта белого пространства

Можно проследить историю белого пространства, если обратиться к «Новой типографике», которая вышла в 1920-х годах под руководством Яна Чихольда.

Подход базируется на следующих принципах:

ассиметричный баланс элементов; 
контент расположен согласно иерархии; 
намеренное использование белого пространства; 
использование шрифтов без засечек.

Кубок Беатрис Уорд

Еще один пример ранней концепции белого пространства в типографике находится в эссе Беатрис Уорд «Хрустальный Кубок» 1930 года.

Уорд описала два кубка: первый «из чистого золота, украшенный самыми восхитительными узорами», а второй «из кристально-чистого стекла, тонкого и прозрачного, как мыльный пузырь». Выбор одного из них показывает, истинный ли человек ценитель вина, или нет.

Хрустальный кубок раскрывает отношение человека к вину, «потому что все в нем рассчитано на то, чтобы раскрыть красивую вещь, которой кубок наполнен, а не скрыть ее».

Уорд придумала эту метафору к увеличению чистого пространства в печати и типографике. Она понимала, что правильное использование пространства помогает подчеркнуть контент.

Чего вы можете добиться с помощью белого пространства

То, что Чихольд и Уорд раскрывали в своих книгах, сегодня мы можем объяснить когнитивистикой.

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

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

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

Держите это в уме, и давайте посмотрим, что можно сделать в веб-дизайне с помощью белого пространства:

1. Веб-сайт проще просматривать

Сбалансированное расположение пустого пространства повышает простоту просмотра веб-сайта. Пользователи могут легко просматривать контент, и им легче найти искомое.

2. Улучшается читаемость контента

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

3. Повышается эстетика

Увеличение белого пространства и сокращение ненужных элементов может радикально улучшить внешний вид сайта.

Задайте себе вопрос, чего вам хотелось бы больше: зайти на сайт с кучей «хлама», поп-ап окон, баннеров и ненужных визуальных эффектов, или же на простой сайт, который легко смотреть и читать, и который сразу переходит к сути?

4. Впечатление высокого качества

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

Пустое пространство делает сайт более светлым и элегантным. Когда нет объектов, конкурирующих за внимание посетителя, пользовательский опыт улучшается. Отсутствие объектов, конкурирующих за внимание пользователей, улучшает опыт последних.

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

Все преимущества белого пространства мы рассмотрели, давайте применим их на практике. Вот несколько видов пустого пространства, которые можно использовать:

1. Макропространство

Это пространство между элементами. Помогает построить иерархию и обеспечить правильную работу сайта.

2. Микропространство

Микро-пространство представляет собой небольшие пробелы между элементами. Их можно использовать для более ясных и прозрачных макетов.

3. Активное пространство

Белое пространство, которое окружает объекты, привлекает внимание пользователей именно к этим элементам, увеличивая их заметность.

4. Пассивное пространство

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