Gestalt Principles: the Perception of Visual Communication
In this guide we look at six of the most important Gestalt principles for graphic designers, suggesting ways in which they might be practically applied to real-world design projects; from UX and web design to logos and typography.
Gestalt Principles for Designers
Any professional graphic designer worthy of the title will appreciate the important role that psychology plays in influencing visual perception. For this reason, many designers apply the findings of Gestalt psychology in their work. In fact, along with concepts such as the rule of thirds, the golden ratio, color theory, and negative space, Gestalt principles are central to much contemporary design.
But just what is it exactly? And exactly how can the ideas behind Gestalt psychology be applied in a graphic design context? Fear not; our guide will have you up to speed in no time.
What is Gestalt Theory?
These ideas first appeared in the 1920s, emerging from the research of the psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler. They argued that, when people are faced with complex visual stimuli comprising of multiple elements, the human mind tends to simplify their structure; organizing them into a single entity. By doing so we create meaning, rendering our chaotic world easier to comprehend.
According to Gestalt psychology, this single entity—the whole—is often greater than the sum of its parts. Indeed, although the German word gestalt literally means “form,” it is often also interpreted to refer to a “unified whole.” Gestalt theory has a wide variety of uses and applications, ranging from simple problem solving to neurology and social or cognitive psychology.
Gestalt Principles in Graphic Design
By now you may well be wondering what all this has got to do with you as a designer. Good question!
The purpose of graphic design is always to communicate information of some kind. Therefore, the role of people who do graphic design is that of a communicator. And, obviously, the more we understand the ways in which the human mind perceives visual forms of communication, the more effective we can be as visual communicators.
Why is it Important to Understand Each Principle as a Designer?
Gestalt principles are laws of human perception describing the varying ways in which people recognize or ascribe meaning to visual phenomena in the world around us. Theories from Gestalt psychology are relevant to graphic designers because they help to improve our understanding of how humans perceive visual stimuli. As graphic designers are essentially in the business of creating visual stimuli, clearly this is valuable knowledge.
In fact it could be argued that, as a graphic designer, these principles are not merely something useful to know, but rather that knowing them is a fundamental part of a designer’s job description. Arguably, if you don’t know how to apply each of the principles outlined below to your work as a graphic designer, you’re not doing your job properly.
Simply put, a graphic designer who understands how the human mind works is in a much stronger position than one who doesn’t. And when looking for a solution to a given project or creative challenge, Gestalt principles can help to determine which design techniques and approaches are most likely to be effective.
But I Don’t Have a PhD in Psychology!
Before you freak out at the prospect of having to learn a whole bunch of academic theories from the realms of psychology, it’s worth noting that you likely already use Gestalt principles in your work as a graphic designer on a daily basis without realizing it. Indeed, when you read more about each of the principles, you might find you are already using them without realizing and they are actually almost common sense.
However, given that this is all an account of how people behave in their daily lives, and that you are quite likely a human, this is hardly surprising; Gestalt theory is related to all of us. That being the case, there’s likely quite a lot you’ll recognize here.
From Unthinking Use to Conscious Principle Application
But if you already use Gestalt principles in your work as a designer anyway, what’s the point of reading this article? What is there to learn?
Well, there’s a big difference between unthinkingly doing something merely out of habit or instinct, and deliberately applying knowledge about human behavior and the brain to become a more effective visual communicator.
As an example, you might not need to think much in order to simply run; you see a grizzly bear coming towards you, the danger is perceived, the thought “run” enters your mind, and your legs do the rest. But you can bet that anyone who runs professionally and wants to stand a chance of beating the competition will spend a lot of time consciously analyzing both their own running technique and that of others.
In short, by consciously applying Gestalt principles in design, you stand a better chance of organizing elements in a way that successfully communicates your message to people. And effective communication is a big part of what we mean by good design.
With that said, let’s take a look at the main principles and how they might be practically applied in a graphic design context.
6 Essential Gestalt Principles for Designers
Principle 1: Closure (Reification)
The Gestalt principle of closure concerns the way in which, when faced with incomplete information, the human mind automatically fills in what’s missing. I.e. despite being provided with only a small part of the picture, the brain ignores the gaps and connect the dots in what seems to be the most probable manner, in the hope of ending up with a complete image.
It is this principle of closure that permits anyone but the very youngest of children to guess what the results of a “join-the-dots” puzzle will look like long before it’s completed.
Gestalt Principles Design Example: Logo Design
Closure is one of the most valuable Gestalt principles for graphic designers, as it allows us to suggest or imply forms with only a minimum of information. As an example, consider that the famous IBM logo doesn’t actually say IBM at all, but is in fact just a series of broken striped lines. Yet people complete the image in their mind so that it reads IBM all the same.
Indeed, the Gestalt principle of closure is particularly useful in logo design. Here in order to be effective, a lot of information often needs to be communicated with a minimum number of design elements. Think of the panda image in the World Wildlife Fund’s logo. In actual fact the panda has no head—it’s just a blank space left between the shoulders and ears—but our minds fill in the gap, completing that image.
Principle 2: Common Fate
The Gestalt principle of common fate dictates that objects that appear to be moving in the same direction (even if they are not in fact moving at all) will be perceived by the brain as having some kind of relationship, often treated as a single entity.
In nature, a couple of obvious examples are schools of fish and flocks of birds. A school of fish is made up of scores of individual fish. But when many objects are all moving together, we tend to ignore the individual elements and see only the larger image of that they form.
As the saying goes, “birds of a feather flock together.” Yet the principle of common fate works just as well with mixed or highly varying objects too; if an old bi-plane flew over your house, closely followed by a hot air balloon, and then a glider—all apparently traveling towards the same destination—you might assume that they were somehow related to each other (perhaps it’s some kind of bizarre race?). However, you might not make the same assumption if a helicopter flew past in the opposite direction a short while later.
Again, the principle of common fate is a handy trick that can be employed in graphic design whenever you need to group together a diverse range of elements; simply design them in such a way as to suggest a shared fate.
Principle 3: Proximity
The Gestalt law of proximity states that an array of diverse objects positioned close together will be perceived as a single group, despite their heterogeneity. In other words, put a bunch of random stuff sufficiently close to other random stuff, and this eclectic pile of junk will look like it all belongs together.
You knew this already of course, just from experience. But it’s one thing to know something, and entirely another to be able to draw upon it as a design technique whenever needed. This requires conscious awareness rather than pure intuition.
Of course, the proximity principle is also important because the opposite is equally true; if you separate out identical objects, they will be less likely to seem like they constitute a single unified group. This can be a handy technique in graphic design, where it may be necessary to present otherwise very similar elements in such a way as to make it clear that they should in fact be interpreted quite differently.
Gestalt Principles Design Example: UX Design
A user interface designed following Gestalt principles will tend to be much better organized—and therefore easier for people to navigate—than one that ignores these principles. Good use of the proximity principle, in particular, is essential for UX design, where any important relationships between diverse information must be immediately apparent to the user.
For example, when designing an online form or questionnaire, if question #2 is positioned closer to the box intended for the answer to question #1 above, this could risk creating a connection in the mind of viewers between totally unrelated information (question #2 and answer #1), causing them to place their answers in the wrong box. It doesn’t take a wild imagination to see that such an error could potentially have very serious consequences.
Enjoying this post?
Sign up here to get content on prototyping, design, and the latest Framer updates delivered to your inbox.
Principle 4: Similarity
Again, this is one of the more commonsensical (read obvious) of these principles as far as designers are concerned; things that look the same in some way will usually also be treated the same. I.e. items that share one or more physical attributes—whether we’re talking color, shape, size, pattern, or some other quality—will be seen as being related or even constituting a single group or category. Regardless of their distance or proximity to one another.
And just as with proximity, the reverse scenario is every bit as useful as the rule itself. I.e. even if a given design element is close enough in proximity to other elements to potentially look like it forms part of the same group, make it look totally different and all of a sudden it doesn’t look related at all.
Gestalt Principles Design Example: UI Design
Effectively employing gestalt principles in UI design can be as simple as making sure that buttons and other elements that are to be used for similar tasks are designed consistently across the entire platform, even if their position and exact function vary. Or, to put it another way, although there may be considerable inconsistency in terms of size, shape, and even position on the page throughout the interface, users will immediately understand that they can achieve similar results by clicking on visually similar objects (for example, ones that are a particular color).
In contrast to this, it’s common for a single page to contain various elements, and normally this will be presented with some kind of hierarchy, helping to make it easier for the user to navigate. However, among all the competing info that needs to be communicated, one of the elements on most pages will be more important than all others. This will most likely be something like a hotlink or a call-to-action button; basically whatever it is that the page in question exists to achieve (make a sale, sign-up subscribers, etc.). This element will likely be more successful in its goal if it is entirely anomalous, i.e. it differs strikingly from the rest of the design.
Principle 5: Continuity
The rule of Continuity states that when the human eye looks at an object, trying to understand its contours and form, it will always follow the smoothest, most direct path possible. Even if in reality this means jumping to a second object rather than continuing to follow a single uninterrupted entity.
If that sounds confusing, imagine you are looking at an X. The rule of continuity predicts that you will see this X as composed of two intersecting diagonal lines: / and \. Does that sound about right?
In actual fact though, the X could just as easily be formed from a V shape on top and an inverted V below. But that’s more complicated for the brain to take on board, so instead, we simply tend to assume that the X is formed by two straight lines.
In short, when it comes to visual perception, people prefer straight lines over curved or bent ones. As a graphic designer, knowing this can be very helpful whenever you are required to create a design or layout that will draw the viewer’s eye in a certain direction; say from one object to the next.
Principle 6: Figure-Ground Organization
Another very important form of perceptual interpretation—at least as far as designers are concerned—is figure-ground organization. This principle refers to the way in which certain elements of an image are assumed to be “positive” (the figure) while others are seen as “negative” (the background). Usually, people will interpret objects that are small, dark, symmetrical, and enclosed as the figure, while bigger, lighter areas are perceived as the ground.
However, in some cases, a phenomenon called multistability can occur. Here, for example, black and white areas of an image may compete to be read as both figure and ground. This means that rather than one item emerging as a clear background, and the other as foreground, readings may alternate; with figure and ground popping backwards and forwards depending on which color the viewer focuses on at any given moment. This phenomenon has perhaps been most famously exploited by the Dutch graphic artist M.C. Escher in his amazing woodcut prints.
Gestalt Principles Design Example: Web Design
Good use of figure-ground organization helps make information clearer and easier to understand at a glance. This is particularly important in web design where a page will usually need to communicate a lot of information in a short amount of time before users click away. A web page that is designed with poor use of figure-ground organization—for example, one that uses a font that is a similar color to the background—will be hard to read and therefore highly confusing for users.
With that said, though, the deliberate use of multistability can add an extra level of interest to a design by allowing dual readings of the elements in question. The Gestalt principle of figure-ground organization is very closely related to the concept of negative space, which you can read more about in our in-depth guide to negative space in design. And here are some examples of now not to do it from some pro graphic designers.
Although the Gestalt principles can often appear very simple, even commonsensical, there’s a big difference between merely applying the rules unconsciously and having a solid understanding of the ways in which human visual perception works. For this reason, as a graphic designer, it’s in your interest to develop a knowledge of basic psychology and visual theory.
You don’t need to go as far as enrolling in a psychology degree in order to take advantage of Gestalt principles in your design work, though. In fact, as we’ve just seen, it’s fairly straightforward to apply these principles without having to geek-out too dramatically.
And not only is using the Gestalt principles pretty straightforward, but it’s actually essential if your designs are to successfully guide users towards the message you want them to receive or the action you want them to take. So next time you’re working on a project—whether it’s web design, UI design, or simply getting down a few quick ideas for a project—try applying at least one of the Gestalt principles in each design. You may be surprised at just how much it transforms the results!