От автора: пространство – фундаментальный параметр веб-дизайна, и, кроме того, один из самых недооцененных. Если контролировать белое пространство, то можно управлять малозаметным, но определяющим элементом веб-страницы и извлечь из него пользу.
Вкратце, белое пространство – это промежутки между разными элементами, будь то разделы страницы или пробелы между буквами. В большинстве случаев мы употребляем белое пространство (также называемое негативным) для разделения содержимого с целью более легкого и гораздо более быстрого просмотра страницы без необходимости применения специальных разделяющих элементов.
Сегодня мы раскроем, как можно использовать негативное пространство в своих проектах и разберемся в точности, как оно помогает проекту выглядеть аккуратным и не загроможденным.
Что такое белое пространство?
Как я только что объяснил, белое (или негативное) пространство – это промежуток между разными элементами, в котором ничего не содержится. Для сравнения заполненное пространство мы называем позитивным. На самом деле негативное пространство помогает формировать и разделять то, что является позитивным пространством. Это можно рассмотреть на оптической иллюзии внизу.
Что вы видите? Вазу или два лица? Если вы увидели лица, то это оттого, что в этом отдельном проекте белое пространство действует как негативное пространство, тогда как черное — позитивное. Можно поменять их роли и получить совершенно другой вид, потому что оба они работают вместе и формируют изображение.
Этот пример ведет к тому, что негативное пространство весьма важно, так как помогает разделить контент, расположенный в позитивном пространстве. Считайте белое пространство не неизрасходованным остатком, для которого вы не создали содержимого, а именно основным структурным игроком разметки вашего сайта.
Также существует два уровня белого пространства. Это белые микро- и макропространства, соответствующие промежутку между основными элементами центральной части и промежутку между меньшими элементами.
Google, как видно, ярый защитник белого пространства в своих проектах. У этого поисковика, как широко считается, аккуратный дизайн, так как внимание концентрируется на основной цели страницы, без массивных добавлений в прочие области (не то, что у других).
Я восхищаюсь работой над дизайном, которую проделала на этом сайте команда Envato. Тут между заголовками, подписями и параграфами отлично, уравновешенно используется белое пространство.
Негативное пространство не обязано, на самом-то деле, быть цельным цветовым блоком. На фотографии любая область, не находящаяся в фокусе, может быть определена как негативное пространство. В этом примере недостаток фокуса на фоне привлекает ваш взгляд к кружке. (И, кроме того, разве Starbucks не сменил свой логотип?)
При работе над проектом обычно всегда сосредоточиваешься на позитивном пространстве. Почти подсознательная установка заключается в том, что негативное пространство в действительности помогает формировать то, как размечается и затем читается позитивное пространство. Это свойство затем можно отладить для чтения и взаимодействия с позитивным пространством.
Аналогия
Представьте себя в магазине. У вас не останется комфортного и приятного впечатления, если передвигаться по нему сложно из-за переполненных проходов между полками, а также оттого, что продавец постоянно предлагает вам свои специальные предложения. Тут слишком много того, на что можно смотреть, а у вас нет ни времени, ни терпения разыскивать то, за чем вы изначально пришли. Ничего хорошего.
Это одна из свойств, из-за которых так хорошо работают магазины Apple. Они очень минималистичны и огромное пространство магазина отдано именно продукции. Однако если вы забредете в другой магазин PC, то будете поглощены нескончаемыми полками устройств, которые выглядят и функционируют по-разному. На своем опыте я убедился, что впечатление от минималистических покупок обычно гораздо приятнее.
А теперь что все это имеет общего с веб-дизайном? На самом деле многое. Вы не выходите онлайн с целью выудить отдельную строку текста из огромного количества бесцельного, не нужного вам контента. Негативное пространство помогает при обеих этих проблемах, делая проекты незахламленными, и в то же время, привлекая внимание к фокусной точке страницы.
Негативное пространство улучшает читабельность
Вы может поинтересоваться, зачем вам беспокоиться о том, чтобы негативное пространство было правильным?
Текст в сети не похож на текст на любом другом носителе и все мы подстраиваем свои проекты так, чтобы конечному пользователю было очень легко читать содержимое. В отличие от газеты, в сети может раздражать то, что приходится стараться и расшифровывать, где на самом деле находится нужный вам контент. Переполненные проекты, слишком тяжелые для восприятия, не обеспечивают легкости чтения, так как нам приходится сначала пристально разглядывать веб-страницу, чтобы отделить элементы друг от друга. Белое пространство вклинивается между элементами буфером, поэтому легче находить то содержимое, которое нужно.
Вкратце, белое пространство все разделяет, дает элементам их собственное личное пространство, самостоятельность, различимость, легкость для чтения и взаимодействия.
Негативное пространство в веб-дизайне
Негативное пространство применяется во многих областях творчества, особенно в фотографии. В ней негативное пространство – это любое пространство, которое не используется для содержания объекта, что недалеко от той роли, которую оно играет в веб-дизайне. Если рассмотреть веб-дизайн Apple’а, то там, естественно, применяется как макро- так и микро-белое пространство для создания отступов элементов и определения им своего места на странице.
В проекте Apple’а используется как макро-, так и микро-белое пространство, назначенное двумя разными цветами, перекрывающими изображение снизу. Так в результате получается аккуратный, элегантный, изящно разделенный дизайн-проект. Вы могли этого не знать, но на внимание к содержимому повлияет отсутствие контента в областях белого пространства. Диапазон нашего внимания, как доказано, в сети меньше, поэтому захламленные, тяжелые печатные дизайны не стали тенденцией, перешедшей в сферу виртуального дизайна.
Конечно, пространство не обязательно должно быть белым. Любой вид пустого пространства, не соперничающего с находящимся в фокусе содержимым, может классифицироваться как «белое пространство», как в проекте внизу.
Утонченность и роскошь
В печатном дизайне можно заметить, что вашему клиенту нужен каждый клочок «недвижимости» для использования при продвижении своего продукта. Однако совсем другое дело, когда проект выполняется для виртуальных площадок. Белое пространство добавляет на общую веб-страницу ощущение утонченности и роскоши, создав чувство того, что продукт более важен, чем «недвижимость», где он находится. Так, применив принцип «меньше – это больше», можно дать продукту возможность выглядеть роскошно. Когда смотришь на сайт Apple – торговой марки, которую мы считаем стоящей на высшем уровне в компьютерной области – нужно очень немногое, так как продукт говорит сам за себя, хотя и в пределах нескольких минималистичных направляющих. Это феномен, также популярный на вебсайтах с отличным состоянием и процветанием, где для донесения общей идеи рекламируемого продукта или сервиса требуется мало контента.
Часто более дешевые торговые бренды стараются впихнуть в пространство как можно больше информации; различные рынки, различные конечные пользователи. Сайты HP и Apple, например, выделяют этот момент. Apple – общеизвестно уверен в себе и дает своему продукту говорить самому за себя. Если товар вам нужен, осмотритесь или пройдитесь. С другой стороны, сайт HP применяет деловые продажи более дорогого продукта и перекрестные продажи, предложения и продвижение низких цен у своих пользователей, а также пытаются выставить ассортимент своих альтернативных продуктов, которыми вы можете заинтересоваться.
Улучшаем негативное пространство
К этому моменту вы уже должны распознавать, что такое негативное пространство, и как идентифицировать его в своем проекте. Если вы новичок в этой области, то можете растеряться, когда кто-нибудь предложит вам усовершенствовать белое пространство. Я бы не удивился, если бы вы ответили чем-то вроде: «это ведь просто оставшееся место». Ну, на самом деле, ваше негативное пространство, чтобы сделать его существование более эффективным, можно очень сильно улучшить, отладив нескольких обычных проблем.
Поля и одинаковые промежутки
Одной из самых больших проблем могут оказаться неодинаковые промежутки, но ее можно легко решить. Все элементы кажутся более уравновешенными и, в общем, лучше смотрятся, когда отступы вокруг элемента одинаковые. Если обратить внимание на пример внизу, дизайн примера с правой стороны смотрится намного лучше оттого, что отступ между элементами одинаковый и постоянный.
Поля также не должны оставлять от проекта ощущение несвязанности. Слишком большие поля могут разорвать связь между элементами, снижая ощущение единства дизайна. Большие поля также будут расходовать понапрасну частное пространство, потенциально снижая эффективность вашей работы.
Микроуровневые промежутки
Как уже объяснялось, микроуровневые промежутки – это негативное пространство, которое существует между самыми маленьким элементами страницы, такими как буквы в параграфе.
Пробелы между строками могут радикально улучшить разборчивость основной части текста, будучи критическим моментом в вашем изучении хорошо скроенной типографской разметки текста. Межстрочные интервалы, или интерлиньяж – это белое микропространство между строками текста. В общем, чем больше межстрочный промежуток, тем лучше впечатление пользователя во время чтения, хотя слишком большие могут разрушить целостность и сделать дизайн проекта разобщенным.
На примере справа межстрочный интервал больше, и, при применении большого текста, его будет проще читать.
Точно так же межбуквенные промежутки могут внести свой вклад в хорошее использование негативного пространства. Скученные буквы совсем неинтересно читать, но и такие, которые можно принять за отдельные слова, тоже. И опять это вопрос нахождения идеального баланса.
По-разному анализируйте каждый проект
При разработке и подгонке своего веб-проекта работайте на свежую голову, на которую не влияет то, что вы делали последний раз. Все проекты разные и, так как отсутствуют предписанные направляющие или последовательная математика, вам нужно применять свежий взгляд для анализирования каждого проекта по отдельности.
Последние рассуждения
Негативное пространство, как я уже упоминал несколько раз в этой статье, и незагроможденность проекта помогают сформировать и привлечь внимание к содержимому страницы. Возвращаясь к аналогии шопинга, никому не хочется работать для достижения желаемого итога. Вместо этого хочется быть обслуженным на легко распознаваемой тарелке, которую не беспокоят бесцельные дополнительные блюда, непрошенные и нежеланные.
Подводя итоги, мы также можем улучшить использование негативного пространства путем анализирования и повышения качества полей, делая их по возможности постоянными и обращая внимание на типографскую разметку текста и микроуровневые промежутки. В идеале вы должны также воспринимать каждый проект по отдельности для того, чтобы распознать зону наилучшего восприятия дизайна проекта.
Помимо практических преимуществ аккуратной, незахламленной веб-страницы, негативное пространство может создать ощущение утонченности и элегантности, дав контенту возможность «говорить самому за себя» без значительного вторжения, что кажется дешевкой.
Спасибо за погружение с головой в интересное путешествие по этой сфере. Надеюсь, вы узнали что-нибудь (я уж точно) о важности негативного пространства в дизайне и, возможно, дважды подумаете перед попыткой впихнуть миллион бессмысленных или ненужных объектов в свою страницу. Перед тем, как покинуть вас, еще одна последняя подсказка: пройдите пятисекундный тест (смотрите на страницу в течение пяти секунд и напишите то, что запомнили) просто для того, чтобы убедиться, что ваш проект не загроможден и белое пространство в нем используется правильно.
Автор: Connor Turnbull
Источник: //webdesign.tutsplus.com/
Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.
Комментарии (20)