Menu

Гештальд Принципы, Применяемые в Дизайне

Gestalt Principles Applied in Design

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

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

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

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

Мы рассмотрим 6 принципов связанных с гештальт, в контексте дизайна:

Гештальт: Вопрос Восприятия

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

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

Идея "гештальт" - достаточно старая, основана в начале 20-го века, философом Christian von Ehrenfels вместе с его современником, психиатром Max Wertheimer.

В кратце, гештальт-теория описывает, как ум организует визуальные данные.

Let’s start with an illustration. Это называется "субъективный треугольник". Что вы видите, когда вы смотрите на рисунок ниже?

Source: Dr. Russ Dewey.Source: Dr. Russ Dewey.

Если Вы сказали "гамбургер", - сходите перекусите и возвращайтесь

Если бы вы сказали "три Pac-Man'а напали на треугольник", Вы ближе к цели.

Где треугольник?

The triangle is implied.

Но посмотрите на картинку и скажите мне, есть ли там треугольник. Да, есть.

Один из светлых умов гештальта, Курт Koffka, сделал знаменитое заявление : "Целое отлично от суммы его частей".

Его утверждение часто неправильно переводили, как более знакомое "целое больше, чем сумма его частей".

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

Знаменитая "Dog Picture", - показанная ниже, иллюстрирует как долматинец нюхает под деревом. Когда Вы быстро посмотрите на изображение целиком то увидите всю картину состоящую из разрозненных чёрных клякс.

Source: José Pedro Gomes.

Вы не говорите: "О! я вижу ноги, голову, теперь деревья, а теперь да, вижу целую картину!"

Вы секунду смотрите на изображение, целиком, и говорите "Я вижу картину где собака нюхает под деревом"

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

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

Так что ошибочное утверждение “целое больше, чем сумма его частей” неправильно. Целое не больше чем сумма его частей.

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

Целое - важно.

Части целого - важны

Целое что состоит из частей его составляющих - важно и отдельно от двух других

Proximity

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

Proximity in Site Navigation

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

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

Site source: Alpine MeadowsSite source: Alpine Meadows.

Навести курсор на главный элемент меню и появляются ссылки в под меню.

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

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

Близость в Группе изображений.

В 2002 сайт Europe Music Awards показывает, как использовать различные группировки. Логотипы MTV и Europe Music Awards - это отдельная группа в верхнем левом углу, в то время как логотипы спонсоров, сформированы в группы в правом нижнем углу.

Source: Mads SoegaarSource: Mads Soegaar.

Белое пространство помогает сформировать две группы, как и два синих треугольника по углам. Обратите внимание, что треугольники не располагаются в "незанятых" углах " и, таким образом, они усиливают формирование двух групп.

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

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

Proximity in Web Forms

Следующий пример довольно простой Web-формы на сайте Yahoo!. Обратите внимание, что форма подразделяется на три сегмента: личная информация, выбор логина и пароля, и информация для восстановления пароля.

The form implies that first set of fields is the most important and the third is the the least important.

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

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

Близость в Иконках

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

Веб-дизайнер Stu Nicholls, создал отличное (хотя и нетрадиционное) круговое меню в 2008 году.

[[ Source: Stu Nicholls. ]]Source: Stu Nicholls.

Так как все восемь иконок сидят на круге, и так как светло-серые круги, которые составляют "фон" меню помогают иконкам восприниматься как часть группы.

Так же помогает то что иконки тематически схожие, одинакового размера, цветов и стиля. В живом меню Stu Nicholls'а, при наведении указателя мыши на значке внутри внутреннего круга появляется описание.

Вы правильно группируете элементы?

Подобие

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

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

Одно представление для похожих функций.

В скриншоте старое окно настроек браузера Opera, меню сгруппированы по цвету.

Source: Mads SoegaardSource: Mads Soegaard.

Серый фон первых четырех пунктов меню группирует их вместе, а также отличает их от других пунктов.

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

Ненамеренное Неподобие

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

Во время президентской кампании США 2008 года, Журнал People разместил фото семьи Маккейна на обложке с кандидатом в президенты Джоном Маккейном в центре.

Source: Melissa McEwan Source: Melissa McEwan.

Удочеренная семьей Маккейна Бриджит, молодая женщина из Бангладеш, была "сунута в нижний левый угол".

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

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

По правде говоря, я не фанат Джона Маккейна, но у меня нет оснований верить, что , кроме любви и поддержки дочери он делает что-нибудь еще.

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

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

Мак-Ивен копирайтер журнала People, "не важно, собираются ли они уменьшить Бриджит на их обложке, или просто не в состоянии увидеть сообщение которое будет отправлено" Either way, it’s a mess."

Понимание принципа сходства могло бы это предотвратить.

Каким элементам вашего дизайна вы ненамеренно предали слишком большое или наоборот слишком маленькое значение в результате не правильного использования принципа подобия?

Закон Prägnanz (Фигура-Фон)

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

Andy Rutledge

Принцип "Фигура-фон" имеет дело с объектами, которые изображаются на фоне.

Есть причина, почему дизайн-гуру начал говорить нам когда-то в 1998 году, что нужно прекратить использовать нагруженные фоновые рисунки - потому что они уводят нас от главных объектов.

This is Design 101. Объекты переднего плана должны быть более заметным, чем их фон.

В принципе фигура-фон есть кое-что ещё, кроме того что необходимо использовать ненавязчивый фон. Контрастность и визуальное напряжение между фигурой (объект переднего плана) и фоном используют для интересной графики и логотипов.

Примеры принципа "Фигура-Фон".

Возьмите например такое старое лого:

Source: Mads Soegaard.Source: Mads Soegaard.

Дизайнеры использовали как передний план так и фон, создав три объекта сложной формы (волны океана, ветви деревьев, и кусок в желудке птицы), которые сочетаются в виде очертания человека с вытянутыми руками.

Не видите его? Вспомните треугольник описанный выше и посмотрите снова

Или Вы можете просто найти двух людей, в логотипе "Hope for African Children Initiative" ниже: Hint: a child is looking up at a woman, presumably his mother. (Вот почему в Намибии, похоже, возросли цены на недвижимость на ее западном побережье.)

Пользователи Linux быстро узнают старый логотип Gnome.

Да, это "G", а так же и отпечаток стопы.

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

С другой стороны, мы видим, как принцип Фигура-Фон страшно нарушен в этом сайте. Обычно я не привожу, примеры сайтов, которые делают все неправильно, но, поскольку Vincent Flanders и "Web Pages That Suck" выбрал этот сайт некоторое время назад, и собственник оставил проблемный дизайн на месте, в любом случае, я не чувствую угрызений совести привести в пример этот сайт здесь.

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

Поставленный навязчивый, визуально агрессивный фон, уводит внимание от объектов переднего плана.

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

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

Ратледж указывает, что округлые кнопки с градиентом или другим не-сплошным цветным фоном могут быть важны для установления их как "calls to action".

Вот кнопка Jacob Gube’s, гладкая и чистая call-to-action button в качестве примера.

http://www.lightningbar.com/

Закругленные углы, границы, градиент, и в результате иллюзия 3D "глубины" которая отделяет кнопку, от ее окружения, приглашает пользователя воспринять как что-то отдельное от фона и делает ее легко идентифицируемую как нечто, что может быть активировано.

Уберите закругленные углы, границу и особенно градиент, и кнопка потеряет что то, что отделяет ее от фона.

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

in.house.media

А Ваши объекты переднего плана взаимодействуют с вашим фоном для создания приятного, гармоничного целого? Ваш фон сделан эстетическим, функциональным и рабочим для того чтобы вместить на себя элементы переднего плана?

Symmetry

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

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

Когда Ваш дизайн ассиметричен, то его запросто можно назвать "кривым".

Симметрия встречается в природе, в математике, в молекулах, везде.

Как правило, симметрия для среднестатистического зрителя означает, что объект состоит из двух взаимодополняющих половин.

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

Финляндская CSC (национальный Центр по Науке и Технологиям) имеет очень простой логотип, который иллюстрирует идею симметрии в дизайне.

Хотя логотип представляет собой два отдельных элемента в разных направлениях и имеющих разные цвета, логотип - легко рассматривать как единое целое из-за симметрии.

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

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

Знаменитый логотип Pepsi середины 2000-х.

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

Даже эффект 3D аэрографа "свет и тень" почти идеально симметричный, кое-где немного разный, чтобы дать изображение реалистичный вид из глубины. The "ice" and the airbrushing are excellent examples of how "pops" of asymmetry liven up a largely symmetrical design.

Асимметричный редизайн Pepsi

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

Как вы относитесь к новому дизайну?

Симметричные = Успешные?

Bizcovering сделал обзор десяти симметричных (и успешных) корпоративных логотипов в 2007 году. The article poses the question, "All are symmetrical, perhaps this has something to do with their effectiveness?"

Как вы думаете?

Асимметрия в Ransom Note Design

A more extreme example of asymmetry is the classic "ransom note," which traditionally is made up from letters cut out of magazines, pasted onto a sheet of paper, and delivered to the victim during a thunderstorm with ominous music playing in the background. The whole thing stands for disorganization and a likelihood that the perpetrator isn’t concerned about delivering Aunt Gertrude home safe and sound.

Image generated by the Ransom Note Generator.

Notice anything symmetrical about the lettering? Most of them line up quite nicely, which is unusual for mad kidnappers with no sense of balance and form. I think the folks at Ransom Note Generator let their inner designer impose some unwarranted symmetry in their work.

Part of the reason why the ransom note is considered "scary" is because of its random, chaotic nature; asymmetry means action and the wildly asymmetrical nature of the letters implies action escalating into violence.

How’s the balance between symmetry and asymmetry on your sites?

"Common Fate"

I think I watch too many crime shows on television, because the first time I came across this concept, an image popped into my mind of some hardboiled New York cop slamming his fist down on a table and yelling, "If you don’t roll on your brother, you’re gonna suffer the same fate he does! Is that what you want, both of you doing twenty up in Attica? Sharing a common fate?!?"

If the idea unnerves you, then you probably watch the same shows I do, and you shouldn’t worry, you won’t go to jail by employing the principle of "common fate."

The idea of "common fate" is simple: We perceive items or objects moving (or appearing to move) in the same direction as related to each other, more so than elements that are stationary or appear to be moving in different directions. Those related items are sharing a "common fate."

The cars in the photo below form two "streams," the left "stream" moving from top to bottom of the image (essentially "toward" the viewer) and the right "stream" moving from bottom to top, "away" from the viewer.

Source:  stock.xchng

Although this is an entirely static image, movement is implied, and relationships immediately form.

In our designs, elements that "move" with one another relate to one another, while elements that resist that common movement or move in a different direction, do not relate.

This is a powerful, primal sensory cue among humans. Just think of the drivers’ reactions when a car comes down the lane in the opposite direction from everyone else. Consternation and chaos ensue within moments.

Common Fate in Dropdown Menus

Drop-down and sliding menus such as the one from RedBrick Health shown below — especially the ones that "slide" as opposed to just appearing in the blink of an eye — appeal to the "common fate" principle.

This main menu item has a slide-out sub-menu, so do the others. therefore the two items are related in our minds.

Common Fate in Tooltips

Tooltips also form an important informational relationship. If your tooltips always contain secondary but pertinent information, it won’t take long for a site user to put together — subconsciously — the relationship between moving/hovering the cursor and bringing up new information. As Rutledge notes, "[p]ointer-plus-information all moving together is a useful association."

Counter-Example of Common Fate

This doesn’t just apply to moving elements, but also the orientation of designs. In my earlier days, I designed a site with two background color gradients inadvertently "fighting" with one another. The header gradient went from light to dark, left to right; the navigation bar immediately underneath went from light to dark, top to bottom. Individually, they worked well enough, but together, they clashed.

The horizontal "movement" of the header gradient didn’t go well with the vertical "movement" of the bottom gradient.

The "movement" of the two gradients flow against one another. The effect violates feng shui and "common fate" both.

Are there design elements in your work that fight instead of flow together?

Closure

Closure means that we "close" objects that are themselves not complete; not only completing the figure in our perception, but perceiving the figure as having an extra element of aesthetic design; we look for a simple, recognizable pattern.

Take a look at the old IBM logo.

Вы распознаете буквы, I, B и M без проблем.

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

Не наводит ли это вас на мысль о старом ASCII art'е, который был так популярен в 70-х и 80-х? It does me.

Вот воплощение испанского конкистадора из 1975, созданное с помощью перфокарт и перепечатанное в 1978 году в Доминиканское газете:

Source: Wikipedia.

Один из моих любимых примеров приема закрытия изображение находится на обложке книги Павла Тагарда, которая называется Согласованность мысли и действия.

It’s a nifty three-dimensional cube hiding in among the "spotlights" of lighter red. They are, in reality, 24 dissimilar red shapes on a darker red background. Our perception fills in the blanks.

Another example hit the newspapers in the late 1990s, when the "Face on Mars" stirred the public imagination. Some people were put in mind of the monolith of 2001: A Space Odyssey, wondering if aliens hadn’t left us some cyclopean artifact for our use if we could just find a way to get to it, while others thought about War of the Worlds and stockpiled their bunkers with ammunition and MREs.

Source: Wikipedia.

A closer look proved the "Face" was just a landform. Guess we didn’t need all those MREs after all.

Собираем все вместе

This article is just a quick look at the principles of gestalt as they apply to design. There is far, far more to the topic than can be addressed here. Do remember, though, that we introduced the concept of "totality" in the beginning of the article. Mindful of that concept, think back over the 6 principles we delineated.

None of them stood apart from the other; each one employed other principles as well as standing on its own.

For example, Nicholls’s circular menu depended as much on the laws of similarity and symmetry as that of proximity. Make the icons dramatically different from one another, for example, and the menu loses much of its functionality and aesthetic appeal.

Same with the "triangle that isn’t there" — it depends as much on the principle of closure as it does on figure-ground.

The RedBrick Health menu featured in this article not only employs the principle of "common fate" in its drop-down, but also the principle of similarity in its color choices.

None of these principles stands alone, and all of them function "in totality" with one another.

The concepts work with one another to achieve a totality of function, elegance, and aesthetic appeal.

Some of the best designers in the world know nothing of gestalt principles. They use them intuitively; when designs look and feel right, usually they incorporate gestalt principles whether the designers knows the terminology or not.

Gestalt principles aren’t artificial constructs that people have concocted to apply to design; they are attempts to describe and verbalize how we naturally perceive things.

It’s arguable that in at least some sense, "design talent" is an ability to naturally — and perhaps even unconsciously — understand how human perception works, and how to create designs for websites, paintings, or wedding dresses that are artistically beautiful and functionally efficient by appealing to it.

It doesn’t matter if you use these principles by instinct or by deliberation; what matters is how they can help you make better designs.

Sources and Further Reading

Related Content

About the Author

Michael Tuck is an educator, writer, and freelance web designer. He serves as an advisor to the Web Design forum on SitePoint. When he isn’t teaching or designing sites, he is doing research for the History Commons. You can contact him through his website, Black Max Web Design.

This was published on Aug 17, 2010

33 Comments

Craig Aug 17 2010

Great article. Although I must point out that the mid-2000’s Pepsi logo has neither horizontal nor vertical symmetry, as you state. If it did, it would look the same if it were reflected along the vertical or horizontal axis.

It does, however, have rotational symmetry about it’s centre, which gives the perceived balance.

Jesse Kaufman Aug 17 2010

Michael,

Just wanted to leave a note saying how much I enjoyed this article! It’s been quite a while since I’ve read an article on 6rev in it’s entirety (I usually skim and read the bits that are interesting to me and skip the rest). The crime show illustration worked great to solidify the “common fate” concept. Great work and I look forward to reading more articles by you!

GraphicsFuel Aug 17 2010

Well written article. After reading this article, I must that proximity in design (of course in all walks of life) is very important, because it’s about common-ness and proximity that speaks of a design in whole. Enjoyed reading this article, length doesn’t matter when it’s very useful.

Young Aug 17 2010

Like Jesse, I also read the entire article, the first time I’ve done so on SR in a while. I definitely see the need for those beginner HTML/CSS principles articles and tutorials too, but if SR didn’t feature these occasional purely intriguing concept articles, I wouldn’t come back.

This post is OK but the part about symmetry- really? The Pepsi logo is not symmetrical along the horizontal or vertical axis. The “wavy” line is actually the element that makes it asymmetrical. If the line were straight, it would be horizontally and vertically symmetrical in terms of shape, but it is not. I think it’s important to note because balance and symmetry are not the same. Arguably, balance is more important in effective designs.

Michael Tuck Aug 17 2010

Folks, thanks for the terrific feedback. I learned a lot about applying gestalt principles to designing as I did the research (for example, though I’m a fan of Andy Rutledge’s writings on design, I hadn’t read his excellent articles on gestalt principles as reflected in design).

Craig, you are entirely correct. That one slipped by me. I need to write “rotational symmetry” on my hand to make sure I don’t repeat the mistake. :)

Ruben Berenguel Aug 18 2010

Fantastic read, distilling a lot of information together. Oddly, I missed Dondis’ “A primer on visual literacy” in the references.

Ruben

Drew Clarke Aug 18 2010

Thanks Michael
Really interesting. Gestalt theory is one of those things that every designer knows about, but probably doesn’t know that they know. It is in fact an unknown known (apols to D. Rumsfeld Esq).

silvia Aug 18 2010

In visitnorway. I think it’s not a bird, it’s a whale

Hiren Aug 18 2010

Great article, the proximity in design is very important because the ‘commonness’ of the design in general invites the audience to perceive it in a certain manner enabling them to organise and see how each object relates to the others.

Jacob Gube Aug 18 2010

@Young: I think when I read Michael’s article, I immediately sent him an email saying “I can’t wait to publish this,” so I’m glad people share the same sentiments I had.

I enjoyed reading it, and it was intriguing, entertaining, and as @Drew Clarke said, I knew a lot of these concepts, but I really didn’t know why I knew them. Turns out it’s because it’s human psychology: We like things that are harmonious, and we subconsciously make sense of things that don’t make sense.

As for your comment about the HTML/CSS and tutorials versus concept articles; honestly, I thought I’ve been doing a good job balancing pragmatic articles with concept articles (like this, the article about Reductionism, and the piece called The Art of Distinction in Web Design). But now that you mention it, the site does lean more towards pragmatic articles like HTML best practices or designing something on an iPad; the reason is that that’s always been my personal mantra: pragmatic knowledge (learning by doing) over theory knowledge. So the site favors articles that, by the end, can give you a product. But reading this, and reading other concept/theory articles recently, I would like to change that dynamic between the balance of pragmatics over conceptual articles.

And, Michael, well done. Probably one of my favorite articles here on Six Revisions to date.

Shane Aug 18 2010

Thanks for the great read Michael!! There is a lot to take in, I think I’m going to have to go back for a second read!!

Thanks again!!

Craig M Wright Aug 18 2010

Very nice article. Keep it up Jacob.

haydyn phillips Aug 18 2010

figure ground also nicely fits into the user experience principle of affordance, as it allows the user to mentally “afford” the object on screen as something that is “tangible” If it were flat and the pragnanz principle wasn’t applied everything would merge together and the user would get confused as to what is click-able and what is not. This is also where contrast comes into play. A word of warning, modern “minimalist” sites that don’t apply these basic design principles are heading towards loosing or confusing users. The whole job of a web designer is to take the guess work out of the mental process for the user. Make it simple guys!

DSM Design Aug 18 2010

Loved it! Please keep the great work coming! – Even if it only took the idea of that lightening bolt repeated background to make me want to rip my own eyes out! Really good article, can’t praise it enough :)

Michael Tuck Aug 19 2010

Haydyn, excellent comment. Thanks for adding to the info imported by the original article. Jacob, you’re too kind. :)

Mario Aug 19 2010

Really nice article, that’s what i’m looking for when i’m out of inspiration.Thanks!

Ray Melissa Aug 19 2010

Great article. As we look for a new logo it is cool to play around with ideas and others thoughts. I really like the use of white space.

Sam Kong Aug 20 2010

Michael,
Thanks!. I really enjoyed reading and learning from this article. Examples you used helped me understand the concepts better.

I look forward to reading more from you.

Thanks Gube for publishing!

Lisa Thomason Aug 22 2010

Wow, great article, great information, thanks for share. LT

George Palaszewski Aug 31 2010

Thanks for the article. A most insightful read. Fantastic!

Michael Tuck Sep 04 2010

Again, thanks for the kind words, everyone. George, that’s an excellent resource. Had I found it during my research, I would have incorporated some of it in the article.

Craig Sep 11 2010

Wow! Extensive article, well researched, Great read!

Gerry Sep 13 2010

Thanks so much.
You have given me a whole tutorial in one easy read. Thanks for making not making it complicated – those in the know regularly like to hang on to their precious knowledge.
Cheers!

Jesper Nielsen Oct 08 2010

Thanks a lot for the read. The gestalt principles are often the subject of whole books. This article boils it down to the most important issues AND uses lots of well chosen examples.

Jason Gerfen Oct 15 2010

I have taught before. Small classes of corporate professionals sent to me by their employer for training. After having read this I feel I did them a great injustice for not being as hands on with the material.

Recently I have begun writing an article. My first that I would like published, and feel I should now revise having read this.

Thanks for a great article.

Cesar Noel Oct 17 2010

Nice Article

Sadia Riaz Nov 07 2010

Thank you for this wonderful article.

I am a PhD Student at Universiti Teknologi PETRONAS Malaysia and I am working on visual aesthetics. If you may allow then can I please show the interfaces of the websites you have referred in this article, for conducting an experiment on aesthetic preferences of users. I will be more than happy to acknowledge your work in my thesis and experiment. Please reply at the earliest.

Kind regards,
Sadia Riaz

fiona Dec 14 2010

thank you for the simple tutorial

Samuel Brown Jan 13 2011

Great article, been studying and researching HCI / Gestalt in particular for a while. All made sense; applying the principles suddenly seems simple when you point out the obvious things we take for granted like words being on a line and tabbed content being a good example of closure.

thanks.

Richard Mar 29 2011

Awesome article. Interesting how, like you said at the end of the post, some of us might know nothing of these terms, but we instinctively can see things in shapes and forms. Now I know some terminology to go along with it.

Guillem Ramos-Poquí Sep 26 2011

Great page. Good try! However, in my experiece teaching, art students can only “get the message” if you illustrate each gestalt principle not just with a few doodles (which are off-putting to artists) but by PAINTINGS by artists throuou the centureis, including the 20th century too!!!!!! Can you re-do your page and include some paintings (including details) to illustrate all gestalt principles, please, and let me know when you have done it!

This comment section is closed. Please contact us if you have important new information about this post.

Partners