Gestalt Principles: How Are Your Designs Perceived?

When your first impression of a design is positive, when you instinctively see the design as being good, it’s likely because one or more Gestalt principles of perception are at play. When you look at a design and admire one or two of it’s parts, it’s likely because those parts are adhering to one or more Gestalt principles.

One of the best things you can do as a designer is to learn these principles and understand what they tell us about how people perceive visual objects and the arrangements of visual objects.

Understanding gestalt principles will give you greater control over your designs, create more harmonious designs, and increase the likelihood that your message is communicated to your audience.

What is Gestalt?

When human beings look at a painting or a web page or any complex combination of elements, we see the whole before we see the individual parts that make up that whole. This idea of seeing the whole before the parts and even more the whole becoming more than the sum of its parts is Gestalt.

The German word gestalt can be translated as “shape” or “form” and the term refers to how visual input is perceived by human beings. Gestalt psychology was founded by Max Wertheimer and has been added to over the years by other authors.

Wertheimer’s original observation was that we perceive motion when there is nothing more than a rapid sequence of individual sensory events such as a series of lights flashing in sequence. Imagine a string of Christmas lights. Each light turns on and off in sequence along the string. We see the movement of light from one end of the string to the other, when in reality nothing has moved.

We see something that’s not really there and Wertheimer’s explanation is that we see the effect of the whole event that is not necessarily contained in the sum of the parts.

The easiest way to understand Gestalt is to look at the various principles.

Gestalt Principles

There are a variety of gestalt principles, most of which can be explained in a sentence or two. Many of the principles below can be written about a great length, and I’d encourage you to look deeper at them.

I’ve tried to present links to other resources throughout so you begin your exploration and I’ve also listed some resources at the end of this post. Consider the following an introduction to each of the principles listed.

Figure/Ground

Elements are perceived as either figure (element of focus) or ground (background on which the figure sits).

figure-and-ground.gif

A classic example of figure/ground is the image to the left. Are you seeing a black vase on a white background or two white faces in profile sitting on a black background?

One of the first things people will do when looking at your design is determine what in your composition is figure and what is ground. This determination will occur quickly and subconsciously in most cases.

Figure/Ground lets us know what we should be focusing on and what we can safely ignore in a composition.

Area

The smaller of 2 overlapping objects is seen as figure. The larger is seen as ground.

gestalt-area.png

In the figure above you likely see the smaller square as figure in both cases. Its possible in the image on the right you see a dark figure with a hole to a lighter background, which is based on darker objects appearing more often as figure with lighter areas seen as ground.

Similarity

Things that are similar are perceived to be more related than things that are dissimilar.

gestalt-similarity-1.png

In the image above you no doubt group the objects into either square or circle due to similarity of shape or form.

Through repetition of color, size, orientation, texture, font, shape, etc. we can design elements so they appear more related. Think of links in your content. Assuming they are all blue and underlined they clearly send a message to the viewer that they are related.

gestalt-similarity-2.png

Color has been used above to denote similarity in the image above. You should see alternating columns of black and red squares. Each column is determined by the similarity of color of the circles that make up the column

Isomorphism

Similarity that can be behavioral or perceptual and can be response based on viewer’s previous experience. Think non visual similarity.

Uniform Connectedness (Law of Unity)

Elements that have a visual connectedness are perceived as being more related than elements with no connection.

gestalt-uniform-connectedness-1.png

gestalt-uniform-connectedness-2.png

When you look at the image on the left you see two squares and two rectangles. When you look at the image on the right you see two objects, each consisting of a square and a circle. Circle and square are connected by the line between them. Uniform connectedness trumps similarity here.

Continuation (continuity)

Elements arranged on a line or curve are perceived to be more related than elements not on the line or curve.

gestalt-continuation.png

In the above image you should see a curved line with a vertical line running through it. Continuation is stronger than similarity of color here. The red circles in the curved line are more related to the black circles along that same curve than they are to the red circles in the vertical line.

Closure

When looking at a complex arrangement of individual elements, we tend to look for a single, recognizable pattern.

gestalt-closure.png

Your first impression when looking at the above image is to likely see a square, even though the image is 4 straight lines. We fill in the missing information to make for a single recognizable pattern.

Proximity

Things that are close to one another are perceived to be more related than things that are spaced farther apart.

gestalt-proximity.png

You should see three groups of black and red circles above. The proximity, the relative nearness of the circles is stronger than the similarity of the colors. In a larger composition the color similarity would still communicate information about the objects, because of the similarity between them.

Common Fate (Synchrony)

Elements moving in the same direction are perceived as being more related than elements that are stationary or that move in different directions. Elements that change at the same time group together.

gestalt-common-fate.gif

In the animation above you see two sets of three circles each instead of a single set of six circles, due to their common movement or common fate.

Imagine the animation above didn’t show the circles moving, but showed 3 of them changing back and forth between blue and red. You would still see two groups of circles, but it would be based on the change in color as opposed to their change in movement. In either case they share a common fate.

Symmetry

The idea that when we perceive objects we tend to perceive them as symmetrical shapes that form around their center.

gestalt-symmetry.png

You likely see three sets of opening and closing brackets in the above image. Here symmetrical balance is stronger than proximity.

Parallelism

Elements that are parallel to each other appear more related than elements not parallel to each other.

gestalt-parallelism.png

The three parallel lines above should appear more related to each other than to any of the other lines.

Common Region

Elements tend to be grouped together if they are located within the same closed region.

gestalt-common-region.png

Earlier we saw how the alternating colors gave the perception of their being 5 columns of circles. Now by enclosing some of the circles with a border we see two distinct groups of circles.

Adding borders (common region) around an element or group of elements is an easy way to create separation from surrounding elements.

Past Experience

Elements tend to be grouped together if in the past experience of the observer they were often grouped together.

Past experience could be individual or it could be something common most of us experience.

Law of Focal Point

A point of interest, emphasis, or difference will capture and hold the viewer’s attention/

kandinsky-composition-8.jpg

When seeing Kandinsky’s painting above you more than likely first notice the dark circular form in the upper left. This is the focal point and thus the entry point into the painting. The focal point captures your attention and from there your attention flows to other parts of the painting.

Law of Prägnanz (Good Figure, Law of Simplicity)

People will perceive and interpret ambiguous or complex images as the simplest form possible.

gestalt-Pragnanz-1.png

The shape above is ambiguous and complex taken as a whole. You most likely see it made up of three simple shapes, square, circle, and triangle. These shapes can be seen clearly when each is given a different color below.

gestalt-Pragnanz-2.png

Further Resources on Gestalt Principles

Each of the articles linked to below has additional information on several gestalt principles. Much of what’s covered will overlap with the other articles as well as with what’s here. Many of the articles below will show different examples and discuss the principles in a different way.

Additional Thoughts on Gestalt Principles

gestalt-proximity.png

Sometimes two gestalt principles will be at play, though one will dominate our perception. I’ve tried to point this out in a few of the images above where one gestalt principle dominates, such is in the image for proximity above. Both similarity and proximity are present, yet proximity in this case is the stronger principle and so you see three groups of circles instead of six columns of circles.

Gestalt principles are a set of tools at your disposal for controlling how your designs are perceived.

The perception someone gets from looking at your design is ultimately what you’re communicating to them. Learn to control Gestalt principles and you learn to communicate through your design.

Gestalt principles help us design better and help us understand when an element is needed or not. They help you see where elements should be placed on the page, how they should be grouped together, which elements should share a color or size and which shouldn’t. Gestalt principles help you determine which elements should be enclosed inside a border and which elements simply need more whitespace between them.

As you begin to understand how others will perceive your elements, you will have more control over your designs and you will become a better designer. Take some time to further explore Gestalt principles of perception. Look over designs you like and discover how gestalt is working within them.

Study your own work to see how you’re already including gestalt principles in your designs and where you aren’t, but should be.

The 7 Components of Design

Download a free sample from my book, Design Fundamentals.

23 comments

  1. Amazing coïncidence. I’m just back from school where i gave a lesson on the fundamental principles of visual design, showing to web design students how to relate and use the Gestalt principles to the work on the web, and the first thing i see in my twitter feed is a link to this excellent article. I purposedly omitted some laws i didn’t fully understand (pragnantz) and your explanations are very enlighting.
    Bravo!

    • Good timing on my part then :)

      It took me awhile to find explanations for all the principles listed. A number of them I knew and others are easy enough to understand from the name alone.

      The more I researched Gestalt principles the more I began to wonder how many truly exists. Something tells me there’s more than I was able to find.

      How did your lesson go?

  2. The german phrase is Gestaltungs Psychologie or Gestaltungs Gesetze (Design Laws /maybe in english). Meant by “Gestaltung” or “Gestalt” is Visual Art itself or simply Design, i would say.

    Regards

    • Thanks Phil. Most everything I found suggested the translation of Gestalt was either shape or form, but your definition makes sense. German is hardly my area of expertise so I’m simply going on what others are saying when it comes to the translation.

  3. your ´re almost finishing the 7 components of design :D Congrats, the gestalt article its to well written with very good examples. Once more congrats and keep going with the good work!

    • Thanks for the compliments.

      I just published the dominance post so not there’s only one left. :)

      Color is a big subject though, and I may end up turning it into more than one post. I’ll see how the post develops as I work on it this week.

  4. This was a clever and well done explanation of important fundamental design principles. Your examples gave a good illustration of design precepts that are often ignored.

    Good article!

  5. It’s in fact “Gestaltpsyhchologie”: http://en.wikipedia.org/wiki/Gestaltpsychologie, not “Gestaltungspsychologie”.
    “Gestalt” referrs to a form or shape as the object of perception, whereas “Gestaltung” is the process or result of design. Both words are derived from a common root, which implies, that design is depicted as the process of turning abstract ideas or concepts into concrete visual objects like shapes, forms and the like.

    • Thanks Juergen. Like I said to Phil above, German is not a language I speak so I relied on others for the translation. Appreciate the extra info.

      Am I understanding right then that “gestalt” itself is translated as form or shape, but once we begin talking about these principles in regards to design gestaltung is the better word to describe what’s going on?

  6. Hi Steve,
    Thank you for this really great post. I was brushing up on Gestalt principles today because I’ll be lecturing on it in my Graphic Design I class this afternoon. Your explanations are very clear and I like the examples, too. It all helped me clarify and update my lesson.

    Later in the semester, we’ll be covering color theory and I see you’ve got a post about that too, which I’ll be sure to check out.

    I’ll tell my students about your blog.

    thanks again, Anne

    • Thanks Anne. How did the lecture go?

      Some of these principles weren’t all that clear to me either until I dug into researching them. Many are pretty obvious, but a few weren’t. I tried to make them as clear as I could and I guess I did ok.

      Did you catch the two color theory posts? Hopefully they were helpful.

  7. Great stuff here. I am doing something similar, although I haven’t actually touched my design principles section for a few months.

    My interest is in architecture and in how things like shape and mass and color affect our perceptions of a building.

    I have some examples of various gestalt laws and gestalt principles illustrated with pictures of houses.

    I enjoyed your various articles and it may eventually inspire me to finish my project.

    • Thanks Joffre. I like your examples. Naturally I look at this topic from the perspective of a web designer. It’s nice to see how they apply to a different discipline. Very illustrative and enlightening.

      Now finish that project. :)

  8. I love the organization and layout of this article. As an animator now studying graphic design, it gives me a better handle on the visual principles to speak to a wider audience.

    The Gestalt laws and principles have given me a wider perception of variety. Thank you for posting this article.

    • Thanks Jermaine. Gestalt principles are fun and informative. I think quite a few of them are obvious once you’ve seen them defined. The more I’ve thought about then, the more I can see how they sit at the foundation of so many of fundamental principles of design.

  9. Hey, thank you for clearing up that awful “Gestalt Psychology”. It hurt my eyes flipping through it. Your writing is great. Ive quoted you a lot in my sketchbook. And I thank you for it.

    // Sanna

  10. Steven:

    An excellent summary of Gestalt principles.The article is “very well put together!” Just a couple of suggestions, observations and answers to question about this post.

    First, there is nothing like looking at the original research, commonly called the “dot article” which become obvious the moment you start reading it. Max Wertheimer, Laws of Organization in Perceptual Forms (1922) can be found, along with other classics in the field, at:

    psychclassics.yorku.ca/Wertheimer/Forms/forms.htm

    Also, the late Rudolph Arnheim form Harvard is by far the most prolift and detailed proponent of Gestalt Theory and it’s relationship to art and design. His books are:

    Arnheim, Rudolf, Art and Visual Perception: A Psychology of the Creative Eye, University of California Press; 1st edition, 1954. Revised Edition, 1974

    Arnheim, Rudolf, Toward a Psychology of Art: Collected Essays, University of California Press, 1972

    Arnheim, Rudolf, The Dynamics of Architectural Form, University of California Press, 1978

    Arnheim, Rudolf, The Power of the Center : A Study of Composition in the Visual Arts : The New Version, University of California Press, 1988

    As to the question on Architecture and Gestalt, (I taught Design theory, Analysis and Composition to architecture students for 20 years), it is difficult to find good summaries of Gestalt theory (or even principles of architectural composition as most info is either trite or outdated); especially info that relates to the third dimension. Arnheim’s “The Dynamics of Architectural Form” is still by far the best and most comprehensive.

    You briefly mentioned that one rule can dominate another. I am try right now to find more research that documents a comprehensive understanding of how all the rule are hierarchically related as to dominance over one another (although from experience I know that these are ‘relative’ and subject to degrees of expression), but are having no luck. I would be interested if you have since found more of this topic.

    Also, in photography education, it is generally taught as an absolute visual “Rule” that your eye will immediately and first drawn to the brightest area of the photo. However, your Figure/Ground “area” example and the Kandinsky painting clearly show otherwise. But it is also true that the brightest area also can become a focal point; both being dependant on the ‘context.’

    It has been my observation (when I taught some artist/graphic designers a Basic Design/Studio classes in a couple of universities) is that visual education of why we react visually to, and how think about design and composition is often very low level, with text books even being wrong or misleading! If fact, I was quite appalled when I critiqued work of graphic design and art students of their inability to explain the “why” and “how” of any of their work, and their consequent anti-intellectual fallback position of the majority of “art/design/photography students is that art & design are “purely subjective” and hence any critique (mainly that which they don’t like) is ‘just your opinion’ and their ‘opinion’ is therefore the intellectual equivalent/alternative of yours, or worse that is “always superior” to your as they are the artist.”

    Finally, one thing that Arnheim mentions, that very few artist and designers and even architects understand, is of a Japanese researcher that found that the Gestalt “law” that we perceive the simplest mental configuration is true of our initial observation/perception, but that as we continue to contemplate a ‘work’ that the mind being a seek out novelty/variety/difference (etc.) continues to perceive more and more alternative gestalt relationships (“laws”) that become more and more removed (or creative and complicated) from the initial perception and that we entertain these in a cycling between all perceived possibilities. I believe that this ‘unknown to most’ Gestalt research could partly explain “Good” art in that it will sustain very long times of contemplation (and hence appreciation) in which the work is perceived as increasing complex, stimulating and interesting.

    Thanks again for great posts.

    • Thanks John.

      I appreciate the link to the “dot article” and also the books by Arnheim. I read “Art and Visual Perception” and thought it a great book. I haven’t read other of Arnheim’s books, but a few are on my wish list, including “Dynamics of Architectural Form.”

      I looked, but wasn’t able to find any information about there being a hierarchy of these principles. I have seen that when two of these principles are in play, one gets seen first and tends to dominate. I haven’t found anything though that lists a hierarchy of all the principles.

      You really should be able to explain your design choices. I’m surprised design students couldn’t (or wouldn’t) tell you why they did something a certain way. I actually believe design is more subjective than we might think, but I that doesn’t mean you shouldn’t have reasons for making decisions or that you shouldn’t be able to talk about your choices and defend them.

      Thanks again for the compliments and all the great information.

  11. I be remiss not to clarify that I found art and design students (compared to architecture students) often displayed an “inability to explain the “why” and “how” of any of their work.” Actually, most could articulate much about their designs. However, it was mostly expressed as personal likes and dislikes, aesthetic ‘reactions’ that appeared in their work, or symbolic intent etc.

    Lets take the placement of a Focal Point for an example. Comments would tend to be similar to “I really like the way my focal point introduces tension into the project,” “My focal point is a critique of the expected dominance of that object compared to the remaining subject matter. Or, the focal point draws you into the composition.” But then they had no concept as to the relationship to other ‘parts’ or how it would change if it moved, changed size, shape etc. There was generally no concept of the ‘mechanics’ of composition and the play of ‘visual forces’ ‘visual weight’ figure-ground ‘visual vectors’ ‘visual balance’ etc. which Gestalt theory provides a lot of understanding to compositional dynamics.

    When you understand why a visual effect operates, and how alteration to visual elements will change the ‘effect’ it opens up much more options for creativity and expands and diversifies possible directions to explore during the creation of a work, rather than using intuition and trying things that are recurring dead ends (“oh that doesn’t work”). I did discover however that the “really good” student had picked up many of the ‘rules’ of Gestalt, though a diligent work ethic (constant experimentation) and looking at other art, although they were unaware of the underlying principles that they were implementing into their own work ‘process.’ When Gestalt principles were pointed out to them, it was “that’s exactly what I was doing, but without understanding how or why it “worked”!” They generally became excited that what they were doing produced desired (artist) and desirable (viewer) results, but that gestalt concepts would help them even more.

    • I suppose it could have been coincidence or there could have been something more to it. It’s an interesting observation about both groups of students.

      I wonder why the art students you encountered weren’t able to express why they made choices beyond some aesthetic likes and dislikes. it’s possible they were just young. I would think saying something about the focal point introducing tension is an attempt to explain based on what the student understands about design. I’m not surprised that a college student would answer that way.

      Why architectural students seemed further ahead could be for a variety of reasons from the quality of the architecture department to the students being more mature or somehow having more experience with the subject matter.

      That’s a good reaction when the student learned about Gestalt and realize it was what he was doing without understanding why or having a name for it.

Leave a Reply

Your email address will not be published.

css.php