Как правильно использовать свободное пространство в веб-дизайне
Цифровое пространство расширяется с каждым днем, пользователи сайтов и мобильных приложений привыкли быстро «скроллить» веб-страницы, по диагонали читать тексты, оценивать посты и закрывать ресурсы одним кликом. Свободное пространство в дизайне сайтов - один из инструментов борьбы разработчиков за внимание клиентов и эффективный способ повышения конверсии. В этой статье рассмотрим на что влияет пространство и как правильно его использовать при создании макетов продающих сайтов.
Пространство в веб-дизайне - область между элементами сайта, которая не заполнена контентом. Под этим понятием также можно понимать способ расположения элементов на сайте.
Часто пространство называют «белым», хотя цвет - не обязательное условие. Это может быть как текстура, так и фон любого оттенка, главное, чтобы в области не было никакого контента. Данные пробелы не следует воспринимать как пустое место, это в каком-то смысле «клей», который соединяет элементы на странице.
Существует два вида пространства:
Использование того или иного варианта зависит от количества контента на макете и общей стилистики проекта. Например, для новостных сайтов важно построение блоков для облегчения читабельности статей, а для лендингов и интернет-магазинов - возможность привлечь внимание к продукту.
Пустота воспринимается некоторыми заказчиками как упущенная выгода - ведь на образованном пространстве можно разместить дополнительную информацию. Разберемся, зачем нужно использовать пробелы и как это влияет на конверсию интернет-магазина или продающего сайта.
Когда новый клиент приходит на сайт, первым делом он «сканирует» страницу и разделяет ее на несколько частей, в которых расположен различный контент - изображения, текст или другие элементы для взаимодействия. Пустое пространство помогает пользователю разделить контент на удобные для восприятия куски и сфокусироваться на деталях. Это похоже на паузы в музыкальной пьесе или выступления артистов на сцене, которые дают время слушателям для осознания и понимания информации. Что дает использование свободного пространства?
С помощью пространства можно выделить предмет на фоне. Ярким примером является главная страница компании Google:
Белое пространство фокусирует взгляд пользователя на поисковой строке и логотипе компании. Таким образом, с помощью пробелов можно расставлять смысловые ударения на веб-странице и привлекать внимание к важной информации.
Пробелы дают возможность дизайнерам организовать контент на сайте. Пустые места используют для улучшения условий для чтения текста, просмотра изображений и других действий пользователя. Особенно это заметно на информационных сайтах:
Как правило, такие ресурсы придают большое значение микро-пространству и регулируют интервалы до мельчайших подробностей.
Расставление акцентов на странице также возможно с помощью свободного пространства. Например, если дизайнеру поставлена задача выделить кнопку для целевого действия, то можно выделить ее пробелами. Главное в создании композиции - несмотря на разделение объектов, должно быть ощущение единого целого и важная информация не должна теряться в окружении других блоков.
Белое пространство может стать своеобразной «фишкой» компании и сделать дизайн уникальным. Такие стилистические решения запоминаются пользователям и выделяют сайт среди конкурентов.
Используя свободные места, можно повлиять на несколько параметров.
Регулируя межстрочные интервалы, абзацы и отступы создается разборчивый и удобочитаемый текст. Большие междустрочные пробелы упрощают чтение, ведь пользователь разделяет текст на несколько частей и его взгляд охватывает гораздо меньше контента. Сравните два абзаца:
Важно менять как межстрочный интервал, так и интервалы между абзацами. Это помогает пользователю ориентироваться в тексте и переходить от одной мысли к другой. Микро-пространство должно учитываться при разработке типографики для сайта (подробнее о шрифтах и других параметрах читайте здесь). Также с помощью пробелов выделяют заголовки и фоновые надписи:
Располагая элементы на сайте тем или иным образом, дизайнер задает тон всему проекту и выстраивает уникальную композицию. Больше всего запоминается необычное расположение блоков:
Так бренд заявляет о себе как о компании, которая заботится о своем имидже в интернете и привлекает покупателей современными технологиями.
Привлечь внимание к конкретному элементу - одна из задач дизайнера. Однако, этого сделать нельзя, если на сайте не выделена роль пустому пространству.
В 2000-х прослеживалась тенденция загромождать сайт мелкими элементами, и целевые действия выделялись только ярким цветом и тенями (мы писали об этом в статье об устаревшем дизайне). На таких сайтах было много изображений и анимаций, разрозненная цветовая гамма и очень много информации, которая как будто «давила» на пользователя. Сейчас намного эффективнее пользоваться отступами и свободным пространством, которое как будто заполняет пробелы воздухом и дает возможность «вздохнуть»:
На этапе проектирования сайта решаются вопросы о композиции сайта, цветовой палитре, типографике. Расположение элементов очень важно как для дизайнеров, так и для маркетологов, ведь от того, какое впечатление сложится у клиента от ресурса, зависят его дальнейшие действия. Рассмотрим, как можно использовать пространство при создании дизайна продающего сайта.
Пользователи обращают внимание на кнопку только потому, что рядом с ней ничего нет. Поэтому пространство может выступать как самостоятельный инструмент повышения конверсии. На этом примере взгляд сразу приковывается к зеленой кнопке, так как она расположена немного отдаленной от других блоков на сайте:
Как обратить внимание пользователя на продукт? Поместить его в центре, в отдалении от остальных элементов.
Помимо привлечения внимания, пространство дает возможность оценить продукт со всех сторон, не отвлекаясь на другие элементы.
Пространство не обязательно должно быть однотонным. На этом примере мы видим, как с помощью изображения и простой надписи дизайнеры создают стильный первый экран:
Любая страница воспринимается клиентом как композиция элементов. Это происходит из-за нашей способности связывать группы объектов между собой, если они находятся близко друг к другу. Благодаря одинаковым отступам мы мысленно группируем объекты и понимаем, что они относятся к разным категориям:
Веб-дизайнеры часто используют разделительные линии, чтобы отделить друг от друга элементы. Однако, это часто загромождает макет. Вместо линий для разделения можно использовать пустое пространство:
Товары визуально отделены друг от друга, и макет при этом выглядит аккуратно и стильно.
Клиенты все больше и больше ценят простоту взаимодействия с интерфейсом. Пространство дает возможность плавно и последовательно воспринимать информацию и исключает обилие декоративных элементов на сайте: дополнительных линий, блоков, рамок и прочее.
Рассмотрим реальные примеры размещения элементов на сайтах с применением белого пространства.
Пустое пространство не обязательно должно быть однотонным и простым. Компания по производству шоколада использовала в качестве фонового изображения фотографию своей продукции в действии, а в центре поместила заголовок и кнопку:
Такое решение выглядит достаточно изящно и стильно. Меню классически располагается сверху, никаких разделителей нет.
Компания занимается продажей велосипедов. Дизайн страницы подразумевает расположение элементов на большом расстоянии, продукт располагается в центре макета. Сайт не перегружен лишними деталями, кнопка располагается в верхнем правом углу и выглядит как стрелка. Внимание сразу же привлекает изображение товара:
Дизайн минималистичен, и в то же время представляет продукт в полном виде.
Веб-дизайнер разработал собственное портфолио, используя только крупные шрифты. Между надписями используется белое пространство, причем блоки как бы наслаиваются друг на друга. На странице нет избыточного контента, ничто не отвлекает от заголовка - имени дизайнера и краткого описания:
Такие решения популярны в создании портфолио или представлении информации о компании. Крупная типографика привлекает внимание и клиент сразу обращает внимание на смысл заголовка, при прочтении возникают определенные образы и слова словно отпечатываются в памяти:
В примере дизайнеры используют симметричную композицию и пользуются привычкой клиентов перемещать взгляд слева направо: сначала пользователь читает заголовок, потом смотрит на изображение. Пространство разделяет экран на две части, нет чувства тесноты и зажатости:
Дизайнеры используют много текстового контента, который хорошо считывается благодаря разделению пространством. Изображение девушки при этом добавляет цвета в макет и гармонично сочетается с типографикой:
При этом большее внимание уделяется тексту. Микро-пространство используется при организации контента - проставляются интервалы между заголовками и описаниями преимуществ, выделяются абзацы. Макро-пространство в данном случае окружает изображение и отделяет от надписей.
Мы привыкли к белому пространству, однако, цветовые решения также интересно смотрятся в дизайне. Этот магазин одежды - тому доказательство:
Веб-дизайнеры создали проект, в котором добавили синего цвета и яркую фотографию девушки. В другом контексте эти оттенки могли бы выглядеть агрессивно, но в этом примере разработчики побеспокоились о достаточном количестве свободного места.
Стоит сказать об оформлении карточек для интернет-магазинов или страницы услуг. Использование свободного места в дизайне карточки - отличный способ избавиться от лишних элементов и выделить кнопки и другие элементы для призыва к действию.
В данном примере светлые тона выделяют описание услуги, ее преимущества и кнопку для заказа номера. Пользователь сразу обращает внимание на цену и кнопку, а иконки облегчают восприятие текстовой информации. Больше о том, как использовать иконки в дизайне можно прочитать здесь.
Управление фокусом внимания пользователя - одна из главных функций пространства в веб-дизайне. С ее помощью можно создать полноценный инструмент повышения конверсии и в то же время не добавлять лишних элементов в дизайн.
Студия дизайна IDBI в своих работах уделяет внимание различным аспектам веб-дизайна: как качеству предоставляемого контента, так и расположению элементов на макете. Грамотное использование пространства является одним из способов повышения продаж и создания стильного имиджа компании. Мы применяем современные технологии при разработке сайтов и обращаем внимание на мелочи.