Негативное пространство в дизайне: советы и практики


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

Публикация: 04.06.2018 05.06.2018 Kirill Lipovoy CloudMakers CloudMakersru

Содержание

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

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

«Негативное пространство похоже на холст: это фон, который объединяет элементы в дизайне, позволяя им выделяться», — говорит Мэдс Согаард из Interaction Design Foundation.

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

Что такое негативное пространство в дизайне

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

Простота привлекает

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

негативное пространство: продукт

В чем разница между белым пространством и негативным?

Короткий ответ: никакой разницы. Эти понятия полностью взаимозаменяемы.

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

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

Три предостережения

Вы слышали о трех мушкетерах. Три предостережения – это их менее авантюрные братья.

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

Достаточно ли пространства для маневров?

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

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

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

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

Как понять, что негативного пространства слишком много?

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

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

Почему негативное пространство важно?

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

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

Среди преимуществ продуманного применения негативного пространства в дизайне мы могли бы упомянуть следующее:

  1. оно поддерживает чтение страницы;
  2. оно улучшает визуальную иерархию;
  3. оно поддерживает визуальную связь между элементами;
  4. оно обеспечивает достаточно воздуха на странице, чтобы она не чувствовалась загроможденной;
  5. оно фокусирует внимание пользователя на основных элементах и уменьшает уровень отвлеченности;
  6. оно добавляет стиль и элегантность на страницу.

Например, давайте посмотрим на целевую страницу Big City Guide. Здесь дизайнер применяет фоновое фото, и оно играет роль негативного пространства. Более того, элементы фотографии и надписи основного элемента взаимосвязаны: это делает отрицательное пространство активным элементом дизайна и придает странице единый гармонический вид.

Гештальт-принципы в веб-дизайне

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

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

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

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

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

  1. Фигура и фон (Figure And Ground),
  2. Близость (Proximity),
  3. Симметрия и порядок (Symmetry And Order),
  4. Сходство (Similarity),
  5. Замкнутость/завершенность (Closure),
  6. Непрерывность (Continuity).

Фигура и фон

Фигура — это объект, который интуитивно и визуально отделен от фона.

Чаша Грааля

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

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

Соотношение «фигура-фон»

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

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

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

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

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

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

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

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

Близость

Термин «близость» относится к приближенности элементов на странице. Для создания значимой ассоциации различные части на страницах сайтов могут быть сгруппированы вместе. Автоматическое соединение этих элементов в уме зрителя создается за счет близости друг к другу (а также сходства).

Близость в дизайне

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

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

Форма входа в почту от Яндекс — еще один пример близости в веб-дизайне:

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

Симметрия и порядок

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

Симметрия и асимметрия

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

Ниже приведен пример симметрии в веб-дизайне, представленный на сайте Airbnb:

Главная страница этого сайта демонстрирует типичное соотношение «фигура-фон», кроме того, в ней много симметрии.

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

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

Сходство

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

Принцип сходства в дизайне

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

Посмотрите на этот перечень моделей машин от Mercedes-Benz:

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

Взглянем на страницу трендов в YouTube:

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

Замкнутость/завершенность

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

Замкнутость в дизайне

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

Посмотрите на скриншот от Magu Kombucha ниже:

В этом примере можно заметить, что замыкание не затрагивает принцип «фигура-фон». Бутылочки и выделенный жирным текст позади — это фигура, сплошной нежно-розовый цвет — это фон. Где завершенность? Обратите внимание на текст за бутылками. Его видно не полностью, но знающие латинский алфавит посетители могут распознать название напитка — Kombucha («Комбуча», или настой Чайного гриба). За исключением первого «Кo» и последнего «ha» слогов, другие буквы наполовину скрыты, но слово можно завершить интуитивно, и вся фигура начинает обретать форму и, следовательно, смысл. Хороший пример завершенности!

Непрерывность

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

Непрерывность в дизайне

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

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

Возьмем пример с сайта сервиса по совместному управлению проектами:

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

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

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

Факторы, на которые влияет негативное пространство

Грамотное применение отрицательного пространства может оказать значительное влияние на следующие факторы пользовательского опыта.

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

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

Факторы, на которые влияет негативное пространство

Исходя из этого, негативное пространство оказывает влияние на визуальное восприятие в таких аспектах, как:

  • текстовое содержимое;
  • графический контент;
  • навигация;
  • идентичность бренда.

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

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

Четыре способа применить негативное пространство

Темный фон делает тюльпан главным и заметным субъектом в кадре.

Изолировать субъект и привлечь к нему внимание

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

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

Негативное пространство обеспечивает свободу воображения. На что смотрит этот человек? Куда он идет? Охотится ли этот парящий орел? Что собирается делать этот бегущий волк? Что находится за тем цветком?

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

Задать эмоцию или настроение

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

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

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

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

Почти монотонная стена делает минималистичную композицию намного привлекательнее.

Простота и минимализм

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

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

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

Пространство для текста

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

Проблемная зона

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

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

3. Плохая приоритизация. Негативное пространство не является залогом успеха, если за интерфейсом не стоит продуманная информационная архитектура.

Источник и иллюстрации

NEW BEDFORD WHALING MUSEUM (МУЗЕЙ КИТОБОЙНОГО ПРОМЫСЛА)

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

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

Сайт для садовода-огородника. Агрохимикаты, удобрения. Садовая техника

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

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

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

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

Итак, знакомьтесь, негативное пространство

– это место вокруг изображаемого объекта. Проще говоря, это область, незанятая содержанием.

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

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

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

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

С помощью негативного пространства многим дизайнерам удается создавать удивительные логотипы. Вот один из наиболее интересных примеров — логотип Американского Архитектурного центра.

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

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

Учитесь видеть негативное пространство!

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

Один из инструментов, который используется преподавателями в художественных вузах, стал известен благодаря книге профессора Бетти Эдвардс «Рисование правой частью мозга»

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

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

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

Широкие возможности «негативного пространства».

Применяя возможности «негативного пространства» можно добиться:

  1. Ощущения воздушности и элегантности композиции.
  2. Концентрации внимания на самом главном элементе композиции.
  3. Лёгкости восприятия текста.
  4. Управления взглядом зрителя. Например, от заголовка к иллюстрации, от иллюстрации к тексту.
  5. Передачи дополнительного смысла работы.

Очень интересно использует отрицательное пространство в своих картинках израильский иллюстратор Нома Бар

(Noma Bar). Его рисунки лаконичны, просты и в то же время остроумны. Он выпустил книгу иллюстраций «Негативное пространство» («Negative Space»). Данная подборка была опубликована в изданиях The Guardian и New York Times Magazine.

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

Существует такое понятие — негативное пространство

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

1. Заставлять фотографию дышать, наполнять ее воздухом.

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

3. Создавать однородный фон для четкого и читабельного разделения планов.

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

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

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

Помимо негативного пространства, существует пространство мертвое

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

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

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

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

Идея статьи

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

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

Итак, начнем!

Негативное пространство

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

Негативное пространство”

 - это пространство между элементами на странице.

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

”.

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

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

Разделение негативного пространства

Есть несколько различных видов негативного пространства, применяемых в layout-ах веб-сайтов:

  1. Композиционное негативное пространство
     - пространство для полей, отступов и общей композиции.
  2. Визуальное негативное пространство
     - пространство для графиков, иконок, кнопок или элементов.
  3.  - пространство между заголовками / пунктами и строками текста.

Для примера давайте рассмотрим с вами предыдущий слайд. Это пример админпанели (или Dashboard

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

Композиционное пространство

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

Визуальное пространство

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

Копнув глубже, мы увидим текстовое негативное пространство

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

Макро- и

Ребята из UXPin в своей книге часто “негативное пространство” называют “цифровым белым пространством”.

Все стили негативного пространства можно разбить на 2 основные категории: и . Большие сайты включают обе категории в дизайн layout-ов.

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

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

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

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

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

Как применять негативное пространство

Каждый веб-сайт использует пространство по-разному в зависимости от сути контента.

К примеру, вы можете оставить много негативного пространства на

landing page, потому что хотите сделать акцент на кнопке призыва к действию.

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

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

Суть заключается в том, что негативное пространство

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

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

Пространственные дизайн фичи

На данном слайде также, показано хорошее применение негативного пространства.

Композиция - это гештальт

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

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

Гештальт законы гласят - объекты, расположенные в тесной близости будут выглядеть как единый “блок”, таким образом, негативное пространство выступает в качестве визуального сигнала

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

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

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

Практическое применение

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

с другими дизайн техниками, которые хорошо работают друг с другом.

Вот несколько советов для практического применения негативного пространства

:

  1. Разнообразие - хорошо.
    Для некоторых проектов, возможно, потребуется меньше негативного пространства, для других, наоборот - намного больше.
  2. Приоритет - разборчивость и читаемость.
    Перед тем, как приступить к дизайну, создайте список элементов интерфейса для оценки масштабов вашего контента. После того, как вы закончите, попробуйте создать своего рода грубый варфрейм контента, чтобы оценить, сколько пространства потребуется для хорошей разборчивости (насколько хорошо вы сможете различить буквы и слова) и читаемости (насколько хорошо вы сможете разбирать содержимое).
  3. Вырывайтесь из вакуума.
    Используйте контрастные цвета, соизмеримые размеры шрифтов и асимметричное
    негативное пространство
    , чтобы добавить стиля в layout. Поймите, что
    негативное пространство
    является побуждающим к реакции элементом дизайна и влияет на восприятие всех окружающих элементов.

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

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

Практическое негативное пространство

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

Эстетические свойства негативного пространства

Для большего погружения в дизайн негативного пространства

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

Негативное пространство

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

Подводя итог, помните:

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

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

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

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

Большее расстояние привлекает внимание

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

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

В случае, когда вы сомневаетесь, как лучше поступить - всегда нужно предпочитать большее количество негативного пространства

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

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

Чередование пространственных элементов

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

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

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

Наблюдаемый контраст

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

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

Пространство привлекает внимание

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

Создание эффекта luxury с помощью пространства

Пример на слайде взят с сайта Marie Laurent (https://marielaurent.fr/)

Несмотря на то, что негативное пространство

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

Большинство layout-ов, извлекающих пользу из эстетического негативного пространства

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

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

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

отделяет текст, кнопки, и навигационные ссылки.

Эстетически негативное пространство

также играет важную роль в одностраничных layout-ах.

Иерархия контента строится не только на негативном пространстве

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

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

Действительное понимание, сколько именно негативного пространства

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

Создание структурированного контента и типографики

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

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

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

Взаимосвязи заголовков

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

должно в целом работать одинаково, независимо от стиля заголовков.

Рассмотрим пример, на слайде выше. Обратите внимание пространство между заголовком “Features” больше чем между другими заголовками, что говорит о том, что это главный заголовок всего раздела. В то время как заголовок “Know your business better with free report” читается как заголовок лишь текстового блока, в котором, в свою очередь, есть выделеные жирным, подзаголовки. Во всей этой структуре немаловажную роль играют и абзацы (образующие текстовые блоки), которые подчеркивают главенствующую роль заголовков.

Возьмите такие идеи во внимание для заголовков страниц:

  1. Визуальная иерархия должна быть очевидной, за счет использования пространства, размера, цвета и / или стиля текста. Она должна быть видна даже с расстояния 1–2 метра от монитора.
  2. Размещайте каждый подзаголовок близко к его первому параграфу.
  3. Размещайте текст в непосредственной близости к содержательным заголовкам, чтобы передать свои идеи более быстро и четко.

Контрастные эффекты

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

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

Навигационные меню

На сайте Microsoft наиболее удачно показан пример использования негативного пространства в навигационном меню.

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

Интересно, что количество негативного пространства

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

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

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

Большая часть их навигации - это изысканное использование негативного пространства

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

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

.

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

должно быть применено. Некоторые советы для стилей навигационных меню:

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

Длинные параграфы

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

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

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

Вот некоторые хорошие практические правила:

  1. Не используйте высоту строки больше, чем обычная, средняя строка текста.
  2. EM Unit CSS шрифта идеально подходит для создания единых размеров во всех браузерах.
  3. Высота строки часто должна быть чуть больше, чем размер шрифта.

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

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

Вывод

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

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

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

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

Когда дело доходит до дизайна использования негативного пространства

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

Если Вам было интересно - подписывайтесь на мои странички в соцсетях, а также следите за моими обновлениями. Спасибо!

Пошаговые инструкции

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

Итак, начнем с первого дизайна:

Законченный вид маникюра негативное пространство

  1. Готовим ноготки привычным уже способом к нанесению базы.
  2. Наносим базовое покрытие. Для создания этого маникюра мы будем использовать термоплёнки. Для их использования необходима идеально ровная ногтевая поверхность, поэтому не торопись и тщательно создавай архитектуру ногтя.

    Наносим базовое покрытие

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

Нанести лак на половину ногтевой поверхности можно тремя способами:

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

    Нанести лак на половину ногтевой поверхности тонкой кистью

Это не самый простой способ. Он имеет свои недостатки: цветной пигмент не всегда накладывается равномерно, также можно перестараться с толщиной покрытия. Но, вместе с тем, этот способ быстрый, что является несомненным плюсом;

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

    Нанести лак на половину ногтевой поверхности плоской кистью

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

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

    Нанести лак на половину ногтевой поверхности с помощью скотч ленты

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

отклеиваем ленту с ногтя

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

получается очень ровный пигментированный край

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

    Наносим термофольгу

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

Размещаем отрезанный кусочек фольги на голую поверхность ноготка

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

Убираем лишнюю пленку с помощью кусачек

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

    наносим тонкий базовый слой на весь ноготь

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

    6. Покрываем всю поверхность топом

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

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

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

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

    приклеиваем липкую ленту

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

    гель-лаком покрываем поверхность под лентой

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

    Выравниваем поверхность ноготков

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

    рисуем на ногтях жидким гель-блеском треугольники

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

    маникюр, который прекрасно подойдет для торжества

Более деловой и офисный вариант этого маникюра может иметь такой вид.

офисный вариант этого маникюра

Роль горизонта

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

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

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

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

Способы выполнения дизайна

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

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

    Использование скотча или маникюрной ленты

  • Использовать декоративные наклейки или трафареты. На покрытый прозрачным лаком ноготок приклеить наклейку с узором и покрыть топом. Выглядит такой вариант не менее эффектно;

    Использование наклеек или трафаретов

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

    с помощью кисточек нарисовать цветочный узор

CARREFOUR

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

Кроме того, логотип выполнен в цветах французского флага: красном, белом и синем.

Внутри слов(а)

Если вы посмотрите на названия фирм/брендов в логотипах ниже, то в каждом из них увидите какие-то скрытые символы. Их авторы удачно использовали отрицательное пространство внутри букв или между ними чтобы добавить туда соответствующие тематике элементы: молнию для слова “герой” (Hero), яйца в слово «Egg», изображение кинопленки в “Film” и др.

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

Примечания

  1. FAQ: ‘Ma’ and ‘Mu’ — Japanese Gardens Forum — GardenWeb (неопр.)
    . Forums.gardenweb.com. Дата обращения 11 ноября 2009. Архивировано 22 июля 2012 года.
  2. ArtLex’s Ne-Nz page (неопр.)
    (недоступная ссылка). Artlex.com. Дата обращения 11 ноября 2009. Архивировано 22 июля 2012 года.
  3. A Note for MA: Space/Time in the Garden of Ryoan-Ji — Iimura (неопр.)
    . Mfj-online.org. Дата обращения 11 ноября 2009. Архивировано 22 июля 2012 года.
  4. 12Farid Atiya, Abeer El-Shahawy, Matḥaf al-Miṣrī, Farid S. Atiya.
    The Egyptian Museum in Cairo: a walk through the alleys of ancient Egypt. — С. 75–76. — ISBN 978-977-17-2183-3.
  5. Betty M. Adelson.
    The lives of dwarfs: their journey from public curiosity toward social liberation. — Rutgers University Press, 2005. — С. 5, 141. — ISBN 978-0-8135-3548-7.

Коровой пейзаж не испортишь

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

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

Внутри буквы

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

отрицательное пространство внутри буквы

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

Рейтинг
( 1 оценка, среднее 4 из 5 )
Понравилась статья? Поделиться с друзьями:
Добавить комментарий