Пустое пространство - это больше, чем пустое пространство между элементами веб-сайта. По правде говоря, это мощный инструмент, который можно разумно использовать, чтобы дать пользователю передышку, сосредоточить его внимание и облегчить его путешествие.
Выясни как.
Существует множество различных подходов к веб-дизайну - от минимализма до плоского дизайна, материального дизайна и творческого использования контраста. Еще один невероятно важный инструмент в веб-дизайне - это пустое пространство.
Белое пространство поощряет минимализм и баланс. Это также может улучшить взаимодействие с пользователем, создав, например, разрывы абзацев и пробелы для лучшей читаемости.
Однако использовать пустое пространство нужно ответственно и правильно. Используйте слишком мало, и вы можете сильно повлиять на читаемость и удобство использования веб-сайта. Если использовать слишком много, вы рискуете отправить неверное сообщение.
В этой статье мы обсудим, что такое пустое пространство, его различные типы, почему вы должны его использовать, и, самое главное, покажем вам примеры хорошей реализации пустого пространства.
Что такое белое пространство?
Белое пространство или негативное пространство - это термин, который мы используем для обозначения пустоты вокруг или внутри элементов дизайна.
Если вы посмотрите на домашнюю страницу сайта The New Yorker, вы увидите примеры этого повсюду:
Большие пространства вокруг логотипа The New Yorker:
Эквидистантные пробелы, разделяющие каждую из навигационных ссылок:
Штампы, созданные вокруг каждого блока содержимого домашней страницы:
Даже выбор направления и отслеживание типографики показывает полезность белого пространства в дизайне веб-сайтов.
Взгляните на веб-сайт 2008 года, и вы увидите, насколько большое значение имеет пробел:
Есть пустое пространство, хотя оно не такое стильное или стратегическое, как то, что мы видим сегодня на веб-сайте.
Откуда взялось белое пространство?
Термин «пустое пространство» несколько вводит в заблуждение. Хотя некоторые примеры белого пространства действительно белые (например, пример The New Yorker выше), обычно это не так.
Чтобы понять, почему белое пространство получило такое название, нам нужно посмотреть, откуда оно взялось.
Хотя в создании пустого пространства нет имени, мы можем отнести его к следующим частям:
Первый - китайские художники и каллиграфы 20 века. Пустые места на белой рисовой бумаге, над которой они работали, не рассматривались как потраченное впустую. Они нашли смысл в пустоте и считали, что это способствует общему пониманию всей картины.
Они назвали это «проектирование белого цвета».
Кэрол Дуглас объясняет ценность белого пространства в китайском искусстве:
«В китайском искусстве пустое пространство должно передавать информацию из-за отсутствия образов. Размеры и очертания пустых форм создают ритм и единство. Твердые формы придают смысл пустоте и наоборот.
Позже белое пространство стало основным продуктом полиграфического дизайна благодаря модернизму, который сосредоточился на минимализме, структурированных сетках и негативном пространстве.
Так что вполне вероятно, что мы называем это белым пространством из-за белой бумаги, на которой писали модернисты, или белых холстов, на которых они рисовали.
Вам нужно знать о различных типах пустого пространства
Обычно мы делим пустое пространство на две разные категории:
Микро против белого пространства. макрос
Микро- и макро-пробелы не просто определяют пробелы в зависимости от размера.
Микробелые пространства относятся к меньшим пространствам и буферам, построенным вокруг содержимого. Например, между:
- Письма
- Слова
- Абзацы
- Ссылки для навигации
- Изображения или контент в сетке
- Поля формы
Цель микропробелов - улучшить читаемость вашего контента.
Что касается белого пространства макроса, то оно относится к более крупным областям, лишенным содержимого. Например, пробел макроса может быть найден:
- На полях веб-сайта
- Вокруг логотипа в шапке
- Между разделами страницы
- В образах героев
- В разделении основного контента и боковой панели
- En изображения
- Вокруг кнопок CTA
Макро-белое пространство предназначено для улучшения макета веб-сайта и облегчения его понимания и навигации.
Пассивное белое пространство и активное белое пространство
Белые пространства также можно разделить на пассивные и активные категории.
Пассивные белые пространства относятся к пробелам, которые возникают естественным образом в дизайне или типографике. Вы можете контролировать размер этих пространств с точки зрения эстетики, но они будут там, независимо от того, разместите вы их там или нет.
Активное белое пространство относится к пустым областям, намеренно добавленным на страницу для облегчения перемещения. Цель состоит в том, чтобы направить взгляд посетителя вниз по странице или через процесс, пока он не придет к неизбежному выводу и не совершит конверсию.
Почему вам следует использовать пустое пространство на веб-сайтах
Вот некоторые из основных причин, по которым пустое пространство должно быть встроено в каждый веб-сайт, который вы разрабатываете:
Это классика
Несходные тенденции в веб-дизайне, которые могут хорошо выглядеть или быть актуальными только в течение короткого времени, белое пространство - неизменная классика. Просто посмотрите, как давно он существует и как он превратился из китайской каллиграфии в модернистские произведения, а теперь и в Интернет.
Если вы хотите сделать свой веб-дизайн устойчивым, пустое пространство должно быть одним из них.
Это приводит к более привлекательным интерфейсам
Зайти на веб-сайт - все равно что зайти в чей-то дом. Все, что вам нужно, - это несколько секунд, чтобы почувствовать, насколько комфортно вы будете себя чувствовать.
С правильным количеством белого пространства вы можете создать идеальный контраст между содержимым и пространством.
Но каково правильное соотношение - решать вам. Для такого бренда, как Google, это пустое пространство работает:
Однако для другого бренда излишне упрощенный пользовательский интерфейс может сделать веб-сайт слишком пустым, а бренд лишенным ценности. Но если вы найдете правильный баланс, ваш выбор белого пространства определенно поможет сделать веб-сайт привлекательным для его целевых пользователей.
Это упрощает использование веб-сайтов
Если вы изучите принципы веб-дизайна, вы заметите, что позиционирование и интервалы сильно зависят от них.
Применяя эти принципы дизайна к веб-сайтам, вы используете психологию пользователя для создания пользовательских интерфейсов и путешествий, которые легко понять и которым легко следовать.
Возьмите этот пример из закона Фиттса:
Пробелы вокруг контента, ссылок и кнопки CTA не только улучшают внешний вид этих страниц. Они также могут повысить уверенность пользователей и повысить точность нажатия.
Улучшает фокус
Когда вы сразу бросаете посетителям слишком много контента, они могут быть ошеломлены и им будет трудно сосредоточиться на чем-то одном.
Это явление объясняется Закон Хика :
Чем больше стимулов присутствует за один раз, тем дольше люди будут на них реагировать. А в случае с веб-сайтом этого может быть достаточно, чтобы помешать им принять решение.
Создавая пространство вокруг каждой области своей веб-страницы, вы позволите посетителям на мгновение подышать и подумать о том, на что они смотрят. Это замедляет процесс принятия решений… но в хорошем смысле.
Это полезно дляорганизация
Когда у вас есть тонна контента для включения на веб-сайт, довольно легко понять, как разбить его на разные разделы и страницы. Однако простого размещения содержимого в разных контейнерах недостаточно.
Когда вы добавляете пространство вокруг контента или его контейнера, вы посылаете сигнал о важности этого контента и о том, как он соотносится с тем, что его окружает.
Le Nielsen Norman Group объясняет, как это работает:
На этом графике вы не видите 20 точек. Вы видите большую часть точек слева и меньшую часть справа. Именно пространства, равноотстоящие между сгруппированными точками и наибольшее расстояние между группами, позволяют нам рассматривать их как связанные единицы, а не как отдельные точки.
Это улучшает читаемость вашего контента
Если это короткий текст в образ героя, длинное сообщение в блоге или очень описательная страница продукта, вы хотите, чтобы посетители читали контент там.
Изменение размера шрифта поможет привлечь внимание к вашим словам, но именно расстояние между буквами, словами и абзацами гарантирует, что их будет легко читать.
Nielsen Norman Group считает, что интервалы между шрифтами - это один из трех факторов, делающих дизайн красивым:
На этом рисунке показаны различные способы улучшения читабельности.
11 вдохновляющих примеров использования белого пространства в веб-дизайне
Поскольку существует множество способов использовать пустое пространство для улучшения веб-сайта, я собираюсь представить 11 примеров, в которых особенно хорошо используются различные типы пустого пространства.
Зоопарк Питтсбурга и логотип PPG Aquarium
Если вам нужно было быстро взглянуть на логотип Питтсбургский зоопарк, вы, вероятно, сначала увидите белое дерево и летающих птиц. Однако при ближайшем рассмотрении вы увидите скрытое изображение в негативном пространстве: горилла, стоящая перед львом.
Такое творческое использование белого пространства делает этот логотип и его бренд очень запоминающимися. Кроме того, скрытый сюрприз - отличный способ произвести сильное первое впечатление на посетителей.
Галерея изображений героя около 1886 года
Главное изображение на веб-сайте должно эффективно привлекать внимание посетителя. Есть несколько способов сделать это. Вы можете создать изображение главного героя, используя в основном цвета и формы, чтобы принт сиял. Или вы можете сделать как на Около 1886 и позвольте вашим изображениям занять центральное место.
Обратите внимание, как в этой галерее используются белые тарелки, белое постельное белье, прозрачная стеклянная посуда и блестящие столовые приборы, чтобы создать основной объект каждой фотографии. Это буквальное белое пространство позволяет сосредоточиться на еде, а не на развлечениях в ресторане или посетителях вокруг него.
Фотографии Florian Schulz Productions
Кураторский сайт для фотографов и кинематографистов. Флориан и Эмиль Шульц. Как и следовало ожидать, на сайте много ярких фотографий природы.
Это доказательство того, что пустое пространство - это не просто то, что улучшает дизайн веб-сайта. Используя фотографии, в которых хорошо используется белое пространство, вы сможете более эффективно направлять взгляд посетителей на ваши объекты.
В приведенном выше примере мы видим, как темная масса скатов служит белым пространством и позволяет скатам, движущимся в зеленой воде, быть основным фокусом.
Навигационные ссылки избытка
Вы можете не подумать, что у вас 13 навигационных ссылок аккуратно уложите в ряд, но сайтЗатоваривание доказывает, что вы неправы. Здесь мы видим, как правильное расстояние между ссылками может облегчить навигацию по меню такого размера.
Кроме того, это не заставляет продавца скрывать свои категории в мега-меню категорий или под значком гамбургерного меню (что многие делают в наши дни).
Udemy межстрочный интервал
Посмотрите, как разделены модули и уроки на Udemy. Сочетание светлых блоков, жирных заголовков и большого количества интервалов вокруг каждой строки позволяет учащемуся быстро ориентироваться в курсе.
Когда на веб-сайте доступно более 150 000 курсов, пользователи должны иметь возможность быстро оценить, подходит ли им курс. И большая свобода действий - но не слишком большая - поможет в этом.
Организованный пользовательский интерфейс Meetup
Meetup - это веб-сайт, который помогает местным жителям находить группы людей со схожими интересами и планировать мероприятия вокруг них. В больших городах такой веб-сайт может стать подавляющим для пользователей, у которых, по-видимому, слишком много групп и мероприятий, из которых можно выбирать.
Благодаря хорошо организованному пользовательскому интерфейсу и пустому пространству, которое его разделяет, пользователи могут быстро фильтровать параметры в верхней части веб-сайта и на боковой панели справа. Затем они могут обратить внимание на уменьшенные ежедневные результаты в центре.
Маржа Maison De La Luz
Дом Луз это роскошный бутик-отель в Новом Орлеане. Его красиво иллюстрированный веб-сайт - не единственное, что поразит посетителей.
На странице «О нас» посетители сначала увидят иллюстрацию интерьера отеля. Когда они прокручивают страницу вниз, это имитирует то, как их взгляд может перемещаться вверх и вниз, любуясь отелем лично. Даже без анимации этот макет выглядит очень привлекательно благодаря узким полям рисунка в тексте ниже.
В фокусе продуктов Apple
Apple существует достаточно долго, поэтому вряд ли нужно сказать хоть слово о своей продукции. Вот почему большая часть его веб-сайта позволяет продуктам говорить.
Даже когда присутствуют копии и призывы к действию, они занимают мало места по сравнению с продуктами и большим количеством белого пространства, которое привлекает к ним внимание посетителей.
CTA усыплять
Кнопка с призывом к действию играет важную роль в путешествии пользователя. Это заставляет их сделать перерыв, подумать о том, что они уже узнали, и решить, готовы ли они сделать следующий шаг.
Чтобы люди заметили призыв к действию, вам понадобится нечто большее, чем просто хорошее место размещения или цветное приложение, чтобы выделить его. Обильное белое пространство вокруг CTA позволяет вам отложить все остальное, пока ваш посетитель делает свой выбор.
Блоки цены маховика
Если у вас есть много деталей, которыми нужно поделиться сразу, вы можете использовать размер, чтобы установить иерархию, и интервал, чтобы сгруппировать соответствующие детали вместе. Это упростит процесс принятия решений для ваших посетителей, поскольку у них не будет просто стены текста для рассмотрения.
Здесь мы рассматриваем пример ценовых блоков на Маховик, этот тип воздушного пространства полезен для любого типа продукта или дизайна блока контента.
Макет формы Salesforce
Независимо от типа формы которые использует ваш веб-сайт, вы хотите, чтобы их было легко заполнить. В бесплатной пробной форме Salesforce, мы видим, как правильный интервал может сделать форму более привлекательной.
Пустое пространство вокруг каждого поля помогает пользователям сосредоточиться на одном поле за раз. Есть еще одна причина, по которой такой достаточный интервал полезен. Когда кто-то начинает заполнять поля, каждая метка перемещается наверх. И при возникновении ошибки ниже появляется соответствующее сообщение.
Умело используйте пустое пространство для создания лучших веб-сайтов
Белое пространство может относиться к пустоте веб-сайта, но в этой пустоте живет много смысла и цели.
Взяв на себя управление интервалом на веб-сайте, вы можете улучшить работу всех, кто на него заходит.
Хотя мы показали вам несколько способов сделать это, применение его к вашим проектам - совсем другое дело.
Но не беспокойся. в создатель страницы Elementor позволяет легко добавлять пробелы в ваши проекты.
Получите Elementor Pro прямо сейчас!
Заключение
Здесь ! Вот и все, что касается статьи, посвященной пустым пространствам в веб-дизайне. Если у вас есть вопросы о том, как туда добраться fдайте нам знать в Комментарии.
Тем не менее, вы также можете проконсультироваться наши ресурсы, если вам нужно больше элементов для реализации ваших проектов создания интернет-сайтов, обратитесь к нашему руководству по Создание блога на WordPress или Divi: лучшая тема WordPress всех времен.
Но тем временем поделитесь этой статьей в разных социальных сетях.
...