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

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

В основе гештальт-теории лежат 5 принципов:

1. Близость (Proximity);
2. Сходство (Similarity);
3. Непрерывность (Continuation);
4. Завершенность/Закрытие (Closure);
5. Фигура/Фон (Figure/Ground)

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

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

А пока рассмотрим каждый из этих гештальт-принципов по отдельности с примерами. Начнем с принципа близости.

Примечание:

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

Близость (Proximity)

Когда мозг видит некоторые объекты рядом - он их связывает. Посмотрите на эту картинку и вам сразу станет понятно, о чем идет речь:

В приведенном примере видно, что при более близком расположении элементов (на правой карточке) они образуют взаимосвязь. В свою очередь, их легче читать и ассоциировать друг с другом. Мы понимаем, что Пенелопа Родригез - это актриса, а Мэттью Брозович - режиссер. Также этот принцип работает и в обратном направлении, чем дальше друг от друга элементы, тем сильнее отсутствие взаимосвязи между ними: в примере мы легко отличаем группы элементов друг от друга - актер Мэтт ДиКаприо и актер Луис Андрадо - это разные люди и мы очень быстро и не вчитываясь понимаем это.

Спасибо за внимание!

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

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

В зависимости от цели страницы/сайта дизайнер должен определить, какой тип баланса следует использовать для создания иерархии.

Рассмотрим больше примеров принципа близости:

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

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

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

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

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

А что дальше?

Далее советую ознакомиться с другими базовыми принципами, которые здесь не поместились, они находятся в подразделах:

1. Гештальт-принципы
2. Геометрические формы в дизайне
3. Денотация и коннотация
4. Как использовать знаки?
5. Этичность дизайнера

После изучения всех этих базовых материалов, предлагаю переходить к материалам по интересному вам направлению: от UX до XR.