Exploring the Gestalt Principles of Design

Cameron Chapman
May 11, 2018 · 4 min read

Negative space has long been a staple of good design. Leaving white space around elements of a design is the first thing that usually comes to mind. But then there are designs that use that white space to infer an element that isn’t actually there (the arrow hidden between the E and X in the FedEx logo immediately comes to mind as an example).

The “E” and “x” in the FedEx logo create an arrow within the negative space between them.

The human brain is exceptionally good at filling in the blanks in an image and creating a whole that is greater than the sum of its parts. It’s why we see faces in things like tree leaves or sidewalk cracks.

This principle is one of the most important underlying ideas behind the gestalt principles of visual perception. The most influential early proposal written about the theory was published by Max Wertheimer in his 1923 Gestalt laws of perceptual organization, though Wolfgang Köhler’s 1920 discussion of Physical Gestalten also contains many influential ideas on the subject.

Regardless of who first proposed the ideas (there have been essays dating back as far as 1890), gestalt principles are an important set of ideas for any designer to learn, and their implementation can greatly improve not just the aesthetics of a design, but also its functionality and user-friendliness.

In the simplest terms, gestalt theory is based on the idea that the human brain will attempt to simplify and organize complex images or designs that consist of many elements, by subconsciously arranging the parts into an organized system that creates a whole, rather than just a series of disparate elements. Our brains are built to see structure and patterns in order for us to better understand the environment that we’re living in.

There are six individual principles commonly associated with gestalt theory: similarity, continuation, closure, proximity, figure/ground, and symmetry & order (also called prägnanz). There are also some additional, newer principles sometimes associated with gestalt, such as common fate.

Hire the World’s Best Designers at Toptal

No Risk Trial, Pay Only If Satisfied

Similarity

It’s human nature to group like things together. In gestalt, similar elements are visually grouped, regardless of their proximity to each other. They can be grouped by color, shape, or size. Similarity can be used to tie together elements that might not be right next to each other in a design.

The squares here are all equally spaced and the same size, but we automatically group them by color, even though there’s no rhyme or reason to their placement.

Of course, you can make things dissimilar if you want to make them stand out from the crowd. It’s why buttons for calls to action are often designed in a different color than the rest of a page — so they stand out and draw the visitor’s attention to the desired action.

In UX design, using similarity makes it clear to your visitors which items are alike. For example, in a features list using repetitive design elements (such as an icon accompanied by 3–4 lines of text), the similarity principle would make it easy to scan through them. In contrast, changing the design elements for features you want to highlight makes them stand out and gives them more importance in the visitor’s perception.

Even things as simple as making sure that links throughout a design are formatted in the same way relies on the principle of similarity in the way your visitors will perceive the organization and structure of your site.

Hire the World’s Best Designers at Toptal

No Risk Trial, Pay Only If Satisfied

Continuation

The law of continuity posits that the human eye will follow the smoothest path when viewing lines, regardless of how the lines were actually drawn.

The eye tends to want to follow the straight line from one end of this figure to the other, and the curved line from the top to the bottom, even when the lines change color midway through.

This continuation can be a valuable tool when the goal is to guide a visitor’s eye in a certain direction. They will follow the simplest path on the page, so make sure the most vital parts they should see fall within that path.

Since the eye naturally follows a line, placing items in a series in a line will naturally draw the eye from one item to the next. Horizontal sliders are one such example, as are related product listings on sites like Amazon.


Read more at www.toptal.com >>

. . .

Toptal Publications

The top hub for software engineers, designers, finance experts, project managers, and entrepreneurs, featuring in-depth coverage of platforms and technologies, comprehensive tutorials, and resources to help ambitious freelancers stay on the cutting edge.

Cameron Chapman

Written by

Stop letting your doubts stand in the way of your creativity. FREE email course: http://bit.ly/creative-doubt

Toptal Publications

The top hub for software engineers, designers, finance experts, project managers, and entrepreneurs, featuring in-depth coverage of platforms and technologies, comprehensive tutorials, and resources to help ambitious freelancers stay on the cutting edge.