Gestalt Principles of Design

Woman's face blended with a reddish water wave and tree image representing psychology

Gestalt psychology formulates twelve principles of perceptual organization that can help designers better understand how viewers of their works interpret their depictions. These are: meaningfulness, conciseness, symmetry, figure/ground distinction, closure, good continuation, grouping by proximity, similarity, connectedness, common region, common fate, and synchrony.

Gestalt psychology constitutes one of the oldest theories about how we perceive the world around us. Its central idea is that the human mind tends to integrate individual sensations and experiences to form a unified whole which is different than the sum of its parts. Understanding the gestalt principles of perceptual organization can help designers elevate their works over those of others. I provided a brief introduction to gestalt psychology in an earlier blog post. In this one, I’ll talk about the gestalt principles in detail.

Having studied human perceptual organization, gestalt psychologists formulated four concepts and a number of principles with the aim to capture the essence of how we comprehend our environment. The gestalt concepts are in essence concerned with item perception whereas gestalt principles are used for interpreting scenes. But in relation to both, the brain’s main aim is to match what it sees to meaningful patterns it has stored in memory.

Curved paths where the gestalt principles closure and good continuation are applied
Curved paths that the brain eagerly follows

It attempts to do this by going from simple interpretations to more complex ones. For this purpose, it pursues an unconscious search strategy by following where different cues in the composition lead, supplementing missing information whenever it can, which inevitably surface when encoding spatial information. The first four principles of the twelve that I will introduce in this blog post are part of this tactic. The remaining eight gestalt principles are concerned with nothing but simplifying our visual field by grouping elements in the scene that appear to be related. This fast categorization is a very efficient way of merging perceptual information as we scan our environment based on clues it provides us.

Depending on the field of application, some of the gestalt principles are sometimes omitted or merged together, and sometimes used under different names. And by the way, these should not be thought of as laws, but rather as descriptive notions of how most of us deal with our perceptual experiences. I should note here also that a designer can structure her/his work according to a principle – positive sense – to appeal to specific perceptions, or intentionally go against it – negative sense – to highlight specific elements. Thus, there are three uses of the principles: An understanding of the human mind can help to choose a pleasing composition; the use in the positive sense can help to organize perception; and the use in the negative sense can help to highlight specific elements.

Meaningfulness

The mechanism explained by the concept of emergence is central to gestalt psychology. We experience the world unconsciously and effortlessly without having to analyze the details of our surroundings. In other words, human perception is not the sum of images of constituent parts of objects, but the association of whole object images with familiar, meaningful patterns. We might also suggest that we see with our brain, not our eyes.

Our cognition is biased by our prior experiences, our context, as well as our aims and objectives, which determine the degree to which visual stimuli match existing mental patterns in long-term memory. A perceived pattern is thus meaningful for us if in its totality it correlates with some assembly of familiar patterns taken together. This is the reason why we don’t see two circles, a rectangle, a triangle, and four lines in the below image, but two stick-figures, a man and a woman, waving at each other.

Geometric shapes interpreted as a man and a woman waving at each other due to the gestalt meaningfulness principle
Stick-figures Interpretation due to the Gestalt Meaningfulness Principle

So, the first gestalt principle of perceptual organization is the principle of meaningfulness and states that we group visual elements together to form meaningful or personally relevant scenes. We do this by associating these elements with familiar patterns. This ability to consolidate the flood of sensory information into a coherent and consistent impression of the world is vital to our existence. From the design perspective, this principle emphasizes the relative importance of the overall display over details, the power of inherent patterns, and the supremacy of subjectively interpretable content.

Conciseness

The second gestalt principle of perceptual organization is the principle of conciseness and states that we try to reduce reality to the simplest form possible. In German, this is called the “Prägnanz Prinzip,” and therefore, many people use this term also in English.

When something is concise, it is as simple as possible, but not simpler. Conciseness of a design means that it is well-formed, precise, and contains what it should, not more and not less. Concise displays are easier to visually process, easier to remember, and perceived as more orderly. Simplifying perception is essential for seeing order and regularity in a world of constant distractions and visual competition.

Two interlaced squares
The Gestalt Conciseness Principle is the reason why we see two squares in this image

Conciseness also means that we can extrapolate from one situation to another. It not only benefits the allocation of limited processing and attentional resources; it helps the majority of us to see things in similar ways. A simple, well-defined, to-the-point depiction will always be more efficient in communicating things than a detailed one with hard to recognize features.

Symmetry

The third gestalt principle of perceptual organization is the principle of symmetry and states that we have the tendency to perceive visual elements as grouped when they are part of a symmetrical arrangement. These appear easier for the human brain to understand, due to the feeling of simplicity, regularity, and structure that symmetry conveys, while asymmetrical arrangements are perceived to be unusual and sophisticated.

We distinguish between reflectional, rotational, and translational symmetry. Even though we can often not create symmetrical designs in a strict, mathematically correct sense, we can still convey the sensation of symmetry by the layout we choose and the general look of the display. The appearance of symmetry emerges where there is a balance between parts of a scene. It is in a way a property of visual equivalence among elements.

Mandala as an example of simplifying by symmetry
Mandala as an example of simplifying by symmetry

We use symmetry in design to convey balance, harmony, and stability, and we should not use elements in a symmetrical arrangement if they don’t share a meaningful relationship. All elements that break the symmetry in an otherwise symmetrical arrangement draw our attention and so this can be used to highlight those elements. Opposite views about an issue are immediately recognized as such when they are arranged symmetrically on the left and the right of a display.

Figure/Ground Distinction

The fourth gestalt principle of perceptual organization is the principle of figure/ground distinction and states that we perceive an object either as a figure in the foreground or as part of the background. The brain determines the figure/ground relationship before it makes any other resolutions about what it sees. Using its innate ability to see in 3D, it separates what is in the front and what is in the back. Thus, by filtering out what is not immediately important, it simplifies its perceptual field and can focus on relevant elements.

Unless there are specific reasons to go against the figure/ground distinction, designers should pay utmost attention to clearly differentiate between figure and ground, in order to focus the attention of viewers and to minimize perceptual confusion. Key elements should be made figures in the composition to increase their probability of recall. As a general rule, elements in the lower regions of a design are more likely to be perceived as figures, whereas elements in the upper regions are more likely to be perceived as ground.

Animals appear in the whitespace between figures
Example of how the background can be used to create meaning

When an element or a colored area overlaps a larger one, we tend to perceive it as the figure and the larger area as the ground. Similarly, a region that has higher contrast than its surrounding, an image that is symmetrical, or an area that is textured will usually be seen as a figure.

It is possible to intentionally go against the principle of figure/ground distinction and to use the negative space of the background as part of the foreground, to achieve specific effects. The incorporation of negative space into an image is one of the most widely used concepts in logo and icon design.

Closure

The fifth gestalt principle of perceptual organization is the principle of closure and states that we process available visual information in light of our stored perceptions to form whole, meaningful scenes. Thus, we add information to the incoming sensory data to create complete objects. The biasing effects of human perception help us see the world as whole and complete. Our tendency to interpret information in this way is automatic and unconscious. And closure lets viewers participate in the completion of patterns, thereby achieving more interactive and interesting designs.

Closure means that visuals we design do not have to be whole or complete in order for our viewers to successfully identify them. Closure allows for immediately grasping the depiction. And closure is strongest when elements approximate simple, recognizable forms, such as geometric shapes, and are located near one another. In situations where more complex forms need to be used, one can create closure through transitional elements, subtle visual cues that help direct the eye to find the pattern. A few short line segments, dotted lines, or even imaginary contours of aligned text are usually sufficient to identify group borders.

Lady with a hat recognizable with the help of the gestalt closure principle
Making sense of an image with the help of the Gestalt Closure Principle

The closure principle is often applied to display several images at once. Just showing one whole object and the edges of others behind it is enough to make users perceive a stack of objects. When designs involve obvious patterns, one may consider removing some elements that can be mentally supplied by viewers. When designs involve more complex patterns, it is better to make use of transitional elements to assist viewers in finding or forming patterns.

Closure works well in the creation of icons, as of logos, utilizing positive and negative space together to decrease complexity, since these elements must convey messages and reinforce concepts within small spaces. For this purpose, they need to be simple and stripped down to their basic elements so people can quickly understand their meanings.

The closure principle works not only in a spatial but also in a temporal sense. Many forms of storytelling leverage closure as well. When discrete scenes in time are presented to viewers, they will supply what happens in between.

Good Continuation

The sixth gestalt principle of perceptual organization is the principle of good continuation and states that the brain follows smooth, predictable paths and assumes constancy of objects. Sometimes it is also referred to as the principle of continuity. Thus, the brain follows lines, curves, and sequences of shapes on smooth paths in order to determine the relationship between the different elements of a scene and to unify our complete perceptual experience.

The gestalt principles closure and continuity are related and work together. Continuity assumes constancy of objects and tries to lead the eye from one part of a scene to another to get the whole picture, while closure seeks to predict what the missing parts might be. Continuity is generally the reason why handwriting and script-fonts appeal to the brain. The better legibility of long passages of text in serif fonts in comparison with sans-serif fonts also has to do with this principle.

Two curves intersecting
We know how to follow these curves due to the Gestalt Principle of Good Continuation

The first and foremost use of continuity in design is to subtly lead the viewer’s focus of attention. By indicating trails on the display, the focus of the viewer can be guided based on the information priority structure. Therefore, good continuation should be used to indicate relatedness between elements in a design. Arranging elements such that their alignment corresponds to their relatedness and arranging unrelated or ambiguously related items on different alignment paths is often a good strategy.

Grouping by Proximity

The seventh gestalt principle of perceptual organization is the principle of proximity and states that we group visual elements that are close to one another and consider those that are further apart as separate. The interpretation of proximity is based on relative distances between elements. Thus, in design, one should place related elements in close proximity, making sure elements that share no meaningful relationship are placed a distance apart that prevents erroneous detection of grouping.

Grouping is a very important aspect of the meaning-making ability of our brain. It lets us see patterns. The arrangement of items that we perceive directly influences what sense we make out of them. Their location says something about their mutual relationship. The closer two or more groups are to one another, the slower we are to detect distinct groups or determine to which group each item belongs.

Black dots grouped by their proximity
We group these dots based on the Gestalt Proximity Principle

In design, it is often the negative space between the elements which determines proximity. The closer items are to one another, the more likely they will be perceived as grouped. On the other hand, when items are crowded into too small a space, users’ speed of scanning the display drops. Therefore, designers have to find a good compromise between too much and too little whitespace. One should use small and consistent spacing to ensure the viewer can distinguish separate elements but can also quickly jump from one item to another.

Spacing frames, images, or other graphical elements far away from the corresponding information requires eye movements, or saccades, from one to the other, which places an unnecessary burden on the user. The proximity principle too can be used to highlight, when used in the negative sense, by increasing the whitespace around the item to be highlighted.

Proximity is one of the most powerful means of indicating relatedness in a design. This holds true for design elements as well as for content. The proximity principle together with the use of our understanding of personal space lets us tell if there is intimacy, friendship, or a formal relationship between people, or even between people and animals or objects. Thus, proximity expresses not only a spatial relationship but also an emotional one.

Grouping by Similarity

The eighth gestalt principle of perceptual organization is the principle of similarity and states that we group visual elements that are similar in color, size, or shape, or more generally, that share superficial characteristics. There is a context-dependent, fluid hierarchy of the order with which we perceive groups of similar items. For scenes of moderate complexity, the highest-ranking is usually achieved by color, then by size, then by shape.

Proximity will generally overwhelm similarity. However, the grouping bias for similar items works also when these are not together, so long as they remain within the same visual display. In simple instances, the grouping even works across several screens. Similarity immediately brings structure into any visual scene. It helps us recognize patterns in complex environments and easily organize these. And the principle of similarity plays an essential role in maintaining consistency in design, which enables viewers to quickly infer the logic of a depiction and determine what items serve what purpose.

36 Icons with four different shapes with three different colors and two different sizes grouped by the gestalt principle of similarity
We group these icons first by color, then by size, then by shape

The principle of similarity is very effective and therefore when things appear similar by chance rather than intention, viewers may perceive groupings erroneously. It is important to take into consideration the potential for confusion when non-grouped items share superficial characteristics. One should use similarity to structure and group related items taking care that items that are unrelated are not similar. One can, of course, make items one wants to highlight intentionally dissimilar.

Similarity is not only important for structure but also for content. In the positive sense, it captures orderliness, rhythm, and structure. In the negative sense, dissimilarity can be used to highlight differences. Similarity is often used to contrast order with disorder and similar with dissimilar. It serves to capture uniformity or the lack thereof in a visual.

Grouping by Connectedness

The ninth gestalt principle of perceptual organization is the principle of connectedness (often referred to as element connectedness) and states that we perceive physically connected items as grouped. The principles of continuity and connectedness are related, but while the former describes a search strategy of the mind, the latter describes a grouping strategy.

Connectedness can serve to indicate all types of relations between items, including spatial, temporal, contextual, and functional relations, in the world of design as in real life. Where connectedness is at odds with proximity or similarity, the elements that are connected will appear more related than either the proximal or similar elements.

36 Icons grouped by their connectedness
These shapes are grouped first by their connectedness

Using the principle of element connectedness is a simple but highly effective way of bringing structure into a design. It can prove especially useful when related items are located at a distance on the display. Simple lines, even when just implied, can bind a composition together. And connectedness can be used in the negative sense, to express the idea that unconnected items are of secondary importance or of a supplementary nature.

Grouping by Common Region

The tenth gestalt principle of perceptual organization is the principle of common region and states that we group visual elements which share a clearly delineated region of space. It is the most common, unambiguous, and overpowering grouping strategy in design. Where it is at odds with proximity, similarity, or connectedness, the elements that are in a common region will usually appear more related than either the proximal, the similar, or the connected elements.

A region can be defined by a frame (a clear border, an indicated border, a separator line, a uniform margin to neighboring elements, etc.), or a background (established by a uniform color, a color gradient, a texture fill, an image, etc.) that is different than the overarching background, or a combination of these. Making use of the principle of common region is most important when there is a lot of information that could be confused if no structural elements were included.

"Stop war. Peace now." wrongly read as "Stop peace. War now." due to false grouping by common region
False interpretation due to wrong use of the Gestalt Principle of Common Region

When one set of options in a design should be seen as more important than the rest, dividing the display into sections and then making the section containing the important information more eye-catching and the other sections more muted is a good strategy. More generally, the principle of common region can be used to divide the content into sections, to create a layered viewing hierarchy. This provides the opportunity to guide the viewer through the display and to make sure they understand which information belongs together.

Grouping by Common Fate

The eleventh gestalt principle of perceptual organization is the principle of common fate and states that we group visual elements that appear to be moving in the same direction. It helps us to detect outliers fairly quickly. While it is not necessary for items to be actually moving and an implied motion is sufficient for us to mentally group them, perceived relatedness is strongest when they are in motion and move at the same time, with the same speed, and in the same direction.

Any motion of items on a static background immediately draws the attention of viewers and can serve to distinguish these from the rest of the display. When elements within a region move together with the bounding edge of the region, the elements and the region will be perceived as the figure. Our tendency to interpolate missing scenes of things in motion causes us conversely to extract meaning out of similar subsequent patterns, interpreting them as being part of motion, where there is none. This is called the phi effect.

People rushing towards a bus grouped by the gestalt principle of common fate
People rushing towards a bus grouped by the Gestalt Principle of Common Fate

The principle of common fate provides a great way of expressing common intent, sometimes even determination in images. People rushing in one direction are immediately recognized as having a common purpose. People don’t even have to walk or point in the same direction to be grouped; it is sufficient if they look in the same direction. On the other hand, showing someone going against the crowd is a great way of highlighting rebels, people who do things differently.

Grouping by Synchrony

The twelfth gestalt principle of perceptual organization is the principle of synchrony and states that we group visual elements that represent a synchronous event. The principle of synchrony is related with the principle of common fate. While common fate captures sameness of directional aspects of motion, synchrony captures sameness of time of occurrence. Accordingly, we group items that appear to be associated with one and the same event.

Synchro swimmers posing similarly
People posing similarly are grouped by the Gestalt Principle of Synchrony

When one event seems to occur independent of all others, it draws attention, which means that the principle of synchrony can be used in the negative sense to highlight. We have the tendency to assume that people posing in similar ways are related in some way. Capturing similar poses of people offers a great way of identifying relationships. Synchrony can help to recognize common intent, togetherness, common cause, etc. Synchrony can create dynamism in visuals, in that we extrapolate from the poses that have been captured.

Conclusion

The twelve gestalt principles describe how humans perceive scenes and have practical applications in any field where visual design is involved. There are basically four types of actions that occur simultaneously in recognition: We simplify by grouping items, we explore the scene, we supplement missing information, and all the while, as an overarching action accompanying all the others, we try to recognize meaningful things choosing the most concise from among the possibilities.

There are two sides to using the gestalt principles: The use in the positive sense can help to organize and structure while the use in the negative sense can highlight a specific element. The best results are achieved when several grouping rules are used consistently together. Because the perceptual biases that gestalt principles express are very strong, and with all the gestalt principles operating at once, unintended visual relationships can be implied by a design.

If you wish to learn in-depth how gestalt psychology can be employed for user experience, user interface, app, and web design, take the online course GESTALT THEORY FOR WEB/UX/UI/APP DESIGNERS offered by Inspiraition.com at Udemy. This course contains essential material for any designer who wishes to learn to create websites and apps that account for cognitive biases of visitors and that appeal to their subconscious minds by catering to how the human perceptual system works.

Aischa Erten’s book GESTALT IN PHOTOGRAPHY is an excellent source for learning to apply gestalt psychology in photography. You can buy the book at Amazon.

Leave a Reply

Your email address will not be published. Required fields are marked *