Using Gestalt Principles in web design

Michael Gabrian

by Michael Gabrian on 05/27/2017

The essence or shape of an entity’s complete form. This is one of the best ways to define the Gestalt Principles. When taken from psychology and applied to web design, you get aesthetically pleasing designs that people are just naturally attracted to. Let's talk about psychology in web design.

"The only important thing about design is how it relates to people."

- Victor Papanek

Everyday we pick up hundreds, maybe thousands of signals at a time. How do we sort through the noise? How do we focus? Well, first we group related objects based on what fits together. And what then?

We simplify.

In practice, the designs would be created with the fact that the brain sees the entire picture as a whole before it focuses in on the smaller details. In this case, these smaller details are the fonts, colors, shadows.

The goal for you at this end of this post will be to have a better understanding of how we perceive the elements of design layouts. How does our brain see and interpret a "good" design. Let's dive into some psych.

Principles of Gestalt perception

The law of pithiness

We typically find comfort when things are simplified, symmetrical. This is why we don't see a lot of cluttered designs anymore. Minimalism is a growing trend where sites are stripped to the necessities, which actually helps the designs success overall.

Take any "terms of service" page for example. you don't know what surprises are in store for you.

To combat this? You clean and simplify your pages. Easier said than done, I know. But people will react more comfortably with your site. 

Similarity

The law of similarity is pretty straightforward. Objects and elements are grouped together if they share colors, shapes, shading, etc. So when you see a complex logo made up of numerous shapes, we'll perceive it as one object most likely due to it's branding colors.

When applying this to web design, we can assume that with proper branding, the primary, secondary, and accent color will group all elements together.

Continuation

Our eyes tend to follow lines, curves, or any stretched element. You could utilize text and images to manipulate the direction in which the visitor will look. This could be great for landing pages. Having the flow direct the viewers eyes either right to the call to action or right to a form on the page.

Closure

This is an interesting one. Our brains can take an incomplete drawing and complete it! Closing the lines if you will. Here's an example. 

Can you make this image out? It's a bit harder than some of the more common examples, but we typically make out a Dalmatian sniffing the ground nearby a tree. 

Closure provides a great way to practice minimalism in web design. Doing so requires skill and creativity, but it could ultimately help with the elegance of your design.

Proximity

How can we utilize space to appeal to our visitors? The law of proximity shows us that individual elements can be connected through proper spacing.

How do we apply this? Text boxes on a landing page would be a solid example. Organize the text into one group, properly spacing it from the CTA on your page.

Symmetry

As humans, symmetry is beautiful to us. So some could say a design that shows symmetrical elements would be seen as comforting or harmonious to the visitors. Check out the example below for a better picture of what I mean.

Common fate

Objects that move in the same direction are perceived as being more related than objects that move in opposite directions or those that are not moving at all. So having a side menu that moves from the left side of the screen inward would show common fate, because the elements move together. 

Think of it like a school of fish. We don't pick out the individual fish that make up the group, we see it as one entity that move in one common direction. But if we saw another school of fish swimming in the opposite direction, we'd depict it as 2 elements; two separate groups.

Past Experience

The viewers past experiences will affect how they perceive something. Take a red octagon for example. What do you think of? A stop sign?

This could dig deeper into social and cultural aspects of our lives, as well as personal accounts. Colors, shapes, key words, and all elements on your site could play into this idea.

How to apply the Gestalt Principle to design

Think of it like a giant painting. When you look at it, you make out the picture first and work your way closer to those small details. The same apply to your design. You might have all of these beautiful, elegant pieces, but if the collective whole is a bad design, was it all worth it?

The key: try creating the outer shell of your layout first in low fidelity mock-ups. So create your shapes and content spaces first, then the rest will take that mold. Work your way down to the specifics.

Want to talk about some ideas? Click here.