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

Понятие пространства в веб-дизайне

Пространство в веб-дизайне - область между элементами сайта, которая не заполнена контентом. Под этим понятием также можно понимать способ расположения элементов на сайте.

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

Существует два вида пространства:

  1. Макро-пространство. Данным термином называют пробелы между основными элементами веб-страницы и пространство вокруг каждой детали.
  2. Микро-пространство. Это небольшие промежутки внутри элемента: межстрочные интервалы в тексте, промежутки между картинками, разделители и прочее.

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

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

Зачем нужно свободное пространство на сайте

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

Фокус на отдельном элементе

С помощью пространства можно выделить предмет на фоне. Ярким примером является главная страница компании Google:

Фокус на отдельном элементе

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

Позиционирование

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

Позиционирование

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

Акцентирование

Расставление акцентов на странице также возможно с помощью свободного пространства. Например, если дизайнеру поставлена задача выделить кнопку для целевого действия, то можно выделить ее пробелами. Главное в создании композиции - несмотря на разделение объектов, должно быть ощущение единого целого и важная информация не должна теряться в окружении других блоков.

Создание индивидуального стиля

Белое пространство может стать своеобразной «фишкой» компании и сделать дизайн уникальным. Такие стилистические решения запоминаются пользователям и выделяют сайт среди конкурентов.

На что влияет пространство на сайте

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

1. Читаемость текста

Регулируя межстрочные интервалы, абзацы и отступы создается разборчивый и удобочитаемый текст. Большие междустрочные пробелы упрощают чтение, ведь пользователь разделяет текст на несколько частей и его взгляд охватывает гораздо меньше контента. Сравните два абзаца:

Читаемость текста

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

заголовки и фоновые надписи

2. Стиль проекта и узнаваемость бренда

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

необычное расположение блоков

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

3. Восприятие пользователем информации

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

В 2000-х прослеживалась тенденция загромождать сайт мелкими элементами, и целевые действия выделялись только ярким цветом и тенями (мы писали об этом в статье об устаревшем дизайне). На таких сайтах было много изображений и анимаций, разрозненная цветовая гамма и очень много информации, которая как будто «давила» на пользователя. Сейчас намного эффективнее пользоваться отступами и свободным пространством, которое как будто заполняет пробелы воздухом и дает возможность «вздохнуть»:

Восприятие пользователем информации

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

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

Призыв к действию

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

Призыв к действию

Выделение продукта

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

Выделение продукта

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

Подчеркивание фонового изображения

Пространство не обязательно должно быть однотонным. На этом примере мы видим, как с помощью изображения и простой надписи дизайнеры создают стильный первый экран:

Подчеркивание фонового изображения

Установление связи между элементами

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

Установление связи между элементами

Упрощение структуры страницы

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

Упрощение структуры страницы

Товары визуально отделены друг от друга, и макет при этом выглядит аккуратно и стильно.

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

7 примеров применения пространства в веб-дизайне

Рассмотрим реальные примеры размещения элементов на сайтах с применением белого пространства.

1. Фоновое изображение

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

Фоновое изображение

Такое решение выглядит достаточно изящно и стильно. Меню классически располагается сверху, никаких разделителей нет.

2. Однотонный фон и четкое изображение в центре

Компания занимается продажей велосипедов. Дизайн страницы подразумевает расположение элементов на большом расстоянии, продукт располагается в центре макета. Сайт не перегружен лишними деталями, кнопка располагается в верхнем правом углу и выглядит как стрелка. Внимание сразу же привлекает изображение товара:

изображение товара

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

3. Дизайн, основанный на типографике

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

портфолио дизайнера

Такие решения популярны в создании портфолио или представлении информации о компании. Крупная типографика привлекает внимание и клиент сразу обращает внимание на смысл заголовка, при прочтении возникают определенные образы и слова словно отпечатываются в памяти:

Крупная типографика

4. Симметричные заголовки и изображения

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

Симметричные заголовки и изображения

5. Соотношение текста и фотоконтента

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

Соотношение текста и фотоконтента

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

6. Вдохновение цветом

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

цветовые решения интернет магазин одежды

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

7. Пространство в карточке товара

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

Пространство в карточке товара

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

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

Студия дизайна IDBI в своих работах уделяет внимание различным аспектам веб-дизайна: как качеству предоставляемого контента, так и расположению элементов на макете. Грамотное использование пространства является одним из способов повышения продаж и создания стильного имиджа компании. Мы применяем современные технологии при разработке сайтов и обращаем внимание на мелочи.