Белое пространство в веб-дизайне — задачи и правила использования

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

выделяют заголовки и фоновые надписи:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В графическом дизайне, однако, существует понятие, которое помогает дизайнерам создавать великолепный дизайн, делая контент привлекательным и легким для восприятия.

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

Что такое белое пространство?

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

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

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

Эволюция концепта белого пространства

Можно проследить историю белого пространства, если обратиться к «Новой типографике», которая вышла в 1920-х годах под руководством Яна Чихольда.

Подход базируется на следующих принципах:

• ассиметричный баланс элементов;

• контент расположен согласно иерархии;

• намеренное использование белого пространства;

• использование шрифтов без засечек.


Кубок Беатрис Уорд

Еще один пример ранней концепции белого пространства в типографике находится в эссе Беатрис Уорд «Хрустальный Кубок» 1930 года.

Уорд описала два кубка: первый «из чистого золота, украшенный самыми восхитительными узорами», а второй «из кристально-чистого стекла, тонкого и прозрачного, как мыльный пузырь». Выбор одного из них показывает, истинный ли человек ценитель вина, или нет.

Хрустальный кубок раскрывает отношение человека к вину, «потому что все в нем рассчитано на то, чтобы раскрыть красивую вещь, которой кубок наполнен, а не скрыть ее».

Уорд придумала эту метафору к увеличению чистого пространства в печати и типографике. Она понимала, что правильное использование пространства помогает подчеркнуть контент.

Чего вы можете добиться с помощью белого пространства

То, что Чихольд и Уорд раскрывали в своих книгах, сегодня мы можем объяснить когнитивистикой.

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

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

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

Держите это в уме, и давайте посмотрим, что можно сделать в веб-дизайне с помощью белого пространства:

1. Веб-сайт проще просматривать

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

2. Улучшается читаемость контента

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

3. Повышается эстетика

Увеличение белого пространства и сокращение ненужных элементов может радикально улучшить внешний вид сайта.

Задайте себе вопрос, чего вам хотелось бы больше: зайти на сайт с кучей «хлама», поп-ап окон, баннеров и ненужных визуальных эффектов, или же на простой сайт, который легко смотреть и читать, и который сразу переходит к сути?

4. Впечатление высокого качества

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

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

Типы белого пространства

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

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

Это пространство между элементами. Помогает построить иерархию и обеспечить правильную работу сайта.

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

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

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

Белое пространство, которое окружает объекты, привлекает внимание пользователей именно к этим элементам, увеличивая их заметность.

4. Пассивное пространство

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

Рекомендации по использованию белого пространства

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

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

Сайт бренда одежды ETQ доказывает, что простота продает. Отсутствие беспорядка и ненужной информации фокусирует пользователя только на продукте.

И при этом дизайн отражает качество бренда.

Invision’s blog — это отличный пример правильной комбинации текста, фотографий и призывов к действию, чтобы побудить посетителей прочитать пост в блоге.

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

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

Используйте белое пространство для построения визуальной иерархии UI элементов, чтобы ваш сайт лучше воспринимался.

Использование белого (или негативного) пространства в своих проектах.

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

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

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

Что такое белое пространство?

Как я только что объяснил, белое (или негативное) пространство – это промежуток между разными элементами, в котором ничего не содержится. Для сравнения заполненное пространство мы называем позитивным. На самом деле негативное пространство помогает формировать и разделять то, что является позитивным пространством. Это можно рассмотреть на оптической иллюзии внизу.

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

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

Google, как видно, ярый защитник белого пространства в своих проектах. У этого поисковика, как широко считается, аккуратный дизайн, так как внимание концентрируется на основной цели страницы, без массивных добавлений в прочие области (не то, что у других).

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

Негативное пространство не обязано, на самом-то деле, быть цельным цветовым блоком. На фотографии любая область, не находящаяся в фокусе, может быть определена как негативное пространство. В этом примере недостаток фокуса на фоне привлекает ваш взгляд к кружке. (И, кроме того, разве Starbucks не сменил свой логотип?)

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

Аналогия

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

Это одна из свойств, из-за которых так хорошо работают магазины Apple. Они очень минималистичны и огромное пространство магазина отдано именно продукции. Однако если вы забредете в другой магазин PC, то будете поглощены нескончаемыми полками устройств, которые выглядят и функционируют по-разному. На своем опыте я убедился, что впечатление от минималистических покупок обычно гораздо приятнее.

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

Негативное пространство улучшает читабельность

Вы может поинтересоваться, зачем вам беспокоиться о том, чтобы негативное пространство было правильным?

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

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

Негативное пространство в веб-дизайне

Негативное пространство применяется во многих областях творчества, особенно в фотографии. В ней негативное пространство – это любое пространство, которое не используется для содержания объекта, что недалеко от той роли, которую оно играет в веб-дизайне. Если рассмотреть веб-дизайн Apple’а, то там, естественно, применяется как макро- так и микро-белое пространство для создания отступов элементов и определения им своего места на странице.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

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

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

Утонченность и роскошь

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

Часто более дешевые торговые бренды стараются впихнуть в пространство как можно больше информации; различные рынки, различные конечные пользователи. Сайты HP и Apple, например, выделяют этот момент. Apple – общеизвестно уверен в себе и дает своему продукту говорить самому за себя. Если товар вам нужен, осмотритесь или пройдитесь. С другой стороны, сайт HP применяет деловые продажи более дорогого продукта и перекрестные продажи, предложения и продвижение низких цен у своих пользователей, а также пытаются выставить ассортимент своих альтернативных продуктов, которыми вы можете заинтересоваться.

Улучшаем негативное пространство

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

Поля и одинаковые промежутки

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

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

Микроуровневые промежутки

Как уже объяснялось, микроуровневые промежутки – это негативное пространство, которое существует между самыми маленьким элементами страницы, такими как буквы в параграфе.

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

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

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

По-разному анализируйте каждый проект

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

Последние рассуждения

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

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

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

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

Автор: Connor Turnbull

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma

Узнать подробнее

Веб-дизайн. Быстрый старт

Изучите курс и узнайте, как создать дизайн и протопип сайта в Figma!

Смотреть видео

5 способов, которыми «белое пространство» может повлиять на ваш UX

Что такое «белое пространство»?

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

 

Почему оно имеет такое значение?

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

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

 

Белое пространство — значит юзабилити

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

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

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

 

Белое пространство делает ваш контент удобочитаемым

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

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

 

Белое пространство — это упрощение

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

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

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

 

Белое пространство хорошо выглядит

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

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

 

Белое пространство придает эмоции вашему дизайну

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

Можете использовать такие эффекты, как parallax scrolling, чтобы сделать белое пространство интерактивным и забавным, или просто использовать узоры и градиенты. То, как вы отображаете белое пространство (его количество или дизайн), влияет на восприятие контента.

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

 

Заключение

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

Перевод статьи Робин Коллиндж

Источник: blog.usabilla.com

Белое пространство как элемент дизайна. Современный дизайн газет

Дизайнерам газет следует обратить особое внимание на белые пространства — один из самых полезных элементов. Белые пространства можно использовать неограниченно. Самое важное, что белые пространства способствуют созданию привлекательно оформленной газеты.

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

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

• При оформлении публикуемого материала располагайте все белые пятна вокруг текста. Никогда не оставляйте их внутри статьи. Использованные таким образом белые пространства становятся привлекательной «рамкой» внешнего оформления статьи. Пустые пространства в середине текста выглядят очень плохо. Чтобы их ликвидировать, следует произвести изменения, например, в размерах отдельных элементов /заголовка, подписей к фотографиям, фотографий/.

• Избегайте применения белого шрифта на черном. Наиболее трудный для чтения шрифт, как показали исследования, это белый на черной основе /«выворотка»/. При такой печати человек значительно дольше читает и хуже воспринимает слова и предложения, кроме того, чтение вставок, напечатанных белым по черному, требует напряжения зрения. Если вы все-таки используете подобную технику, то сведите ее к минимуму, например, для выделения отдельных элементов /заголовков статей, рубрик/.

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

Избегайте создания белых пятен внутри макета. Расположите все элементы так, чтобы белые пространства были по краям. Белая рамка вокруг фотографий и текста всегда выглядит эффектно.

Поделитесь на страничке

Следующая глава >

Сила белого пространства | UX Guru

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

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

 

Белое и негативное пространство

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

«Супрематическая композиция: полёт аэроплана» Казимира Малевича. В этой композиции, «негативное пространство» — это пространство между элементами.

Белое пространство в графических пользовательских интерфейсах

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

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

 

1. Улучшение понимания

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

 

Приоритизируйте четкость и удобочитаемость

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

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

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

2. Уточнение связей

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

 

Группируйте связанные элементы

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

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

3. Привлечение внимания

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

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

 

Направляйте взгляд пользователя к важному контенту

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

Создайте визуальную иерархию

Если белое пространство используется правильно, оно позволяет создать общий поток и баланс, которые, в свою очередь, помогают передать смысл дизайна.

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

4. Создание ощущения роскоши

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

Перевод статьи Ника Бабича

Источник: uxplanet.org

БЕЛОЕ ПРОСТРАНСТВО — разбор слова по составу (морфемный разбор)

БЕ́ЛЫЙ, —ая, —ое; бел, бела́, бе́ло и бело́, бе́лы и белы́. 1. Цвета снега, молока, мела; противоп. черный. Белые облака. Белая бумага. Белый как снег. Белый как мел.

Все значения слова «белый»

ПРОСТРА́НСТВО, -а, ср. 1. Неограниченная протяженность (во всех измерениях, направлениях). Бесконечное пространство. Воздушное пространство. Мировое пространство.

Все значения слова «пространство»

• Кресла словно парили в каком-то белом пространстве, как в молоке.

• Где — то вдалеке, в тумане ему послышались голоса, увидел расплывчатое очертание лодки, брызги воды поднялись вверх, будто кто — то прыгнул в воду к нему, закружилась голова, вокруг всё завертелось, он почувствовал, что находится в каком — то абсолютно белом пространстве бесконечности.

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

(все предложения)