Gestalt Principles and the Psychology of Design

Alex Bigman
Tweet

The word “gestalt” gets thrown around a lot in design. Taken from the German word for “form” or “shape,” it often refers to the overall look of something that is greater than the sum of its parts. In psychology, gestalt refers to the basic principles that allow us to visually perceive order.

These principles are fundamental building blocks for creating visual meaning – and often seen in logo design. To better explain how to utilize gestalt principles in your work, we’ve put together a designer-oriented crash course. Enjoy!

Figure-ground

walkman

Logo: Sony Walkman (via Wikipedia)

When we look at the Sony Walkman logo (above), we don’t simply see a single plain containing orange and white pixels – even though that’s actually what it is. Rather, most of us perceive an illusory depth as well: we see a figure (a “W” and dot) and a ground that appears to be behind it.

That’s thanks to the figure-ground gestalt principle, which says that when a smaller shape is surrounded by a larger uniform area, we perceive the smaller object to be in front and have the border. With effort you can reverse the effect. Try imagining that the orange area is a sheet of paper with “W”- and dot-shaped holes cut out of it. You can do it, but it doesn’t feel natural.

Notice how the figure-ground distinction breaks down when the surrounding field is no longer uniform. The version below looks more like a mosaic, laid out in a single flat plane, rather than a figure in front of a background.

walkman

The perception of illusory depth disappears when the background is non-uniform

Proximity

IBM logo

Logo: IBM (via Wikipedia)

When we look at the IBM logo, most of us see three letters composed of short horizontal lines stacked on top of each other. We don’t see 8 long horizontal lines that have gaps in them. Why is this? Partly, it’s because we recognize the letters “I,” “B” and “M”, but not entirely. The below version is in Hebrew, and we bet you’ll be able to see distinct letters even if you don’t know the Hebrew alphabet:

IBM: broken down

Logo: Hebrew version for IBM (via Logodesignlove)

The reason in fact has to do with the very simple gestalt principle of proximity. If there is a series of objects (such as lines), we tend to perceive objects that are close together as a group. The short segments of the “I” are all closer together than the short and long segments of the top horizontal bar, which has greater gaps between the “B” and “M” and the crevice in the “M.” As a result, we perceive the “I” as a unit and not the top horizontal bar.

Similarity

Just as we tend to group together objects that are close to one another, we also tend to group together objects that are similar—whether in color, shade, orientation or shape.

MOCA

Logo: Museum of Contemporary Art

The logo for Los Angeles’ Museum of Contemporary Art (MOCA) is an interesting example of this. The “C” is a proper letter, but in place of the “M,” “O” and “A” there are three corresponding shapes: a square, circle and triangle.

Chances are that when you look at this logo, your inclination is to group the three colored shapes together – even though they aren’t all next to each other – and to view the black “C” as an outlier. It’d be a strain to perceive the square and the circle as a pair and the “C” and the triangle as another pair, even though this would be a more logical sequence. That’s the similarity gestalt principle at work.

Continuance

Dictionary.com

Logo: Dictionary.com

The continuance principle holds that if line or curve segments are in alignment, we tend to perceive them as part of a continuous whole. That’s why, when describing the Dictionary.com logo, nearly everyone would say it’s a partial circle with five branches sticking out. We see the circular form as one continuous part, because if you broke it up into segments, all of them would align. The branches are separate because they do not align with it; they hit it at right angles.

But the mark could be described in other ways. Someone who’s suffered a brain injury and doesn’t conform to the normal continuance principles might say something like “it’s a checkmark whose right line curves downward, connected to a partial “C” shape with 4 lines sticking out of it—like the below:

Dictionary.com: color changed

Without the continuance principle, you’d be more likely to perceive different segmentation in the Dictionary.com logo

Closure

The human mind doesn’t like loose ends. When we see a figure that appears to be partially enclosed, our tendency is to “complete” it, even if that means supplying imaginary visual information. This is known as the closure principle.

Many logos are famous for their utilization of the closure principle, which allows them to present a figure using minimal visual information. The World Wildlife Fund is one example. In their logo, we sense the curve at the top of the panda’s head, even though there’s no actual line there:

WWF

Logo: World Wildlife Fund

Perhaps the most famous example is the “hidden” arrow in the FedEx logo. It requires zero lines of its own, instead slyly borrowing the borders of the “E” and the “x”:

FedEx Logo

Logo: FedEx

Have you noticed gestalt principles at work in any other logo designs? Share in the comments!

This article was originally published at 99designs Designer Blog. Reproduced with permission.

Free JavaScript: Novice to Ninja Sample

Get a free 32-page chapter of JavaScript: Novice to Ninja

  • http://www.josuevelazquez.com/ Miguel Josue Velazquez

    interesting!

  • James Edwards

    Strange indeed. I’d never noticed any depth in that Walkman logo until you pointed it out, it always looked flat to me, but I can see the depth now. I’d never noticed the arrow in the FedEx logo either, and even now you’ve pointed it out I really have to strain to see it.

    How reliable are these principles? By which I mean — are they affected by cultural context, or any kind of observer bias, that means people might see them in different ways, other than as a result of brain injury?

  • James Edwards

    Sure, gestalt principles are universal inferences on how our brain works. But each specific example of those principles must be subjective, because no two brains behaves in exactly the same way. So surely, for any given example, there will always be people who can’t see it.

    Makes me wonder if there’s a way of deliberately exploiting that subjectivity in order to create particular effects, such as a personality test that’s based on perceptions of gestalt effects.

    Bears further research, but thanks for the article, it’s something I’d never thought about before.

  • Elio Qoshi

    Great article! I heard that elephants are one of the few species who cannot work out the continuance principle. If they see a circle with a part cutted out, they cannot imagine it as a circle.
    A bit random, but made me think of how complex our perception is. Thanks for the insights!