Skip to content

Добавляем пространство в ваши дизайны

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

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

В конце концов, что определяет наличие блока, если не пространство вокруг него?!

Отличный пример использования пространства на сайте Layervault
Отличный пример использования пространства на сайте Layervault

Микро и макро пробелы

Прежде чем идти дальше, мы выделим 2 типа пробелов: микро и макро.

Микро пробелы

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

Макро пробелы

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

Почему мы должны заботиться о пробелах?

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

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

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

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

Преимущества пробелов

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

danedwards

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

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

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

KISS (Keep It Simple, Stupid)

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

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

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

Вот вам еще пример хорошего использования пространства:

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

Источник: WebDesign Tuts+

Данная запись является частью серии "Школа дизайна для разработчиков".

Введение в композицию

Выстраиваем согласованность и взаимосвязь в дизайне