Web designers, like other artists and craftsmen, impose structure on the environment. We enforce order and beauty on the formless void that is our blank computer screen.

We do it in different ways — creating an organized layout first, writing text and content first, or even basing a design concept on an image, a color palette, or something that visually trips your trigger, whether it’s a sunset or a Song Dynasty painting.

Grasping that totality concept — both the individual element and the whole in which it exists are important both separately and together — is essential to understanding how gestaltism influences our design choices.

We’ll cover 6 principles related to gestalt, in the context of design, and they are:

Proximity

Similarity

Prägnanz (Figure-Ground)

Symmetry

"Common Fate"

Closure

Gestaltism: A Matter of Perception

I think it’s imperative that we should use psychological techniques more in our designs.

I’m not saying design should be completely scientific or mathematical, but I do believe the best design comes when proven theory works in harmony with art.

The idea of the "gestalt" is a fairly old one, originating with early 20th century philosopher Christian von Ehrenfels along with his contemporary, psychiatrist Max Wertheimer, among others.

At its simplest, gestalt theory describes how the mind organizes visual data. The stronger the clarity of form, the more effective the design.

Let’s start with an illustration. This is called the "subjective triangle." What do you see when you look at the figure below?

One of the bright minds of gestaltism, Kurt Koffka, made the famous statement, "The whole is other than the sum of its parts."

His statement is often mistranslated as the much more familiar "The whole is greater than the sum of the parts."

Mr. Koffka didn’t like that translation, and pointed out that in his statement, he means the whole exists independently from the component parts.

The famous "Dog Picture," shown below, illustrates a Dalmatian dog sniffing under a stand of trees. When you squint at it for a moment, you see the dog "come together" from the disparate black and white blobs of the picture.

You don’t say, "Oh, I see the feet, and the legs, and the head, and the trees, and okay, now I see the entire picture."

You look at it for a moment and say, "I see it, a spotted dog sniffing the ground near some trees."

You went from the initial "What the heck?" straight to "Ah a spotted dog under trees" — no stopping to list items and deduce from that list that you must be looking at a dog sniffing the ground near some trees.

This is an illustration of the concept of totality — you grasp the "totality" of something before worrying about the details. As Interactive Telecommunications professor Clay Shirky puts it, "you cannot understand all of the properties of water from studying its constituent atoms in isolation."

So “the whole is greater than the sum of the parts” misstatement is wrong. The whole is not greater than the sum of its parts.

We’ve seen this concept dozens of times with beautifully executed websites that have one glaring flaw — a poor graphical or typographical choice, bad use of spacing, a dysfunctional chunk of JavaScript, a dropped bracket in the CSS file that renders the whole thing less than what it should be, sometimes to the point of non-functionality.

The whole is different than the sum of its parts; not greater, not less than, just different.

We’ve seen this time and again as well, with sites constructed with simple design choices that work harmoniously and beautifully together.

The whole is important.

The parts of the whole are important.

The whole as it is comprised of its parts is important, and separate from the other two.

Proximity

The concept underlying the concept of proximity is grouping. When we have a group of objects, we tend to see them as forming a group.

Proximity in Site Navigation

One basic concept of grouping in web design is with navigational links, where not only do we keep the navigation links together, but also group them internally, putting links to similar pages together, categorizing them into sub-categories, and so on.

The example below is from the site of a Lake Tahoe ski resort. Like most dropdown menus, it’s fairly simple at first glance, consisting of a single row of seven primary navigation link items (four are shown in the screenshot).

When a user hovers over or clicks on one of the primary navigation link items and sees that it reveals a dropdown sub-navigation menu, he’ll expect the same thing to happen with the next item.

They look the same and they’re grouped together — they should act the same way. And if we’ve done our job, they will.

Nothing new here, I know, but it’s something we use frequently, and we didn’t need to know about proximity to pull it off. But now perhaps we know more about why this design pattern works so well.

Proximity in Grouping Images

The 2002 Europe Music Awards site illustrates a different use of grouping. The MTV and Europe Music Awards logos form a separate group in the top left corner, while the logos of the sponsors form a group in the bottom right corner.

The white space helps form the two groups, as do the two blue triangles in the corners. Note that the triangles are not present in the "unoccupied" corners, thus they reinforce the notion of the two groups.

Also note that the two organizational logos are larger and positioned top-left, thereby increasing their importance in relation to the cluster of smaller logos to the bottom-right.

The two clusters of logos not only form groups for design purposes, but for semantic purposes.

Proximity in Web Forms

The next example is of a fairly straightforward Web form from Yahoo!. Notice how the form is grouped into three segments: personal information, ID generation, and alternate ID provision.

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

They are grouped by headings (themselves ordered by number and set apart by color), and the fields themselves are arranged vertically, with the left sides of the field aligned with one another.

All of this reinforces the relationships of the of three groups of information, sorted by importance. Proximity is used to indicate grouping and importance.

Proximity in Icons

Another aspect of proximity is the propensity to perceive items arranged on a line or curve to be related to one another.

Because of the circle that all eight icons sit on, and because of the light gray circles that compose the "background" of the menu, the icons are perceived to be part of a similar group.

It also helps that the icons are thematically similar — with similar colors, sizes, and styles. In Nicholls’s live menu, hovering over an icon brings up a menu description inside the inner circle.

Are you grouping things correctly? Are you using proximity to help imply importance and relationships?

Similarity

We’ve already seen this illustrated above — an example of parts of a whole (totality) working together to achieve a specific goal.

We group things perceptually if they appear similar to one another. This is also why so many designers prefer to use blue, underlined links, or at least have all the links appear distinct and the same as each other.

Similar appearance equates to similar function.

In the screenshot of the Opera browser’s old Preferences dialog window, the menu items are grouped by color.

The McCains’ adopted daughter Bridget, a young woman from Bangladesh, was apparently "shoved into the corner," occupying the bottom left corner of the magazine cover.

Combined with the effect of the top line of the cover text — which, if extended to the left, essentially "cuts" Bridget out of the picture — the photo gave some observers the idea that the McCains (or rather, the McCain campaign) were trying to "segregate" Bridget from the rest of the far more homogeneous family group.

One blogger, Melissa McEwan, noted that at the store she visits, the plastic holders that contain the magazines on the store displays blocked Bridget from view by potential buyers.

Truth be told, I’m no fan of John McCain, but I have no reason to believe that he does anything else except love and support his daughter.

The effect of the arrangement went unrealized, I’m sure, by McCain and the family members (who were on the other side of the camera and unable to see the effect of the arrangement until too late).

But because of the compositional choice of the photographer, art director, and the various editors involved in designing the cover, the image gave viewers the idea that the McCains were trying to hide the only member of their family that looked dissimilar physically, and caused John McCain, Bridget McCain, and the other family members some unasked-for grief.

McEwan wrote of People, "It doesn’t matter whether they intended to diminish Bridget on their cover, or merely failed to consider what message that would send. Either way, it’s a mess."

And a mess that an understanding of similarity could have prevented.

What elements of your designs are you unintentionally over- or under-emphasizing as a result of a misuse of the principle of similarity?

Prägnanz (Figure-Ground)

Our perception of the figure-ground relationship allows us to organize what we see by how each object relates to others.

The "figure-ground" principle has to do with objects portrayed against a background.

There’s a reason why design gurus started telling us sometime in 1998 to stop using busy tiled graphics for our backgrounds — because they took away from the foreground objects.

This is Design 101. Foreground objects should be more prominent than their backgrounds.

There’s more to the figure-ground principle than just using appropriately unobtrusive backgrounds. The contrast and the visual tension between the figure (foreground object) and the ground (background) makes for interesting graphics and logos.

Examples of the "Figure-Ground" Principle

The designers made use of both the foreground and background, creating three irregularly shaped objects (ocean waves, a tree branch, and a lump in a bird’s stomach — okay, I won’t swear to that last one) that combine to form the outline of a person with his or her arms outstretched.

Don’t see it? Think of the triangle illustrated above, and look again. If you still don’t see it, then you must have had the same trouble with those "magic eye" illustrations that I did; those things are all about figure-ground, as are many optical illusions.

Or you can just find the two people in the Hope for African Children Initiative logo below. Hint: a child is looking up at a woman, presumably his mother. (That’s why Namibia seems to have grown some real estate on its western coastline.)

And Macintosh fans know that the Mac logo shows not just a happy face — but a happy face in profile, presumably looking with delight into their computer screen.

On the other end, we can see how the figure-ground principle is horrendously violated in this horse-training site. Usually I don’t hold up examples of sites doing things wrong, but since Vincent Flanders and "Web Pages That Suck" outed this site some time back, and the site proprietors left the problematic design in place anyway, I feel no compunction to show restraint here.

For those of you who sensibly hesitate to click the link, the site designer uses an animated background image of a lightning strike that’s tiled all over the page. Eeek!

It doesn’t take a sophisticated web designer to know that putting an obtrusive, visually aggressive image like that as your background takes away from your foreground objects.

Either those objects get lost in the background — which pretty much defeats the purpose of having anything in the foreground — or the foreground objects have to "shout" to be "heard" over the background "noise" usually by being very large and brightly colored to overcome the attempt of the background to dominate the design.

In two years of teaching web design and construction to middle- and high-school students, this is the biggest single challenge I’ve had; "weaning" them off of using extremely "loud" and obtrusive background designs. Many of them would love that lightning strike, almost as much as they love those "background" images of Waka Flocka Flame. I kid you not. I blame MySpace.

Rutledge points out that rounded buttons with gradient or other non-solid color backgrounds can be important in establishing them as calls to action.

The rounded corners, borders, gradient color scheme, and resulting illusion of 3D "depth" set the button apart from its surroundings, inviting the user to perceive as something apart from the background and makes it easily identifiable as something that can be activated.

Lose the rounded corners, the borders, and especially the gradient color, and the button loses something of what makes it stand out from the background

Some of the most visually stimulating designs I’ve seen recently actually blur the lines between figure and ground elements, even interweaving the two. This is a classic example of understanding the intricacies of a rule; essentially once you have understood the rule completely you have a license to break it.

Are your foreground objects working with your backgrounds to create a lovely, harmonious whole? Are your foregrounds fighting for the users’ attention? Are the backgrounds serving as an aesthetically and functionally workable backdrop to contain and set off your foreground elements?

Symmetry

Basically, the principle of symmetry tells us that when we look at certain objects, we see them as symmetrical shapes that form around their center.

You don’t have to get into advanced design to know that humans like symmetry, and find it aesthetically appealing.

When your designs are asymmetrically, you know you’d better have a good reason for making your design "askew."

Symmetry occurs in nature, in math, in molecules, in everywhere.

Usually, symmetry to the average viewer means an object that is made up of two complementary halves.

What designers sometimes fail to realize is that when a viewer sees two unconnected elements that are symmetrical, they subconsciously integrate them into a coherent whole.

Finland’s CSC (the nation’s Center for Science and Technology) has a very simple logo that illustrates the idea of symmetry in design.

Though the logo sports two separate elements pointing in different directions and having different colors, the logo is easily viewed as a single entity because of symmetry.

Unlike most graphics and designs that deliberately employ symmetry in their design aesthetic (and that’s pretty much all of them — even the most grungy and off-kilter sites are aware of the principle; if only to use it minimally to contrast against all the asymmetry in their work), this one is almost perfectly reflective in its two elements. The only real difference is in the colors used.

Most designers use at least a trace amount of asymmetry to give their designs some character. Some use considerably more, to dramatic and beautiful effect.

Pepsi’s Famous Mid-2000s Logo

No longer in use in the US, the old Pepsi logo is an excellent example of near-perfect symmetry. Aside from the artistically "randomized" ice crystals, the logo is perfectly symmetrical both horizontally and vertically, with a wavy "axis" dividing the upper and lower halves.

Even the 3D airbrush "light and shadow" effect is almost perfectly symmetrical, varying just enough to give the image a realistic appearance of depth. The "ice" and the airbrushing are excellent examples of how "pops" of asymmetry liven up a largely symmetrical design.

Pepsi’s Asymmetrical Redesign

Pepsi redesigned its logo in 2008, using a variant on the old logo (itself a variant on an even earlier one) that some felt diverged too strongly from the symmetry of the earlier offering, with the tilted, variable-width axis and the red area far larger than the blue.

How do you feel about the newer design?

Symmetrical = Successful?

Bizcovering did a feature on ten symmetrical (and successful) corporate logos in 2007. The article poses the question, "All are symmetrical, perhaps this has something to do with their effectiveness?"

What do you think?

Asymmetry in 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.

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.

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.

You recognize the letters as an I, a B, and an M, no problem there.

But they aren’t letters at all; the whole thing is a compilation of bright blue horizontal lines arranged to create the perception of a set of letters.

Does it put you in mind of the old ASCII art that was so popular during the 70s and 80s? It does me.

Here’s a 1975 rendition of a Spanish conquistador, created by using punched cards and reprinted in a 1978 Dominican newspaper:

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.

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

Pulling It Together

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.

33 Comments

Craig

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

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!

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.

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.

Ivy

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.

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. :)

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

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.

@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.

haydyn phillips

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!

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 :)

Jason Gerfen

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.

Sadia Riaz

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.

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.

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í

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!