Руководство по эффективному использованию пустого пространства в веб-дизайне

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

Но это не пустая трата места! Это важный элемент дизайна и мощный инструмент для эффективного веб-дизайна. На самом деле, это так же важно, как и содержание веб-сайта. «Разумное использование пустого пространства дает вашему контенту пространство для дыхания. ” Это помогает создать сбалансированный интерфейс, который легко читается и не перегружает посетителей.

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

«Часто называемое «негативным пространством» или «открытым пространством», пустое пространство — это пространство, оставленное между другими элементами страницы. ” Он охватывает все: от межстрочного и межбуквенного интервала до пространства, окружающего текст и изображения, до полей и промежутков.

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

Вот руководство по эффективному использованию пустого пространства в веб-дизайне.

1. Улучшите читаемость текста

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

Правильное использование пробелов в тексте может повысить читаемость до 20%. При разработке страницы подумайте о полях абзаца и межстрочном интервале. «Количество пробелов должно отражать паузы, которые посетитель делает во время чтения. Это как визуальная передышка для глаз. ”

2. Организуйте свой контент

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

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

Что касается текста, закон близости помогает нам понять текст в целом, используя абзацы для группировки идей. Также полезно при разработке форм размещать метки ближе к соответствующему полю для ясности.

3. Создайте фокус и акцент

Загроможденный интерфейс перегружает ваших посетителей, сбивая их с толку слишком большим количеством информации и теряя основное сообщение страницы среди всего этого шума. Убрав эти отвлекающие факторы, вы привлечете внимание посетителей к самому важному элементу страницы. Чем больше белого пространства вокруг объекта, тем больше к нему притягивается взгляд.

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

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

4. Структурируйте свой контент

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

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

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

5. Создайте впечатление роскоши

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

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

6. Он не обязательно должен быть белым!

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

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

«Пробелы — это не лишнее пространство — они могут быть лучшим другом веб-сайта. ” Эффективное использование пустого пространства создает приятный, удобный и удобный дизайн, с которым легко взаимодействовать.

Как вы используете пустое пространство в своих проектах? Есть ли у вас какие-либо советы, чтобы добавить в список? Расскажите нам в комментариях ниже.

Продолжайте учиться с нашей серией «Психология дизайна»!

Ознакомьтесь с первой частью сейчас и убедитесь, что вы подписаны на Layout, чтобы знать, когда будут выпущены новые выпуски!