Пространство белое: способы вёрстки контента на сайте

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

1.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

на что влияет пространство и как правильно его использовать при создании макетов продающих сайтов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

5.

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

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

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

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

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

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

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

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

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

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

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

Что такое белое пространство (отрицательное пространство) и почему вы должны использовать его в своем графическом дизайне?

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

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

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

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

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

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

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

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

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

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

  1. Улучшенная скорость взаимодействия

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

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

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

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

  1. Внимание и Фокус

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

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

  1. Дизайн Тон и Брендинг

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

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

  1. Руководство через логическую группировку

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

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

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

UX Миф #28: Белое пространство — это бесполезное пространство | by Nancy Pong | UX Myths / UX-мифы

  • Расставляет элементы интерфейса по приоритетности

Люк Вроблевски в статье Developing the Invisible заявляет, что “для дизайнера белое пространство зачастую так же важно, как и сам контент”, потому что такой невидимый элемент интерфейса помогает донести до зрителей “что важно, что к чему относится и на что следует обратить внимание”.

  • Служит проводником по странице

Поскольку при помощи белого пространства мы можем сделать акцент на содержимом страницы, “оно служит “проводником” от одного элемента к другому”, — говорит Карла Роуз. Такова важная миссия белого пространства: “вести зрителя той дорогой, которую придумал дизайнер”, — утверждает Джейсон Санта Мария в своей статье о проектировании белого пространства.

  • Может создать ощущение утонченности и элегантности

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

  • Необходимо для создания сбалансированного, гармоничного макета

“Пустое пространство на странице может быть столь же важно, как и пространство, занятое картинками; все потому, что у белого пространства есть важна цель — поддерживать визуальную целостность макета”, — говорит Джейсон Санта Мария.

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

Зацените Убиратель белого пространства!

Золтан Коллин

Читать далее: Миф #29 >>

Белое пространство — чем запомнится театральная экспедиция по городам Югры? | Культура

29.05.2021 18:15

#Культура

#Нижневартовск

Автор: Алексей Шабанов, Евгений Неупокоев, Евгений Лоскутников, Игорь Батищев, фото – сообщество «Театральный фестиваль «Белое пространство-2021»


В Югре завершается окружной театральный фестиваль «Белое пространство». В этом году он проходит в необычном формате. Конкурсные спектакли театры играют на своих площадках. А вот жюри, чтобы оценить все работы (в программе их 16), отправилось в театральную экспедицию по шести городам: от Нижневартовска до Нягани.

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

Этого дня югорские театралы ждали как никогда долго. Фестиваль должен был состояться в Ханты-Мансийске ещё в прошлом году, но был перенесён из-за пандемии. Эту тему даже обыграли во время церемонии открытия.

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

Жанр форума организаторы определили как «театральная экспедиция». Главная задача — понять, как изменили театры «Белое пространство» Югры за всё время проведения фестиваля. Впрочем, раньше, чем жюри, в поездку по округу поехали театральные блогеры.

Марина Репик, Ольга Власова, пиар-группа фестиваля «Белое пространство»: «Мы говорили не только с театралами. Общались с лидерами мнения и просто останавливали людей на улицах. В некоторых городах прохожие спрашивали: «Что? Какой театр? У нас есть театр?». Но в Нягани на вопрос «Где театр», нам уверенно показывали — там».

В день открытия актёры драмтеатра Нижневартовска сыграли премьерный спектакль «Носороги» по Эжену Ионеско. Достаточно известную пьесу сейчас не часто берут в работу. Она сложна для постановки и восприятия. В ходе действия почти все герои становятся свирепыми животными.

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

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

Если Нижневартовский драмтеатр постоянный игрок в «Белом пространстве», то Мегионский театр музыки участвует в фестивале впервые. В основе спектакля «Её» женские истории, эмоции, мечты и переживания, рассказанные и спетые четырьмя актрисами. Московский режиссёр Александр Баркар слил в единый текст страницы русской классики и стихи из социальных сетей.

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

В этот раз на фестивале большая кукольная программа. 6 спектаклей из Нижневартовска, Сургута и Нефтеюганска.

Нижневартовский театр юного зрителя показал на фестивале свою версию «Бременских музыкантов». Не по Энтину и Гладкову. Режиссёр Сергей Усков решил пойти по следам самих братьев Гримм и написал инсценировку, которая дополнила сказку. В ТЮЗовском спектакле «легендарная четвёрка» не только попадает в Бремен, но и обретает признание. На счету известной рок-группы все популярные премии.

Сергей Усков, режиссёр-постановщик спектакля «Бременские музыканты»: «Театру понадобился спектакль «Бременские музыканты». Были два режиссёра претендента. Мне за 5 дней нужно было придумать свою версию. Я им сразу написал, что никакого Гладкова не будет, так как это превратится в вечер караоке: все соберутся, послушают песни и разойдутся. Очень классный мультик, мы на нём выросли. Но захотелось вернуться к первоисточнику».

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

Анна Казарина, театральный критик, член жюри фестиваля: «Юрий Уткин – худрук Иркутского театра кукол, очень известный режиссёр в театральной среде. Это его пьеса. Она ироничная, тёплая, добрая. Спектакль о любви. У него альтернативный финал — Колобок не погибает. Это поучительная история о том, что ребёнок должен слушать родителей».

Окончательные итоги фестиваля подводить ещё рано. Однако первые результаты изучения югорского «Белого пространства» эксперты уже подготовили.

Глеб Ситковский, театральный критик, председатель жюри фестиваля «Белое пространство»: «Всё, что служит открытости театра — работает на пользу. Фестивали, лаборатории, выезд театров, приезд критиков, лекции. Постепенно горизонты расширяются. Когда расширяют горизонты у зрителя, он понимает, что театр может быть безграничным».

Церемония закрытия фестиваля пройдёт 30 мая в Ханты-Мансийске. Награды жюри вручит в семи номинациях. В том числе «Лучшая режиссура», «Лучшая мужская», «Лучшая женская роль», «Лучший актёрский ансамбль».

как белое пространство может стать лучшим вариантом для оформления веб-страницы

Одним из способов объединения всех дизайнерских решений веб-страницы (заголовки, иконки, текст, картинки и пр.) является применение вёрстки с привлечением белого пространства — нейтрального фона, который удачно выделяет нужные элементы. Почему использование контрформы так необходимо и как правильно её внедрить? Разбираем в сегодняшнем материале.

Немного о белом пространстве

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

 

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

Два вида белого пространства: микро и макро

Белое пространство можно охарактеризовать как микро и макро. Классификация подразумевает разделение на два типа в зависимости от плотности расположения элементов.

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

 

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

Как понять, когда и какой тип контрформы необходим?

У верстки с контрформой есть свои правила. Выбор макро- и микро-пространства зависит от наполнения страницы.

  1. Контент и контрформа. Чем больше текстовых и графических блоков на сайте, тем больше необходимо использовать макро-пространства, но вместе с тем доля микро-пространства увеличивается. Этот баланс важно соблюдать для поддержания смысловой границы веб-страницы.
  2. Стиль веб-страницы также сильно влияет на выбор того или иного вида контрформы. Полная «воздуха» страница или плотная колонка графики и текста — выбор за вами. Главное — помнить о балансе своего решения.
  3. Стоит провести небольшой тест на целевой аудитории, чтобы узнать мнение пользователей о дизайне сайта. Нет единого дизайнерского решения, которое было бы универсальным и нравилось всем, так что за основу лучше взять результаты опроса.
  4. Самое главное — помните, что по тому, как именно вы верстаете с использованием белого пространства, можно неявно, но говорить о бюджете, потраченном на дизайн сайта. Хороший пример — сайты мировых брендов. Взгляните на примеры, и вы сами всё поймёте.

 

 

 

 

Активное и пассивное применение белого пространства

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

 

 

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

  • Как мы видим из предыдущего примера, прежде всего грамотное применение негативное пространство упрощает визуальное восприятие материала. Правильно выбранная контрформа — залог правильного построения контента страницы.
  • От выбора площади негативного пространства зависит общая концепция дизайна сайта. Так, макро-негативное пространство ведет весь тон дизайна к минимализму и «воздушности», а сайты с микро-негативным пространством чаще относят к новостным и информационным порталам.
  • Расстановка негативного пространства чётко определяет, куда должно быть акцентировано внимание пользователя, зашедшего на сайт. Стоит провести несколько тестов и поиграть с площадью негативного пространства вокруг важных объектов.

 

 

 

4 вещи, о которых должен знать каждый дизайнер / Полезное / Сайты и биржи фриланса.

Обзоры фриланс бирж. Новости. Советы. Фриланс для начинающих. FREELANCE.TODAY

 

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

 

  • Поля и отступы
  • Пространство вокруг изображений и графических элементов
  • Межстрочный интервал и расстояние между буквами

 

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

 

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

 

Улучшение читаемости текста

 

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

 

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

 

Уточнение соотношений элементов

 

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

 

 

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

 

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

 

 

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

 

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

 

 

Визуальная иерархия

 

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

 

 

Mailchimp, как можно видеть из приведенного выше примера, является большим сторонником использования пустого пространства во всех своих проектах. Когда посетитель попадает на главную страницу Mailchimp, кнопка бесплатной регистрации «Sign Up Free» привлекает внимание почти сразу. Используя симметрию, дизайнер может создать сбалансированную компоновку с одинаково важными правой и левой частями макета.

 

 

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

 

Вывод

 

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

 

Источник

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

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

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

Макет веб-сайта или приложения состоит из множества различных визуальных элементов.К ним относятся типографика, нарисованные линии, значки, изображения и т. Д. Представьте себе картину; эти части — нарисованные биты. Однако что им всем нужно для создания этой картины? Им нужен холст! Белое пространство похоже на холст: это фон, который скрепляет элементы дизайна, позволяя им выделяться.

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

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

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

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

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

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

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

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

Micro vs.Макро пустое пространство

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

Микро белое пространство

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

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

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

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

В отличие от микробелого пространства, макробелое пространство выступает в качестве контейнера общего дизайна. Это пустое пространство «большой картинки» — его легче заметить. Вероятно, лучший пример веб-сайта, интенсивно (и эффективно) использующего макросы, — это домашняя страница Google.com. Знаменитый внешний вид Google очень прост, но заметили ли вы что-то еще? Эта простота также успокаивает . Поскольку нет беспорядка, у вас меньше работы для ваших глаз и ума. Вы можете сосредоточиться на причине, по которой вы здесь: чтобы что-то искать!

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

Итак, что определяет, какое пустое пространство вам следует использовать?

Использование макропространств и микропространств зависит от следующих факторов:

Контент — Чем больше информации в макете, тем меньше свободного пространства макросов будет доступно.Напротив, объем микропробелов увеличится. Этот компромисс жизненно важен; в противном случае страницы были бы сплошными блоками данных: их было бы чрезвычайно трудно читать! Например, Boulton (2007) описывает, как новостные веб-сайты, как правило, полагаются на микропробельное пространство, чтобы обеспечить эффективную разборчивость для пользователей. Удобство чтения для пользователей имеет решающее значение.

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

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

Торговое сообщение — Использование белого пространства может предложить бюджет компании и, следовательно, качество продукта.Подумайте о брендинге таких компаний, как Apple, Mercedes Benz и IKEA. Как они поддерживают эту теорию?

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

Активное и пассивное: другой способ приблизиться к полезности белого пространства

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

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

Пассивное пустое пространство — применяется для улучшения эстетики макета, не направляя пользователя через определенное чтение, поток или порядок содержимого. Например, таким образом действует пробел между глифами шрифта и строками абзаца (Boulton, 2007).

На изображении выше показана разница между текстом без пробелов, примененным пассивным пробелом, а также примененными пассивными и активными пробелами:

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

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

Разборчивость

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

Тон дизайна и брендинг

Белое пространство вносит свой вклад в тон всего дизайна. Веб-сайты с большим количеством макросов могут отражать минимализм и роскошь. Веб-сайты с меньшим количеством макросов могут показаться информативными, как в случае с новостными веб-сайтами (Кирнин, 2015).

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

Фокус и внимание

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

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

На вынос

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

Как дизайнер, вы можете ввести пустое пространство на основе четырех основных факторов:

  • Контент,
  • Дизайн,
  • пользователь и
  • марка

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

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

Ссылки и где узнать больше

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

Боаг, П. (15 февраля 2011 г.) Почему белые пространства имеют значение. Boag World. Получено с: http://boagworld.com/design/why-whitespace-matters/. [2014, 20 июня]

Бултон, М. (2007). Пробел. A Список отдельно. Получено с: http://alistapart.com/article/whitespace. [2015, апрель]

Коллин З. Мифы UX. Миф № 28: Белое пространство — это потраченное впустую пространство. Получено с: http://uxmyths.com/post/2059998441/myth-28-white-space-is-wasted-space.[2014, 20 июня]

Кырнин Дж. Важность белого пространства в веб-дизайне. Основы веб-дизайна. Получено с: http://webdesign.about.com/od/webdesignbasics/a/whitespace.htm. [2014, 20 июня]

Тернбулл, К. Использование белого (или отрицательного) пространства в ваших проектах. Веб-дизайн Tuts Plus. Получено с: http://webdesign.tutsplus.com/articles/using-white-space-or-negative-space-in-your-designs—webdesign-3401. [2014, 20 июня]

Изображение героя: Автор / Правообладатель: Джулия Кей.Условия авторских прав и лицензия: CC BY 2.0

white-space — CSS: каскадные таблицы стилей

Свойство CSS white-space устанавливает способ обработки пустого пространства внутри элемента.

Свойство определяет две вещи:

  • Свертывается ли и как белое пространство.
  • Могут ли линии переноситься при возможности мягкого переноса.
 
пробел: нормальный;
белое пространство: nowrap;
белое пространство: предварительно;
белое пространство: предварительная упаковка;
пробел: перед строкой;
пробел: пробелы;


белое пространство: наследовать;
пробел: начальный;
белое пространство: вернуться;
белое пространство: отключено;
  

Свойство , пробел, задается как одно ключевое слово, выбранное из списка значений ниже.

Значения

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

В следующей таблице обобщено поведение различных значений белого пространства :

Новые строки Пробелы и табуляторы Перенос текста Пробелы в конце строки Остальные разделители пробелов в конце строки
нормальный Свернуть Свернуть Обертка Удалить Повесить
nowrap Свернуть Свернуть Без упаковки Удалить Повесить
до Заповедник Заповедник Без упаковки Заповедник Без упаковки
предварительная упаковка Заповедник Заповедник Обертка Повесить Повесить
предварительная линия Заповедник Свернуть Обертка Удалить Повесить
перерывов Заповедник Заповедник Обертка Обертка Обертка

Примечание: Существует различие между пробелами и другими разделителями пробелов . Они определены следующим образом:

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

Если пустое пространство обозначается как hang , это может повлиять на размер поля при измерении внутреннего размера.

 нормальный | предварительно | nowrap | предварительная упаковка | предварительная линия | пробелы 

Основной пример

  код {
  белое пространство: предварительно;
}  

Разрывы строк внутри элементов

   
  pre {
  белое пространство: предварительная упаковка;
}  

В действии

HTML
  
п {пробел: <выбор> }

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

  .box {
  ширина: 300 пикселей;
  отступ: 16 пикселей;
  радиус границы: 10 пикселей;
}

# css-code {
  цвет фона: rgb (220, 220, 220);
  размер шрифта: 16 пикселей;
  семейство шрифтов: моноширинный;
}

# css-code select {
  семейство шрифтов: наследовать;
}

#Результаты {
  цвет фона: rgb (230, 230, 230);
  переполнение-x: прокрутка;
  высота: 400 пикселей;
  пробел: нормальный;
  размер шрифта: 14 пикселей;
}  
  var select = document.querySelector ("# выбор css-кода");
var results = document.querySelector ("# результатов p");
select.addEventListener ("изменить", function (e) {
  results. setAttribute ("стиль", "пробел:" + e.target.value);
})  
  

Lorem ipsum dolor sit amet, conctetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud упражнение ullamco labouris nisi ut aliquip ex ea Commodo Conquat. Duis aute irure dolor в репрехендерит в сладострастном velit esse cillum dolore eu fugiat nulla pariatur.Excepteur sint occaecat cupidatat non proident, загорелся in culpa qui officia deserunt mollit anim id est Laborum.

Результат

Таблицы BCD загружаются только в браузер

Белые дыры | Космос

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

Для экипажа космического корабля, наблюдающего издалека, белая дыра выглядит в точности как черная дыра. У него масса. Он может вращаться. Кольцо из пыли и газа могло собираться вокруг горизонта событий - границы пузыря, отделяющей объект от остальной Вселенной. Но если они будут продолжать наблюдение, команда может стать свидетелем события, невозможного для черной дыры - отрыжки. «Только в тот момент, когда что-то выясняется, вы можете сказать:« А, это белая дыра », - сказал Карло Ровелли, физик-теоретик из Центра теории физики во Франции.

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

Объекты внутри белой дыры могут уходить и взаимодействовать с внешним миром, но, поскольку внутрь ничего не может попасть, внутренность отрезана от прошлого вселенной: никакие внешние события никогда не повлияют на нее. «Почему-то более тревожно иметь сингулярность в прошлом, которая может повлиять на все во внешнем мире», - сказал Джеймс Бардин, пионер черных дыр и почетный профессор Вашингтонского университета.

Близнецы ничейные земли

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

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

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

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

«Потребовалось 40 лет, чтобы понять черные дыры, и только недавно люди начали сосредотачиваться на белых дырах», - сказал Ровелли.

Телескоп «Горизонт событий», состоящий из восьми наземных радиотелескопов планетарного масштаба, созданных в результате международного сотрудничества, сделал это изображение сверхмассивной черной дыры в центре галактики M87 и ее тени. (Изображение предоставлено: EHT Collaboration)

Почему белых дыр не существует

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

Даже если бы большие белые дыры образовались, они, вероятно, не задержались бы слишком долго. Любое исходящее вещество столкнется с веществом на орбите, и система рухнет в черную дыру.«Я думаю, что долгоживущая белая дыра маловероятна», - сказал Хэл Хаггард, физик-теоретик из Бард-колледжа в Нью-Йорке.

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

Почему белые дыры могут существовать

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

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

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

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

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

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

Абсолютная белая дыра

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

Космологи называют эту картину «Большим отскоком», и некоторые ищут характерные черты белой дыры в самом раннем наблюдаемом свете Вселенной. Ровелли также задается вопросом, представляют ли сильные радиовсплески крики теоретических мини-черных дыр, оставшихся после Большого взрыва, когда они рано переходят в белые дыры (хотя это объяснение кажется все более маловероятным).

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

Дополнительные ресурсы:

Некоммерческий сектор как белое пространство - Новости некоммерческих организаций

«MESMERIZE» ШОН УОРД / WWW.SEANCHRISTOPHERWARD.COM

Примечание редактора: Эта статья, впервые опубликованная в Интернете 30 мая 2018 г., была переиздана в летнем выпуске некоммерческого ежеквартального журнала за 2020 год с небольшими изменениями . Летний выпуск журнала 2020 года посвящен необходимости понять часто непризнанные и невысказанные принципы дизайна, лежащие в основе некоторых практик и структур, которые пронизывают нашу работу. Эта конкретная статья теперь представляет собой классику NPQ , взяв на себя наследие стандартного белого «курирования» некоммерческих и благотворительных организаций.Следите за дополнительными статьями из этого выпуска на следующей неделе или подпишитесь сейчас, чтобы получить цифровую подписку на всю коллекцию.


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

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

В «Белом пространстве» профессор социологии Йельского университета Элайджа Андерсон определяет как белое пространство, так и черное пространство. 1 Он пишет: «Для чернокожих, в частности, белые пространства различаются по своему характеру, но их наиболее заметная и отличительная черта - подавляющее присутствие белых людей и отсутствие черных. 2 Кроме того, белые пространства имеют «неявный расовый порядок: белые как доминирующие, а черные как подчиненные». 3 В белых местах черные люди могут получить только «временное признание со стороны непосредственной аудитории». 4 Другими словами, черные люди в белом пространстве постоянно сталкиваются с проблемой «пройти проверку». Белые люди в белых пространствах обладают огромной и непомерно высокой властью.

Для Андерсона Черное пространство в США - это одновременно и физическое гетто, и места с преобладанием черных, которых белые стараются избегать, и культовое гетто, «крайне негативная икона… все чаще служащая пробным камнем для предрассудков, глубоким источником стереотипов и рационализация дискриминации черных людей в целом.” 5

Кроме того, как пишет Джелани Кобб в статье New Yorker «Starbucks и проблема белого пространства», в США теперь «президентство, которое стремится заставить США чувствовать себя как белое пространство». 6 В результате общая тревога, с которой цветные люди борются в белом пространстве как часть своего существования, теперь также становится нормой для белых людей, хотя и имеет совсем другой вектор. В недавнем обзоре New York Times , опубликованном Мавис Бисс, адъюнкт-профессором философии в Университете Лойолы, отражено, что, возможно, вызывает растущие настроения среди белых людей, когда она пишет: «Когда я наблюдаю за своей повседневной жизнью после массовых собраний. стрельба, взрывы и нападения на машины, я считаю, что этот элемент доверия отсутствует.” 7

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

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

Пытаясь назвать роль расы в этом «растущем отсутствии общественного доверия», Бисс демонстрирует, насколько на самом деле всепроникающая раса, как упорядочение знаний и опыта и вносит свой вклад в то, что постколониальный теоретик Гаятри Спивак давно назвал «эпистемологическим насилием», - причинение вреда дискурсом. В ее статье это делается двумя способами.Во-первых, как пишет Кобб в статье New Yorker , цветные люди никогда не чувствовали этого основного элемента доверия в публичном пространстве, которое в США на самом деле является белым пространством. 9 Этим явно поддерживающим утверждением Бисс фактически стирает другую, черную, сторону опыта.

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

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

Вот как неявная предвзятость становится предпочтительной рамкой для борьбы с расизмом, как отмечает Кобб: «Скрытая предвзятость отделяет расизм от явного злодейства и, как следствие, порождает меньшую оборонительную позицию в диалоге». 10 Однако и концепция, и практика неявной предвзятости питают «подлость». Они оба являются частью одного и того же континуума, набора стратегий управления расой и расовыми конфликтами с точки зрения доминирования белых. На языке системного мышления это было бы похоже на решение проблемы на том же уровне, на котором она была создана, что, как мы знаем, не приводит к системным изменениям, а фактически усиливает систему, когда появляется для белого человека. вносить изменения.Это похоже на повествовательные петли, так ярко изображенные в шоу HBO Westworld , мир, созданный белыми учеными и бизнес-магнатами, который позволяет белым посетителям доминировать над своими хозяевами без последствий.

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

Мы можем начать с вопроса: «Как белые лидеры в некоммерческом секторе используют подходы белого пространства, чтобы рассматривать общественное пространство как белое пространство?» Разоблачительное вмешательство Бисса опровергает его важность для подходов нашего сектора, в том числе тех, которые направлены на устранение расового неравенства. Он находится в самой структуре работы по расовому равенству, которая сама по себе оспаривается - разнообразие, равенство и инклюзивность (которая получила одобрение в собственном белом пространстве сектора) против расовой справедливости, включая возмещение ущерба (предпочтительный подход цветных людей).Он проявляется в том, кто руководит даже при разработке процессов изменения расового равенства (обычно это белые лидеры, которые «непреднамеренно» спроектировали свои собственные организации как белое пространство). Он заключается в том, чтобы запечатлеть нашу работу и поделиться ею с миром с белой рамкой для аудитории, представленной преимущественно белой (в основном белые спонсоры и доноры).

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

Банкноты

  1. Элайджа Андерсон, «Белое пространство», в Социология расы и этнической принадлежности 1, вып. 1 (SAGE, январь 2015 г.): 10–21.
  2. Там же, 13.
  3. Там же.
  4. Там же.
  5. Там же.
  6. Джелани Кобб, «Starbucks и проблема белого пространства», New Yorker , 4/11 июня 2018 г.
  7. Мавис Бисс, «Наше сломанное доверие к общественному пространству», New York Times , 28 мая 2018 г.
  8. Там же.
  9. Кобб, «Starbucks и проблема белого пространства».
  10. Там же.

Что такое дизайн белого пространства? 5 реальных примеров

Иллюстрация Беттины Райнеманн

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

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

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

Что такое белое пространство в дизайне?

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

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

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

Элементы пробела в пользовательском интерфейсе:

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

Дизайн белого пространства: 5 практических примеров

Теперь, когда вы знаете, что такое пустое пространство и как его идентифицировать в своем дизайне, вот несколько практических советов по применению белого пространства:

1. Сделайте текст более читабельным

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

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

Итак, как найти идеальный межстрочный интервал? Рекомендуется выбирать высоту строки пропорционально размеру шрифта. Оптимальная высота строки для основного текста составляет от 120% до 145% от размера шрифта.

Правильная высота строки делает текст более читабельным. Изображение предоставлено Ником Бабичем.

2. Создавайте связи между отдельными элементами

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

На этом изображении квадрат создан из кругов, а не из набора кругов. Изображение предоставлено Ником Бабичем.

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

Поле формы с именем, адресом, адресом электронной почты и номером телефона для представления использования пробела. Изображение предоставлено Ником Бабичем.

3. Привлекайте внимание пользователя к определенным объектам

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

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

Большой размер шрифта и большое количество белого пространства возле слогана «Сохранить что-нибудь. Читать везде »ставит его в центр внимания. Имиджевый кредит instapaper.

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

4. Создание визуальной иерархии на странице

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

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

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

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

Асимметричный макет с белым текстом слева и изображением на сером фоне справа. Изображение предоставлено Neuralink.

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

5. Передайте ощущение элегантности

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

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

Белое пространство никогда не теряется. Пространство

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

Миф № 28: Пустое пространство - это потраченное впустую пространство

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

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

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

Важность белого пространства в веб-дизайне

  • Позволяет упростить чтение и сканирование
    Учебное пособие по веб-дизайну Tuts по использованию белого пространства эффективно указывает на то, что основная роль белого пространства заключается в «уменьшении количества посетителей текста. видеть все сразу и значительно облегчает чтение ». Загроможденная страница непривлекательна и не вызывает у пользователей желания читать контент, особенно если в тексте нет визуальной иерархии. Лабораторное исследование (PDF), проведенное Государственным университетом Уичито, показало, что пустое пространство на самом деле улучшает понимание прочитанного, хотя может снизить скорость чтения.
  • Приоритезирует элементы пользовательского интерфейса
    Люк Вроблевски в статье «Разработка невидимого» утверждает, что «для дизайнеров пустое пространство часто так же важно, как и сам контент», поскольку такие невидимые элементы интерфейса помогают сообщать, «что наиболее важно, что связано, и что требует внимания ».
  • Направляет пользователей на страницу
    Поскольку белое пространство может фокусировать элементы контента, оно может «фактически направлять ваш взгляд от одной точки к другой», - утверждает Карла Роуз.Очень важная роль белого пространства заключается в том, чтобы «направлять зрителя по странице по замыслу дизайнера», - говорит Джейсон Санта-Мария в своей статье о дизайне белого пространства.
  • Может создать ощущение изысканности и элегантности
    Щедрое использование белого пространства может даже способствовать желаемому позиционированию бренда. A List Apart написал исчерпывающую статью о пустом пространстве, в которой утверждается, что оно может «создать ощущение изысканности и элегантности для высококлассных брендов.«Косметика, например, обычно использует обширные пробелы в своих маркетинговых материалах, чтобы сказать, что они высококачественные продукты.
  • Необходим для сбалансированного, гармоничного макета.
    «Пустое пространство на странице может быть не менее важным, чем пространство, занимаемое изображениями, потому что даже пустое пространство служит определенной цели и поддерживает визуальную целостность макета», по словам Джейсона Санта-Марии.

Элементы белого пространства

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

Как бы мир выглядел без пробелов

Золтан Коллин - Давайте подключимся

Зачем вам нужно «белое пространство» в повседневной жизни • Джоселин К.Glei

Работа Рауля Сориа.

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


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

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

В своей книге Scarcity исследователи Сендхил Муллайнатан и Эльдар Шафир убедительно доказывают, что «нехватка времени» - состояние постоянного превышения расписания - уменьшает нашу силу воображения. Вот отрывок для выбора:

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

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

Пустое пространство нам нужно в повседневной жизни так же, как и в дизайне.

Работа Рауля Сориа.

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

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

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

  • Сидеть спокойно и позволять мыслям блуждать
  • Свободный рисунок без конкретной цели
  • Прогулка по кварталу
  • Выполнение мини-тренировки
  • Сильный сон
  • Автоматическое письмо
  • Люди смотрят
  • Медитация
  • Играет

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *