Gestalt Principles in Design: the Psychology 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 Theory 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 Gestalt theory? And exactly how can the ideas behind Gestalt psychology be applied in a graphic design context? Fear not; our guide to Gestalt principles in design will have you up to speed in no time.
What is Gestalt Theory?
Gestalt theory first appeared in the 1920s, emerging from the research of the psychologists Max Wertheimer, Kurt Koffka and Wolfgang Kohler. They argued that, when 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 - this 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 a graphic designer is 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.
What Can Gestalt Theory Do for Me as a Designer?
Gestalt principles are laws of human perception describing the varying ways in which we 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, Gestalt 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 Gestalt principles 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 design 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, there’s a lot about the Gestalt principles that is quite commonsensical.
However, given that Gestalt theory is an account of how humans behave in their daily lives, and that you are quite likely a human, this is hardly surprising; Gestalt theory is a theory about you. That being the case, there’s likely quite a lot you’ll recognize here.
From Unthinking Use to Conscious 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 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 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 successfully communicating your message to the viewer. 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 Gestalt principles and how they might be practically applied in a graphic design context.
6 Essential Gestalt Principles for Designers
Gestalt 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, our brains ignore 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 the Gestalt principle of closure that permits anyone but the very youngest child 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 the mind completes the image to read 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 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 the image.
Gestalt 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 conceptually grouped together by the human mind, and 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 object 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 connected 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.
Gestalt 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 users 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 content?
Sign up to our email list to get the best of the Framer content sent directly to your inbox.
Gestalt Principle 4: Similarity
Again, this is one of the more commonsensical (read obvious) of the Gestalt 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 attribute - 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, all you need to do in order for it to stand out is to make it look totally different to everything else around it.
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 information, and normally this info 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, most pages will feature one particular bit of information that is 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.
Gestalt Principle 5: Continuity
The rule of Continuity posits 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, humans 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.
Gestalt 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 we 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 here.
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 interests 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 the Gestalt principles in design 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 take. So next time you’re working on a project - whether it’s web design, UI design, or simply getting down some quick ideas for a logo - try applying at least one of the Gestalt principles in each design. You may be surprised at just how much it transforms the results!