Психология дизайна. Гештальт принцип близости в шаблонах TemplateMonster

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

Всего известно 6 принципов гештальта: близость, схожесть, смежность, замкнутость, целостность и общая зона. Сегодня мы поговорим о «близости» в контексте шаблонов от TemplateMonster.

* * *

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

«Единое целое — гораздо больше суммы его частей» - Дэвид Хозерсолл (David Hothersall)

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

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

* * *

А вот еще один целостный дизайн сайта, который использует принцип гештальта.

* * *

* * *

Использование расстояний между блоками для выразительности

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

* * *

Случается, что пользователи желают упорядочить элементы сайта, но при этом не слишком увеличивать расстояние между ними. Свойство lineBreak позволяет задавать разрыв и перенос строк (горизонтальных или вертикальных).

* * *

Избегайте логической путаницы между разделами и элементами сайта

Старайтесь размещать названия, описания, ссылки максимально близко к элементам, к которым они принадлежат (изображениям, текстовым частям, кнопкам, подписям и т.д.). Помните, во всем должна быть ясность.

* * *

Модульная сетка — лучший вариант для правильного использования близости

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

* * *

Группировка элементов страницы

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

* * *

Наиболее важные принципы гештальта

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

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

* * *

* * *

* * *

Собственно, близость: чем ближе элементы расположены друг к другу, тем более родственными они кажутся.

* * *

* * *

* * *

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

* * *

* * *

* * *

Схожесть: аналогичный цвет, форма и размеры элементов создают впечатление похожести и родственности.

* * *

* * *

* * *

Разработка сайтов на принципах гештальта обеспечивает оптимальное взаимодействие с посетителями ресурса. При разработке веб-сайта следует учитывать несколько аспектов:

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