Every design seeks to either create a sense of unity among disparate elements, or creatively break that unity to encourage a particular action. The principles covered here will help you do both.
Every visual design seeks to either create a sense of unity among disparate elements, or creatively break that unity to encourage a particular action.
Thankfully, there are a few simple but powerful guidelines for creating — and disrupting — unified designs. Who do we have to thank for that? The Gestalt psychologists.
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, that we can all keep in mind to create better designs.
Here are the 4 core principles:
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.
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.
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), and the other arrows that reification suggests, it’s pretty hard to unsee it.
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 your 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 website’s 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.
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?
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.
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.
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.
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.
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.)
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.
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.
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.
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 … unpleasentness.
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.
Zestful helps companies book fun, unique, and local group activities available through their platform. You might expect a site like theirs to scream FUN! Well they don’t disappoint. Their upbeat vibe supports their mission to help teams socialize outside the office without the usual headache that comes with event planning.
Petal is a younger company, but they stand out because design pervades the focus and direction of their marketing. Even their product (a new, no-fees credit card) features a stunning and unique design. Their website follows suit — it’s a breath of fresh air — with beautiful colors, generous whitespace, and clear, concise copy.
BankMobile’s website makes banking look hip and modern, as hard as that might sound. With bold colors, clearly presented information and a consistent feel throughout the site, we especially appreciate the unique horizontal scrolling section they use to walk through the UI on their mobile app.
Freelancers are constantly on the lookout for new tools and products to make managing their business easier — Bonsai focuses on checking as many of those boxes as possible with tools that range from invoicing and payments to proposals and contracts. With so many features in their platform, their marketing site needs to effectively explain and differentiate how their products can help freelancers. A dedicated page for each one does just that.
Bonsai gets bonus points for creating an impressive resource hub for freelancers. They share survey data about rates, best tools for freelancers, and the top places to find new work.
As an education partner, AltSchool has an important story and mission that underpins their work. Their website does a great job sharing their story with photography, copy, and a consistently communicated mission: to enable all children to reach their potential.
Ready to build a business site of your own but not sure where to start? We’ve got you covered. Check out our full business site rebuild course on Webflow University.
Did we miss any standouts? Let us know in the comments!