Как использовать отрицательное пространство для создания потрясающих сайтов

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

Подпишитесь на наш канал Youtube

Что такое негативное пространство?

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

Примеры негативного пространства

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

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

Павлин NBC делает то же самое:

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

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

Такую же роль в фотографии играет негативное пространство. Посмотрите на этот портрет сына моей двоюродной сестры, Джулиана, который я сделал. На черном фоне все внимание сосредоточено на нем:

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

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

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

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

Микро и макро негативное пространство

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

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

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

Активное и пассивное отрицательное пространство

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

А вот пример пассивного отрицательного пространства:

Негативное пространство и композиция

Негативное пространство важно для композиции по нескольким причинам:

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

Выбор правильного баланса негативного и позитивного пространства

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

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

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

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

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

New York Times, с другой стороны, придумала, как наполнить свою домашнюю страницу новостями, не сводя глаз с ума, и все благодаря интервалу (и выбору цвета). Хотя для макросов не так много места, они воспользовались преимуществами микропространства:

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

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

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

Объяснение клиентам точки отрицательного пространства

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

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

Заключение

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

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

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

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

Лучшее изображение через StockVector / Shutterstock.com