Главное Авторские колонки Вакансии Образование
Выбор редакции:
6 353 1 В избр. Сохранено
Авторизуйтесь
Вход с паролем

Негативное пространство в дизайне — хорошие и плохие примеры

Негативным пространством (от англ. Negative space) называется «воздух» в дизайне — оптимизирующее пустое пространство между элементами.
Мнение автора может не совпадать с мнением редакции

b_5aad57b50b9f5.jpg

Анна Липатова - UX/UI дизайнер «Веб-Эталон

b_5aad4b5412d0c.jpgПравильное распределение «воздуха» на сайте newjumoconcept.com привлекает внимание к продукту и структурирует текст для легкого восприятия.

Почему стоит использовать негативное пространство

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

b_5aad4b823dca9.jpgДостаточное пространство между строчками и отделение заголовка от текста структурирует контент и облегчает восприятие. На сайте voellerei.at/en/.

b_5aad4b9285c6d.jpgСвободное пространство выделяет текст и картинку, привлекая к ним внимание. Сайтvasabi71.ru. b_5aad4ba246876.jpg

При просмотре карточки товара пользователя не отвлекает ненужная информация. Только иллюстрация и короткий текст. Дизайн для сайта megasup.ru.

b_5aad4bb332949.jpg

Из-за недостатка пространства между элементами информация не структурирована и не имеет иерархии, это затрудняет восприятие сайта samelectrik.ru.

Негативное пространство разделяют на две составляющие:

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

b_5aad4c095afc0.jpg

Благодаря большому объему негативного пространства на сайте kikk.be/2017 хочется уделить внимание каждому элементу.

b_5aad4c1f5c2a5.jpg

Из-за скученности элементов и отсутствия иерархии на сайте divan.ru сложно ориентироваться.

2. Микро - негативное пространство между небольшими элементами страницы (карточки, СТА-кнопки, текст).

b_5aad4c41e7e66.jpg

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

b_5aad4c7014fa4.jpg

На zapclick.ru близкое расположение элементов и одинаковое расстояние между ними сбивает с толку.

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

Количество «воздуха» в оформлении должно соответствовать контенту страницы.

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

1. С помощью «воздуха» акцентируйте внимание на позитивном пространстве (наполнении страницы).

b_5aad4c88a2fdd.jpg

Благодаря пустому пространству внимание сосредотачивается на контенте - сайт jam3.com.

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

b_5aad4cadb7696.jpg

На сайте acmeinteriors.co.in с помощью пустого пространства сформирована структура контента.

3. Найдите идеальный баланс негативного и позитивного пространства.

Landing page могут позволить себе большой объем негативного пространства, чтобы обратить внимание пользователя на кнопку призыва к действию. Сайтамс большим объемом информации (интернет – магазинам, справочникам) тоже необходим «воздух», но его использование должно быть умеренным.

b_5aad4cd35b378.jpg

Равномерно распределенное негативное пространстводелает сайт instapoly.ruгармоничным. Отсутствие второстепенной информации в верхней части привлекает внимание к кнопке.

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

b_5aad4d0a36495.jpg

Соблюдение правил теории близости и добавление негативного пространства на сайте vasabi71.ru, позволяет пользователю с легкостью воспринимать информацию.

b_5aad4d1bb9c5b.jpg

Благодаря балансу теории близости и негативного пространства, дизайн для сайта modpic.ru выглядит простым и понятным.

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

+3
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Роман Медведев
Довольно интересная статья, попробуем поэкспериментировать
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.