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

Определение и практические примеры

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

Человечество нуждается в пространстве. — Кен Гиберт

Что пространство привносит в наши дизайны:

• выразительность
• иерархию
• четкость
• структуру контента
• драму и напряжение

При создании макета важно давать элементам вашего дизайна «дышать». Для этого необходимо сократить расстояние между элементами и создать белое пространство. Оно помогает акцентировать внимание пользователей на отдельных вещах и увидеть каждый элемент.

Каждый смотрит на вещи, но далеко не каждый видит. — Грег Бэрримен

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

Пространство

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

Вот небольшой пример:

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

Микропространство

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

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

Макропространство

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

Макропространство дает возможность взгляду скользить с одного объекта на другой.

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

Визуальный аспект

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

Магазины ZARA очень просторные. Это сделано специально.

Дизайн — это процесс поиска и демонстрации всех сходств и различий, присущих контенту визуального дизайна.

Пространство может также ассоциироваться с:

• изысканностью
• простотой
• роскошью
• комфортом
• исключительностью
• открытостью

Теперь понимаете, почему так часто на Dribbble постят снимки с модных фотосессий? (шучу)

Поговорим о клиентах

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

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

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

Если не сработает, попробуйте провести тест А/В, где второй вариант будет более «нагроможденным». Я провел сотни модерируемых пользовательских тестирований, и точно знаю, что людям не нравится, если на странице огромное количество текста и кнопок «call to action».

Пространство как воздух: дизайн должен дышать.