6 примеров дизайна с использованием белого пространства

Белое пространство на странице — это пространство без информации или данных

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

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

1. Как белое пространство влияет на информационную архитектуру?

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

На первом месте белое пространство = Меньше значит больше

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

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

2. Реальные примеры дизайна с использованием белого пространства

В примере 1 определена минимальная иерархия для главной страницы бренда Х. Фирменный логотип анимирован, создает движение и плавность. Определенный призыв к действию с одной единственной кнопкой устанавливает иерархию контента. Пользователь переходит на следующий уровень взаимодействия. Ему понятны навигация и контент конкретного элемента.

Текст на изображении: анимация фирменного логотипа бренда X‍Пример 1: Главная страница сайта продукта. Реальный пример смотрите здесь.

Белое пространство концентрирует внимание пользователя на кнопке призыва к действию

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

Пример 2: Переход от минимализма главной страницы к великолепной стратегии использования белого пространства для разработки ориентированной на продукт навигации

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

Текст на изображении: карточка товара проекта Zero Five‍Пример 2: Внутренняя страница сайта хорошо демонстрирует товары карточками, а не списком. Реальный пример смотрите здесь.

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

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

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

Пример 3: Сетка из 8 колонок с выравниванием по левому краю делает акцент на контент-стратегию с эффектом присутствия

Текст на изображении: 1 уровень — бренд Y, цифровой и близкий; 2 уровень — левое выравнивание и белое пространство; 3 уровень — иконки и контент‍Пример 3: Внимание пользователя направляется на левую часть экрана благодаря размещению контента. Реальный пример смотрите здесь.

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

Меню-гамбургер в левом верхнем углу содержит структуру контента сайта. Активные кнопки со знаком «+» раскрывают материалы для чтения.

Упрощайте контент с помощью белого пространства

Пример 4: Внутренние страницы продолжают дизайн-стратегию выравнивания по левой стороне

Текст на изображении: 1 уровень — бренд Y, идеи и опыт; 2 уровень — творчество стейкхолдеров и дизайн-команд‍Пример 4: Иерархия внутренних страниц основана на расположении контента с левой стороны. Реальный пример смотрите здесь.

Великолепная дизайн-стратегия в примере 4 основана на сетке. Она создает четкую иерархию контента. За ним легко следить. Навигация расположена в одном единственном месте — в левом верхнем углу. Контент ориентирован на бренд и дает о нем четкое представление.

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

4. Используйте белое пространство для максимально простого функционала

Пример 5: Основная функция сайта радиостанции — нажать кнопку

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

Пример 5: Главная страница сайта радиостанции содержит один призыв к действию — кнопку включения радио. Посмотреть реальный пример можно здесь.

Имя артиста и название песни меняется при переключении треков.

Страницу можно прокрутить. Ниже она содержит больше контента. Однако стратегия не меняется на протяжении всего сайта. Пользователя подталкивают к нажатию кнопки включения радио.

Пример 6: Функционал в приоритете

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

Радиостанция включена. Единственное доступное действие на сайте — это выключение звука.

Белое пространство определяет функциональность

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

Заключение

Белое пространство — это значимый элемент дизайна.

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

Стратегическое использование белого пространства обеспечивает четкий путь пользователя. Также оно устраняет беспорядок на странице.

Белое пространство определяет навигацию. Меньше значит больше.

Попробуйте добавить белое пространство в свой следующий дизайн-макет.