Gestalt: Design principles every developer should know

Have you ever felt that you've seen a design that just makes sense to you, but you couldn't quite put your finger on why?

At some point, we are all faced with the challenge of creating a design that works intuitively and looks great. When building a new interface, there's a temptation to lean heavily on obvious design elements like color or shape, or to use cards and borders to hold bits of UI. It makes sense: these are easily visible to person using your app.

What you may not realize is why these elements are so effective.

The people who use our designs are silently and subconsciously navigating questions like: What's the most important thing on this page?, What's the relationship between these elements?, and What's the best way to navigate this interface?

Enter Gestalt principles, a set of psychological concepts that go beyond aesthetics to form the foundation of how we see and interpret user interfaces. This is the bit of our mind that guides us to parse the whole picture by understanding the relationships between its parts.

The gist of understanding Gestalt principles for design is this: our brains are used to grouping things together based on a few basic patterns. These patterns are the foundation of how we perceive the world around us. By understanding these patterns, we can create designs that are easy to understand and navigate. Additionally, by breaking these patterns, we can intentionally draw attention to specific elements in our designs.

• Past Experience: Our brains use our past experiences to interpret new information.
• Proximity: Elements that are close together are perceived as a group.
• Similarity: Elements that look similar are perceived as a group.
• Figure and Ground: Our brains separate elements into the background and the foreground.
• Symmetry and Order: Our brains perceive objects as symmetrical shapes that form around their center.

There are a few more principles, and they are all worth understanding. But for now, let's focus on how these principles can be applied to create better designs.

In your mind, picture a web form used to collect someone's mailing address. You probably see a series of fields, each labeled with a specific piece of information: street address, city, state, and zip code. Where do each of these fields go? If you're like most people, you probably see the street address at the top, followed by the city, state, and zip code.

This is a perfect example of how past experience influences our perception of new information. We've seen this pattern so many times that we instantly recognize it and know how to interact with it.

On the left, the form is laid out in a way that feels familiar. On the right, complete unhinged madness. It's not technically in violation of the geneva convention, but it's close.

Proximity and similarity are two of the most powerful tools in a designer's toolbox. They allow us to group elements together in a way that makes sense to the user. This is why one of the fundamental building blocks of most CSS design systems includes a grid system. It's a way to ensure that the space in your design is consistent and harmonious, guiding the user's eye and creating a sense of order and structure.

What does this mean? It means that the space around and between elements is just as important as the elements themselves. It's the difference between a cluttered, confusing design and a clean, intuitive one. Consistency is critical here: spacing between related elements should be consistent, and the space between unrelated elements should be distinct.

Take a look at this example:

How many groups of rubber ducks do you see on each side?

If you're like most people, you probably see two groups in side A, and one group in side B.

With no other guide, your mind has grouped the ducks together for you. You can do the same thing when building interfaces: by using proximity and similarity, you can guide the user's eye and create a sense of hierarchy.

The Gestalt principle of figure and ground is all about contrast. It's the idea that our brains separate elements into the background and the foreground. This is a powerful tool for creating designs that are easy to understand and navigate. By using contrast, you can make elements stand out from their surroundings and draw attention to specific parts of your design.

No doubt you can see the difference between side A and B this time. If this were a list of products in an ecommerce app, which one do you think would call the most attention to itself?

A slightly different display treatment turned one lucky ducky into a golden goose.

Next, let's look at color. It's a powerful tool in any designer's arsenal, but it's also a double-edged sword. Relying too much on color can lead to designs that fail for a variety of reasons.

For instance, colorblind users may struggle to distinguish between different elements. As a reminder, something like 10% of all men have color deficient vision - more than you might think!

Conversely, too much use of color can make it difficult for people to understand what colors are meant to convey.

When I was working as a UX designer at Microsoft, it was common practice to design interfaces in black and white first. This was a way to ensure that the design was strong enough to stand on its own, without relying on color to convey meaning. Once the design was solid, we'd add color to enhance the experience, not define it. A truly successful design maintains its integrity even in black and white. This is a testament to the strength of its structure, spacing, and the overall harmony of elements - principles rooted deeply in Gestalt theory.

When color isn't the primary means of conveying information, it can be used to draw attention to specific elements. This is where the Gestalt principle of similarity comes into play. By using color to make certain elements stand out, you can guide the user's eye and create a sense of hierarchy.

As a last example, let's look at these two groups of rubber duckies again:

If I told you that on Side A, every different color of duck has a specific meaning - would that be helpful? If you're like most people, you'd probably say no. There's just too many colors to keep track of.

Now take a look at Side B. What if I told you that different colors have a meaning here, and that there's a problem with one of the ducks...?

Exactly.

Gestalt principles are a powerful tool for designers. They help us understand how people perceive and interpret the world around them, and they provide a framework for creating designs that are intuitive and easy to use. By understanding these principles, we can create designs that are not only visually appealing but also functional and effective.

I'm sure you've heard the old trope about how "breaking the rules" is the key to great design. In truth, it's hard to break the rules in a useful way if you don't understand them in the first place. Gestalt principles provide a solid foundation for understanding how people perceive and interpret the world around them, and they can help you create designs that are both visually appealing and easy to use.

• I keep a handy list of books devs interested in design called The Designer's Reading List. It's worth a look if any of this has made your brain tingle.

• The Wikipedia entry for Gestalt Psychology is a fantastic jump-off point for more gestalt basics.

• File this one under miscellaneous tools for prototyping: I used Vercel's AI tool v0.dev to generate the address forms in this article. It can be a really helpful way to get started building an interface, but it's not a replacement for thoughtful design.

This is a call to action for all of my developer friends: follow some designers! Design not just about making things pretty - it is primarily about making things work. Here's a few to get you started:

• Dan Mall quite literally wrote the book on Design that scaless. He's currently working on Design System University, a course and community to help you build better design systems.

• Carly Ayres is a designer who writes, currently working on the Conent and Editorial team at Figma. The perspective she brings to her work is fascinating and evocative (seriously, check out her website), and her writing is nothing short of incredible.

• Matt Smith, aka @whale on Threads, runs a design agency called Bunsen Studio. I appreciate his perspective on bringing design to the forefront of the development process, and his ability to distill some seriously complex concepts into digestible interfaces.

It's an election year, and it is going to be a damn important one. I'm not going to tell you who to vote for here, but I am going to tell you to vote. If you're in the US, you can find out how to register and vote at Vote.org. We're in the midst of primary season, and it's a great time to get involved in the process.

If you're not in the US, I encourage you to get involved in your local politics. It's important, and it's a great way to make a difference in your community.