Когда вы думаете о веб-дизайне вашего сайта, держу пари, пустое пространство ("воздух") не входит в ваш список. 😎
Вопреки тому, что вы могли бы подумать, воздух — это не пустота. Белое пространство, на самом деле, является одним из самых мощных креативных элементов в веб-дизайне.
Если вам интересно, что такое воздух и какую роль он может играть в дизайне вашего сайта, продолжайте читать. В этой статье мы дадим определение воздуху и поговорим о преимуществах его использования. Кроме того, мы рассмотрим некоторые примеры для наглядности.
Что такое "воздух" в веб-дизайне?
Воздух — это пространство вокруг и внутри элементов веб-дизайна, таких как изображения, логотипы и текст. Ниже приведены примеры различных типов пустого пространства:
Широкие поля на странице
Пробелы между текстовыми блоками и между буквами (кернинг в типографике)
Пространство внутри или вокруг изображений
Пустое пространство приобрело популярность в первой половине 20 века. С тех пор художники и дизайнеры признали его значимость и универсальность, регулярно включая воздух в свои работы.
При разработке веб-сайта пустое пространство может сбалансировать визуальную часть, направить взгляд посетителей на ключевые моменты сайта и даже улучшить взаимодействие с пользователем. Пустое простраство не всегда должно быть белым или однотонным.
В приведенном ниже примере, градиентный фон считается пустым пространством, так как он обрамляет объект. Пространство между ссылками меню в шапке сайта также является воздухом:
Какие преимущества использования "воздуха" в веб-дизайне?
Хотя пустое пространство может быть «невидимым» для зрителя, оно играет важную роль в его пользовательском опыте, принося пользу как посетителям веб-сайта, так и бренду:
Повышает удобочитаемость: Благодаря правильному количеству пробелов между буквами, словами и строками посетители могут быстро читать и понимать ваш контент.
Создает гармонию: Современный Интернет кажется шумным и загроможденным,а хорошо сбалансированный веб-сайт с минималистичным дизайном и пустым пространством может помочь посетителям чувствовать себя в безопасности, комфортно и сосредоточенно.
Усиливает бренд: как элемент дизайна, пустое пространство может передать индивидуальность и стиль вашего бренда.
Помогает организовать: при разработке веб-сайта использование пустого пространства может помочь обеспечить визуальную иерархию. Воздух помогает создать связь между контентом на ваших страницах, повышая удобство использования вашего сайта.
Побуждает посетителей к действию: пустое пространство помогает выделять важные призывы к действию (CTA), направляя посетителей, например, на целевую встречу или покупку продукта.
Лучшие практики использования пустого пространства в веб-дизайне
Независимо от того, настраиваете ли вы шаблон веб-сайта или создаете сайт с нуля, при добавлении нового контента в дизайн используйте следующие рекомендации по пробелам:
01. Используйте как микро-, так и макро-пустое пространство
Микро- и макропустое пространство служат разным целям на вашем сайте.
Микро-пространство относится к пробелам вокруг мелких элементов на веб-странице, таких как текст. Оно необходимо для повышения удобочитаемости. Даже малейшее изменение этого пространства может ухудшить или улучшить читаемость.
Макро-пространство относится к большим пространствам на вашем сайте, например, между различными разделами на одной странице или изображениями в фотогалерее. Оно необходимо для улучшения взаимодействия с пользователем за счет повышения видимости и организации вашего контента.
02. Не переусердствуйте
Как вы уже поняли, пустое пространство может улучшить дизайн вашего сайта. Но бывает и обратная история. Чтобы убедиться, что каждое использование пустого пространства служит определенной цели, задайте себе следующие вопросы:
Это пространство выглядит слишком пустым?
Могут ли посетители легко читать и понимать то, что они видят?
Очевидно ли, на чем должны сфокусироваться глаза посетителей?
Мешает ли пустое пространство окружающим элементам или усиливает их?
Какое же идеальное количество пустого пространства должно быть на сайте? Помимо ваших личных предпочтений в дизайне, обеспечьте достаточно свободного пространства, для привлечения внимания ваших посетителей.
03. Управляйте визуальной иерархией с помощью пустого пространства
Визуальная иерархия веб-сайта помогает пользователюосуществлять безболезненное перемещение от бока к блоку. Загроможденные макеты веб-сайтов мешают посетителям понять, на каких элементах следует сосредоточить своё внимание.
Пустое пространство выделяет наиболее важные части страницы, очищая визуальную иерархию для посетителей и повышая их удовлетворение от взаимодействия с вашим брендом.
Приведенный ниже пример содержит 3 вида услуг, которые можно размещать несколькими способами. Правильное сочетание пустого пространства выстраивает четкую визуальную иерархию, облегчая посетителям чтение описания каждой услуги и возможность записаться.
04. Обратите особое внимание на пустое пространство вокруг ваших CTA
На самых удобных веб-сайтах есть кнопка призыва к действию:
для веб-сайта ресторана — Забронировать столик»;
для предприятий электронной коммерции — «Купить сейчас»;
для сайта-блога — «Подписаться».
Вы должны окружить CTA (целевую кнопку) вашего сайта пустым пространством. Это не означает, что вы должны изолировать свой контент, но вам необходимо добавить достаточно пустого пространства, чтобы посетители могли легко находить их, не отвлекаясь.
Кнопки призыва к действию — не единственный элемент дизайна, который выигрывает от пустого пространства. Подумайте о формах веб-сайта: если посетители не могут легко найти контактную форму или форму оформления заказа, они могут полностью отказаться от процесса регистрации.
05. Не забывайте о мобильных устройствах
Поскольку на небольших экранах меньше места для маневра, воздух также сильно влияет на мобильные веб-сайты.
Например, возьмем образец страницы «О программе» ниже. Под большим заголовком «About me» есть два абзаца. На рабочем столе это выглядит хорошо благодаря широким полям страницы.
Однако, когда вы переключаетесь на мобильную версию, обратите внимание, как сужаются поля. При просмотре веб-сайта с мобильного устройства эти абзацы могут выглядеть слишком длинными на узком экране.
Решение? На мобильных устройствах начните с учета опыта пользователей. Для удобочитаемости увеличьте размер шрифта или добавьте дополнительные разрывы абзаца. Затем начните экспериментировать с пустым пространством, чтобы улучшить внешний вид вашего мобильного сайта.
