Свободное пространство в веб-дизайне. Что это и зачем его использовать?

Перевод статьиWhitespace in Web Design: What It Is and Why You Should Use It.
Автор статьи: Gisele Muller.

whitespace_img

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

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

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

Существует несколько простейших определений понятия свободного пространства, но самое точное и исчерпывающее с моей точки зрения дано Марком Болтоном в статье Whitespace: «свободное пространство – это просто пустота». (*Достойный перевод упомянутой выше статьи можно прочесть здесь.)

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

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

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

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

 Домашняя страница Google

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

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

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

Илюстрация Марка Болтона

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

Made by Sofa

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

Nudge

Nudge

Philip House

Philip House

NV Interactive

NV Interactive

By Association Only

By Association Only

Squarespace

Squarespace

Handiemail

Handiemail

Type/Code

Type/Code

Lapka

Lapka

Diehl Group Architects

Deihl Group Architects

Jac in a Box

Jac in a Box

Что это дает дизайнеру?

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

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

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

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

Заключение.

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

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

* Примечание переводчика.

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

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