Иногда веб-дизайнеры, как новички, так и те, которые обладают некоторым опытом, полагают, что самое главное и основное при работе с дизайном сайта расположить красиво элементы на странице. Разместили инфоблоки, расставили рядом иконки или картиночки, разделили все это цветными фонами и все, даже если в некоторых случаях выглядит это «под копирку». Но задумайтесь…останется ли посетитель на сайте надолго, будет ли изучать информацию или в его душе что-то «ёкнет» и он попросту покинет сайт.
В нашем блоге мы много рассказывали о том, где можно подчерпнуть идеи расположения элементов или сочетания цветов, почему некоторые сайты покидаются посетителями почти сразу, а другие привлекают к себе внимание и остаются в душе человека. Сегодня рассмотрим варианты и способы использования пространства в веб-дизайне, идеи того, как можно сочетать элементы. Казалось бы, это самые простые истины и то, с чего начинается веб-дизайн. Но в реалии глубины и корни сочетания и использования пространства и форм базируются на теориях гельштата. И хотя идей и мыслей может быть много на эту тему, мы рассмотрим некоторые из них, самые наглядные и яркие.
Загадочный гештальт
Понятие «гештальт» относится к формам, видам, структуре, модели и целостности. В 1890 году появилась идея о том, что человек воспринимает мир как нечто целое и если, невзирая на информацию, ему чего-то не хватает, его восприятие само дорисовывает нужную картину. Именно восприятие позволяет нам прочитать текст на изображении без ошибок и только затем приглядеться к нему.
Таким образом, несмотря на то, что именно мы видим и в каком количестве, воспринимаем мы это уже по-своему и как нечто целое. И, разумеется, каждый человек воспринимает окружающий мир тоже по-разному.
Затем с течением времени появились программы по психологии, основанные на разных целостных структурах – гештальтах, которые представляют собой упорядоченную нашим восприятием структуру из отдельных элементов. О теориях и принципах можно рассказывать много, но для веб-дизайна сегодня нас интересует восприятие фона и фигур, то есть элементов.
Зрительные ощущения
Известно, что выделение фигур на фоне способно воздействовать на восприятие человека. Расположение рисунка на странице сайта никогда не будет восприниматься человеком отдельно от фона или окружающей информации. Подсознательно мы будем все равно искать связь между ними. Аналогично этому чисто белый цвет фона не используется никогда, так как воспринимается как активный и немного раздражающий фактор. На множестве сайтов, которые мы посещаем ежедневно фоны, как минимум, чуть-чуть серые.
Свободу пространству
Пространство в веб-дизайне играет огромную роль, так как позволяет человеку сконцентрироваться, найти глазами нужное, переключиться на соседние инфоблоки, рассмотреть таблицы или другие элементы. Если на сайте не выделена роль пространства, тогда будет обычное загромождение визуальными элементами (картинками, баннерами, рекламой и прочее, и прочее). Наглядный пример из нашего прошлого материала. Почему европейцы с трудом воспринимают китайские сайты? Из-за перенасыщенности информацией их письма, огромного количества глифов. Для самих китайцев такое норма, но для европейцев – нет. Подсознание привыкло к иному, к другому языку, особенностям письма. Скриншоты и примеры повторять не будем.
Другой пример. Вспомните какими были сайты еще лет пять-семь назад. Первые блоги, сайты с warez’ом и аналогичные. Посещать их было сложно, все мигало, было много картинок, иконок, текст и тут и там – разобраться сразу было непросто. Примеры ниже почти аналоги. Информации на них много, очень много. Они буквально перегружены ею и потому все в совокупности воспринимается как нечто «давящее». Добавьте еще сочетание «агрессивного» алого, растительные элементы на коричневом фоне, обилие диагоналей. В результате восприятие оказывается «растерянным», оно пытается собрать воедино все и понять то, о чем вообще говорится на сайте.
Именно поэтому пространство должно использоваться для улучшения читабельности и разборчивости, делать текст привлекательным, а не быть просто фоном для большего количества фигур и элементов. Пусть на Landing Page будет много свободного пространства и только две колонки с инфоблоками по две строчки текста в каждом. Зато воспринимается это куда нагляднее и понятнее. Вам это напомнит основы минимализма и это верно. Пространство способно придать вашему сайту утончённость и чистоту, роскошь и открытость, простоту и доступность.
Главное не только в минимуме
Рациональное сочетание элементов и пространства зависит не только от теорий гештальта, но и от того, как сам веб-дизайнер понимает это, способен ли мастер представить, как будет себя чувствовать посетитель на данном сайте. На примере (heroku.com/platform/runtime) ниже обратите внимание на не совсем белый фон и не яркие сиреневые элементы. Даже текст создан не черным, а немного сероватым.
Целостности свободного пространства здесь очень много, но формы и объекты все равно воспринимаются как единое целое, а важная информация не теряется даже в окружении смежных инфоблоков.
Аналогично можно сказать и про проект justinrfreeman.com, отличающийся практическим отсутствием изображений. Но стилистика текста, шрифты, расположение и оформление пространства и фона позволяют дизайну быть единым целым, восприниматься как совокупность без перегруженности.
Асимметрия и таблицы
Текстовые блоки могут располагаться как строго в табличной форме, так и сочетаться с асимметрично, но все это разделяется тонкими, едва заметными, неяркими линями. Например theswishlife.com.
Такие линии позволяют окружающему пространству заполнить все вокруг собой и при этом не позволить инфоблокам потеряться, будь это картинки или текст. Посетитель же не ищет возможности увидеть что-то иное, кроме того, что расположено в данном пространстве. Его внимание полностью сконцентрировано.
Яркая асимметрия
Асимметрия в целом позволяет играть пространством и объектами. Огромное количество свободного места вокруг текста, пунктов меню позволяет глазам спокойно рассматривать сайт, изучать находящуюся здесь (jorgerigabert.com, petermcleaveygallery.com) информацию.
Обратите внимание на игру цвета (elliotjaystocks.com). Если бы основная часть и меню были одного тона, то внимание посетителя было бы рассеянным и восприятие оказалось бы обескураженным.
Упорядоченность
На примере audedegrassat.com хорошо видно, насколько пространство позволяет изучить визуальную информацию. Несмотря на большие картинки и анимацию при наведении на них курсора, в целостности восприятие видит систему расположения элементов, структуру и наглядность.
Что же касается примера сайта Raffles Institution (ri.edu.sg), то он достоит внимание сразу по нескольким причинам. С одной стороны, он содержит много текста и изображений, но не выглядит перегруженным. Прокручивая страницу вниз и вправо, посетитель получает огромный объем информации, который систематизирован, разбит на блоки и отделяется от прочей информации цветом фона, линиями, заглавиями.
В совокупности принципы гештальта в данном случае использовались явно и наглядно, влияя на восприятие человека и позволяя ему ознакомиться и найти нужное очень быстро и без раздражающих элементов.
Весьма интересное решение сочетания элементов и пространства можно увидеть на сайте bigyouth.fr/en. В отличие от прочих наших примеров здесь фон имеет однотонный цвет, но расположение самих текстовых блоков в окружении огромного количества свободного места позволяет сконцентрироваться взгляду. Листая страничку вниз, можно увидеть самые разные изображения в сочетании с текстом, расположенные в строгом порядке. Но заметьте, расстояние между ними, даже маленькие отступы создают ощущение свободы и удобства.
Резюме
Хочется надеяться, что наш материал более наглядно продемонстрировал два основных момента использования пространства в веб-дизайне. Это роль пространства, как связующего звена между всеми элементами сайта. И если подумать, то все дизайнеры руководствуются этим принципом, будь то создание интерьера, макета парка или веб-дизайн.
С другой стороны, чтобы правильно и положительно использовать игру пространства и форм требуются усилия и время на изучение всего того, что существует в интернете, изучение образцов работ других веб-мастеров, изучение отношения пользователей к действующим сайтам. Макет страницы – это создание рабочего места, рабочей области пользователя, а работа идет тогда хорошо, когда есть пространство для неё и для работника.
Мы привели несколько примеров того, как пространство сочетается и управляет восприятием элементов. Как сами элементы (фигуры) в небольшом своем количестве привлекают к себе внимание, располагаясь на огромной свободной площади. Но вариаций сочетания может быть много. Важно позволить пространству управлять не просто элементами, но восприятием человека, словно бы преподнося ему то важное, красивое и необходимое, что он ищет.
