Thankfully, there are a few simple but powerful guidelines for creating — and disrupting — unified designs. And we have the Gestalt psychologists to thank for that.
If you’re not familiar, it’ll help to understand that gestalt means:
A structure, configuration, or pattern of physical, biological, or psychological phenomena so integrated as to constitute a functional unit with properties not derivable by summation of its parts
(Sounds kinda like a website, right?)
Basically, the Gestalt psychologists were searching for a way to explain how human beings arrive at meaningful (and/or delusive) perceptions in a chaotic world. And through that effort, they identified 4 core concepts that describe how human beings interpret visual data.
These 4 fundamental principles expand into 13 specific rules of thumb about visual experiences, which we can all keep in mind to create better designs.
The 4 core principles of Gestalt theory
1. Emergence
The principle of emergence states that we attempt to make sense of the whole before we start identifying its parts.
When we see an object, we first try to take in its outline, then we compare the outline against other things we’ve seen before. If we find a match, we assume we know what it is, and we might then start to analyze its components. If we don’t find a match, we might then start to analyze the parts in pursuit of a whole.
What’s emergence mean for design?
Hate to break it to you, but the principle of emergence suggests that we should stick to familiar, easily recognizable patterns.
So as much as you might want to go crazy with your next form design, it’s probably best to stick with the styles people have seen before. Clearly outlined and labeled boxes with a “send” button at the end will be recognized as a form more quickly than a more “creative” design.
But hold up. That doesn’t mean you should stop reading — or designing creatively.
Here’s where it gets complicated. Emergence indicates a hierarchy of visual interpretation: We begin with the whole, then zoom into the parts. That means that you can get creative with individual form elements, as long as the whole thing is immediately recognizable as a form.
Emergence offers a compelling argument for minimalism: a simpler form is easier to recognize than a complex one. So keep it simple, friends.
2. Reification
The principle of reification states that our minds fill in gaps in visual information in order to identify objects. That means that you don’t have to see the entirety of something to understand what it is, though the simpler or more widely recognized the whole object is, the easier it’ll be to recognize it by a part.
Which means you should have no trouble recognizing the meaning of this symbol:
So what does reification mean for design?
Reification means that you don’t have to include all of an object for it to be identifiable. You can use this principle to save space in a layout, to suggest the content of the next slide in a carousel, make your “coming soon” page both clearer and more enticing, and more.
3. Multistability
This one gets a little late-night-in-your-dorm-room, but here we go: Multistability explains why you can see just the faces, or just the vases in that famous optical illusion, but never both at the same time.
The human mind doesn’t dig uncertainty, you see, so it fixates on one way of seeing something to the exclusion of possible alternatives.
Fascinating, right? Kinda makes you think about politics. But let’s move on.
What’s multistability mean for design?
Multistability can be a tough one to apply effectively in design because it tends to contribute to confusion more than understanding (which is, of course, our usual design goal).
But, as dozens of powerful logos have proven over the years, you can use multistability to make really memorable and pleasantly surprising designs, like the FedEx logo. Once you see that arrow (between the E and the X), it’s pretty hard to un-see it.
4. Invariance
The principle of invariance states that we’re really good at recognizing similarities and differences. That means that it’s really easy to make something stand out of a crowd of similar objects.
Remember the lady in the red dress in The Matrix? How about the little girl in the red jacket in Schindler’s List? Those two stand out so much — and remain so memorable — because their bright color practically screams out of the homogenous black-and-white backgrounds we see them moving against. It marks them as meaningful and worthy of our attention.
What does invariance mean for design?
In the realm of design, invariance can produce powerful results when one different element is introduced in an otherwise homogenous group of elements.
One area where you’ll often see this applied is on products’ pricing pages, where one column is made to stand out from the rest of the pricing table through color or size.
Echo’s pricing page uses invariance to make the “custom” option stand out and draw the eye with a strikingly different color. While the other columns all use a different shade of blue, they’re similar enough to fade away in the face of the custom column’s bright hue.
You’ll also see this in some websites' main navigational systems, where designers have made one link stand out from the crowd with a brighter color or a variant design.
This lets the user know what action the site wants you to take, clarifying the user experience. In MailChimp’s example, the identical design and language in the two primary CTAs also make it clear that either link will take you to the same place.
Feel like an expert on the core principles yet? Awesome. Let’s dive a little deeper.
Applying the Gestalt principles to web design
In general, the Gestalt principles help us understand how we process visual information by either:
- Starting with the whole and then working our way to the parts, or
- By attempting to break a confusing whole into its simpler component parts
In other words, when it comes to our interpretation of visual stimuli, we’re always looking for the simplest possible way to understand a thing. The Gestalt psychologists called this the:
Law of Prägnanz (aka “good figure” or “law of simplicity”)
People interpret ambiguous or complex images as the simplest form(s) possible.
So instead of seeing the design of the Olympic logo as a bunch clipped circles and leaf shapes, we just see an arrangement of interlocking rings.
Note that, as per the principle of multistability, you can try to see the more complex arrangement, but it takes more effort — your eyes just want to return to the simpler pattern.
What’s that mean for your designs? It means that you can play with creating complex arrangements of simple shapes, so long as they come together to form an easily understood whole. That’s basically what Georges Seurat was doing with his pointillist paintings:
Which leads us neatly to the principle of closure.
Closure
When we see a complex arrangement, we look for a single, recognizable pattern.
We’re always trying to bring meaning and order to meaningless chaos (and we’re not talking about your last relationship), and our eyes do that via reification: the filling in of missing data to make sense of something we see.
You can see this in action in this (sadly rejected) design for OneFund by Mike Erickson, aka, Logomotive. (Not to mention the vast majority of minimal logo designs you see.)
Here, we aren’t given all the visual information we need to form the letter F, but we extrapolate the missing information provided by the shadows to create the letter. We do that because, otherwise, the image is just a few seemingly random blocks of black with some type below.
Closure is basically what makes all minimal logos work.
Symmetry and order
It should come as no surprise that people tend to look for order in objects, and symmetry is one means of doing that. That’s why symmetry is so satisfying to us: it’s a simple, harmonious rule that conveys a sense of order and rightness in things.
That’s probably why symmetry proves so popular in governmental buildings throughout the world. And why 3-column designs are all the rage. Studies have also shown that our standard for “beauty” in faces depends largely on symmetry.
While symmetrical shapes are satisfying, they can also seem a bit static or stale due to all that harmoniousness. Sometimes they lack a sense of movement or dynamism.
That problem offers designers an opportunity: by adding an element of imbalance to an otherwise symmetrical design, you can draw attention to the point of imbalance. Might just be the perfect place for your call to action, no?
Figure/ground
People see objects as either figure (the focal point) or ground (background).
When several objects are juxtaposed, we naturally create a sense of spatial relationships between them, even in the absence of overt visual cues. That means that even very simple arrangements of objects can be used to create a sense of relationship, and hence, even a hint of narrative.
One of the ways we do that is by comparing the two (or more) objects’ size, automatically judging the smaller object to the be the figure, and the larger to be the ground. You can see that in the images above — whatever its color, we always see the smaller rectangle as the figure, the larger as the background.
We also tend to be pretty creative in interpreting such relationships, using past experiences to instill visual content with a narrative. For example, in the image above, I can’t help but see the little rectangle as a person, looking out toward a view of a darkening sky.
You can take advantage of this in your website designs to draw focus away from larger elements and toward smaller ones. That’s one reason that a copy plus button combo laid on top of a full-bleed image draws attention to the button.
You can also use visual cues like drop shadows to clarify spatial relationships between different elements. It’s why you’ll find so many shadows in Google’s material design guidelines.
Uniform connectedness
We see elements that are visually connected as more related than elements with no connection.
In the image above, the large blue rectangle and the smaller blue circle on the left seem more related than the shapes on the right — even though the repetition of blue also suggests a connection.
Note that the connecting element (the small rectangle above) doesn’t have to actually touch the other objects to create this sense of relationship. That explains why arrows are often used to connect text to an image, as you can see in the image below.
Without the arrows, it’s possible to connect “it looks good here & here” to the corresponding images, but that would require some inference on the viewer’s part to understand that one “here” refers to the tablet, the other to the phone. The arrows make the connections between copy and image clearer, making the whole thing easier to grok.
Common regions
You see elements as part of a group if they’re enclosed within the same region.
You see websites using this visual trick all the time. In fact, it’s become one of the hallmarks of what many people decry as the increasing homogeneity of web design. But that doesn’t lessen the technique’s power in clarifying relationships between various groups of design elements.
In the screenshot above (taken from Google’s Now site), the designer uses giant cards to help us understand that the headline, image, and paragraph are all related. We immediately get that “The right information at just the right time” defines the topic of both the image and the copy below and that “Assistance around the clock” is introducing a new group of elements.
Proximity
We see objects that are close to each other as more related than objects that are far apart.
Visually, distance defines relatedness. Objects that are close together are seen as related, while objects that are far apart … aren’t.
For example, check out Google’s Now site, below. The text “Spotify” is clearly related to all the content in the card below — even though it’s not enclosed within the card — because it’s closer to the card than, say, the text “OpenTable.”
You can also combine proximity and common regions to create more complex effects. Check out how in Mook, a free Webflow template for creative agencies designed by Tim Noah.
Here, Tim uses both proximity and common regions to make it clear that “Our work” and “Discover what we’ve done for others” are related. Same goes for the unit of “Strategy,” body copy, and image below.
Continuation
We see elements that are on a line or curve as more related than elements that aren’t on the line or curve.
As Subaru’s Zero Landfill site illustrates, lines and curves help us understand relationships too. As you can see in the screenshot above, it’s obvious that the dots on that rough ring are closely related to each other — at least, more so than they are to the text in other areas of the page.
Common fate (synchrony)
We see elements that move in the same direction as more related than elements that are stationary or move in different directions.
You can see the principle of common fate play out with beautiful dramatism on The Boat, which uses parallax scroll to both convey the chaotic tossings of a storm and the forward momentum of the story it tells.
With all that motion going on, you’d be forgiven for missing the fact that the text in the center of the screen above is related to the two foreground images it sits between. But as the boat and storm-tossed waves move generally to the right of the screen, the relationship between foreground text and images becomes clearer —because they move up the screen. (Though the designers added drama by having text and image tilt and shift as you scroll.)
Parallelism
We see parallel elements as more related than non-parallel elements.
To see parallelism in action, I can’t think of a better example than Italian Futurist F.T. Marinetti’s classic visual poem “Parole in liberta” (“Free words” or “Words in liberty”).
Amidst this chaotic jumble of text, Marinetti offers occasional breathers of (relative) clarity and relatedness by setting a few lines of type parallel to each other. These parallel lines create tension with the otherwise scattered text, but also create relief by momentarily restoring a normal reading experience to the dynamic composition.
Similarity
We see elements that share characteristics as more related than those that don’t.
You’ve already seen a few examples of similarity in action (see the uniform connectedness section, and in MailChimp’s design in the invariance section). But to zoom in a little more, take a look at this design from Designer News:
Here, the web page icon with the yellow background serves to connect the two Site Design posts, making it clear that they are the same type of post. The fact that the same color appears in the Subscribe button to the right might make you think it’s also related somehow, but the different shape and the text help differentiate it.
Focal points
Points of interest, emphasis, or difference capture and hold our attention.
Focal points serve as the key to so many elements of web design that it almost feels odd to point it out. But that centrality makes it all the more important to intelligently and purposefully apply emphasis and difference — after all, as the saying goes, “if everything’s emphasized, nothing is.”
Of course, there are all kinds of ways to create emphasis in a design, including:
- Dramatic color changes, such as when a CTA button or other link is given a highly contrasting color
- Dramatic size changes, such as a hero headline set at 72pt
- Typographic emphasis, like bolding, italics, all caps, etc.
- Dramatic whitespace, like when you place a focal point in total isolation from other elements
And so much more.
Past experiences
We perceive things in terms of our past experiences.
Okay, here’s a really tricky one. Unlike all the other principles of visual design we’ve discussed here, there’s just no controlling a person’s past experiences.
The best you can do here is aim to appeal to the average past experience. For example, most people associate ice cream with all sorts of warm, fuzzy feelings — not to mention the essential pleasure that comes from its deliciousness. An image of an ice cream cone might evoke nostalgia for the endless summer days of childhood, or a sense of togetherness from those traditional bowls of ice cream served after a family dinner.
Or, a person might suffer from lactose intolerance. Leaving the image of ice cream forever marked with associations of … unpleasantness.
You also have to keep in mind variations in your audience. If you design websites or products for an international audience — or even an audience of diverse ages — you’ll need to keep in mind that the emotional and experiential resonances of some imagery or design elements may differ across segments.