The Close Relationship Between Gestalt Principles and Design

Inspiration and creativity always follow recognizable patterns which come from culture and social trends to be effective. To works well design has to consider not just the single element but how the totality is perceived. That’s how we can define the Gestalt Theory, a matter of perception.

Visual elements are characterized form deep relationship which any good designer has to know and understand. Principles of Gestalt can be helpful to find out how visual perceiving works and why some shapes or groupof elements are look more balanced than others.

We are going to see what is the Gestalt School is, which are its rules, what those said and why they are so important for designers. By talking about them we will also see how they are applied to real examples. This will help to demonstrate how close the relationship between them, the design and its perception is.

The Importance of the Psychology Approach

Psychology is an important aspect of the design work because design is all about emotion and perception from the target. The designer has to construct his product shaped on the target needs and emotion to create a feeling, also based on social patterns.

Gestalt Principles can really help in focusing attention and organizing contents in an effective way. They surely can be considered an essential theoretical tool.

They are not merely a mathematic scheme to follow but a way to reorganize contents to transform familiar object arranging them in unfamiliar views. This allows the development of new configuration of already existent object, stimulating the creativity.

As designer is really important for you understand how people perceive a visual project and take advantage from these rules to have the edge over.

What is the Gestalt Theory

We can start by defining “Gestalt” as word and the school which first inspected this theory.

Gestalt psychology or gestaltism (German: Gestalt – “essence or shape of an entity’s complete form”) of the Berlin School is a theory of mind and brain positing that the operational principle of the brain is holistic, parallel, and analog, with self-organizing tendencies. The Gestalt effect is the form-generating capability of our senses, particularly with respect to the visual recognition of figures and whole forms instead of just a collection of simple lines and curves. In psychology, gestaltism is often opposed to structuralism and Wundt. The phrase “The whole is greater than the sum of the parts” is often used when explaining Gestalt theory.

Wertheimer, the original founder of the theory, has shown how to better understand the visual perception is of basic importance considering some elements grouping modes. The visual organization of these elements comes up by joying them in bigger structures.

We employ and rely upon these principles in most aspects of our everyday life. They both physically and conceptually compose our experience. How we move in groups, how we match the clothing and their colors, how we think and perceive a whole from elements, that could be a poster, a photo, a logo or even a dish, is influenced by Gestalt principles.

The relationship between objects is nothing more than a perception thing and this is, over all, the designer’s field of action.

Perception

How people visual perceives designs is of basic importance for designers. Creating a logo, a website or any other graphics product we have to take in consideration the whole and not simply the sum of the parts because is the complex totality of the elements in close relationship among them, which creates the meaning.

Details are important but only in the way they contribute to the overall. Pixel perfect web design, shadows, texture, font choice contribute to obtain a design which struck, even if your customers probably is not going to really view them. People which are not trained to detail perception are influenced mainly from the first glance and even designers start to see the details only after that their brain has received the first message.

People complete the visual organization in a predictable way. Designers exploit in the creative procedure to let possible the main message coming out as the first thing at the first glance. Other meanings are there too but they mainly need to give strength to the first one.

Famous painters of the recent past were aware of the perception role and have played with it by creating unique oeuvres. A great example of that is the well-known paint Gala Contemplating the Mediterranean Sea by SalvatorDalì. Dalì painted a portrait of his wife Gala back which fromtwenty meters far see becomes a portrait of Abraham Lincoln.

instantShift - The Gestalt Principle and Design

The Gestalt Six Rules

As said, the Gestalt Principles are a way to organize visual perception. Gestaltists have found how different elements in a field re-organize themselves in a solidarity system by following certain rules.

Here following the list of the six rules they have found:

Proximity

The distance plays a key-role in determining the elements perception. Things that are close among them are perceived to be more related than things that are scattered apart. The concept underlying the concept of proximity is the group.

instantShift - The Gestalt Principle and Design

Similarity

There is a natural tendency in put in relation similar elements more than dissimilar ones. They can be, for example, similar for shape, color or dimension.

instantShift - The Gestalt Principle and Design

Perceiving similarities not only helps us to assume what elements are related to one another, it also implies a structure based on an emerging pattern. Those kinds of objects which share some characteristics create cohesion in the design because our brains automatically search for patterns. Humans like symmetry but obviously also like breaking rules so also its contrary is inspiring.

Closure

Looking at a complex arrangement of individual elements, humans tend to first look for a single shape obtained from recognizable outlines. Closed shapes can be obtained by real lines, color or contrast or even lack of them. Closure Law occurs when an object is incomplete or a space is not completely enclosed and the brain activates some mechanisms to complete the figure by filling in the missing information.

The figure below is called the Necker Cube. What you can see? Can you see a white outlined cube? As a matter of fact the cube is no there, we only have eight black circles with some area missing. The cube is implicit because our mind put in relation these white lines filling in and completing the cube shape.

instantShift - The Gestalt Principle and Design

Common Fate

Elements moving in the same direction are perceived as a group more than those which are a steady group because they show more coherence.

A collection of distinct objects in a layoutthat seem to move all together toward a common goal, definition, conclusion or direction are generally perceived to be each other related.

In the example the dots look like they are moving in the top right direction and they looks more coherent than those simply aligned in equal rows.

Law of Prägnanz alias Figure Ground Relationship

Human brain tends to interpret ambiguous or complex images as simple and complete. In an image the composing elements are perceived as either figures or ground. Background and foreground can be exchanged and in both case they assume a precise meaning.

The most famous example of figure/ground image is that of the vase of Rubin.

instantShift - The Gestalt Principle and Design

The surrounded object is seen as figure. Shapes are overriding and you can perceive a black vase on a white background or, vice versa, two profiles on a black background.

This visual illusion is produced by the tendency of ambiguous perceptual between two or more alternative interpretations. In order to clear the image it needs to balance the figure/ground area.

Good Continuation

All elements are perceived as part of a coherent object so, for example if they are arranged in a line they are considered more related than detached elements. In the image the “line” created from the circles on the left “continues”, vice versa the other is interrupted.

instantShift - The Gestalt Principle and Design

Gestalt Principles and Visual Identities

Here examples of how these rules and principles have affected more than one corporate identity construction.

Proximity

As we said, element which are close are perceived as a shape.

We can see, as example here below, the logo Mistery Island created by Gert van Duinen. In an easy and brilliant way the designer use the proximity law to create a shape of an island and its reflection on the sea. This is the perfect combination of the brand name and the customer activity, dance music producer. The lines creating the island are clearly recognizable as equalizer lines.

instantShift - The Gestalt Principle and Design

Again in the Foodmobile logo (Designer: ru_ferret) we found a group of single objects, representing foods (bread, fish, vegetables are clearly recognizable) which grouped for proximity create a car shape.

instantShift - The Gestalt Principle and Design

Similarity

In the Capture logo, created by Quadrika, the Similarity Law is clearly applied. The Gestalt Principle of Similarity works well when designing logos because it is based on repetition of shape, size, color, texture, value or orientation.

The logo is featured by colors and shape similarity. The visual part of the Capture logo shares with the textual part a kind of viewfinder which is the same of the C and E letters.

instantShift - The Gestalt Principle and Design

Prägnanz (Figure-Ground)

By following the Figure-Ground Law in the Feathers & Fur logo, designed for a pet store from Lumo, the observer can recognize a parrot and a dog’s face into the mark.

instantShift - The Gestalt Principle and Design

Symmetry

The Hatimeria logo, from Midgar is a clear example of symmetry law. The software house here represented wants stress the great attention they put in building long-lasting partnerships with customers. The logo symbols are two hands joined together.The two hands are symmetrical designed to form stairs leading upwards.Symmetry creates a redundancy and predictability of visual information.

instantShift - The Gestalt Principle and Design

Another good example can be Antarctic Voice from Austronaut Design where the two symmetric pikes represent both an iceberg and a vice equalizer.

instantShift - The Gestalt Principle and Design

Humans like symmetry but obviously also like breaking rules so also its contrary is inspiring and is called anomaly.

“Common Fate”

In the Melbourne 2010 Cycling Championship logo the spots are affected by a common fate. The lines created by the colors move in the same direction creating a dynamism which let the observer perceive a common fate of movement.

instantShift - The Gestalt Principle and Design

Closure

The closure rule is of very common use in logo creation to create memorable design.

An extremely famous logo based on closure is the WWF Panda.

instantShift - The Gestalt Principle and Design

The logo IBM too, composed by eight solid lines, separated by empty space,is based on closure law. The three letters are not really there. Our brain perceives it by closing the letters shape.

instantShift - The Gestalt Principle and Design

Laws Combinations

Sometimes the Gestalt Laws can be combined to get even more creative effects.

One of the most used law relation is that from the Closure Law and the Figure/Ground one.

Here following a couple of meaningful examples:

01. Martin Newcombe Property Maintenance

instantShift - The Gestalt Principle and Design

Designed by Buddy Creative here a very simple but effective example of figure/ground rule based logo where the house is perceived by closing the figure base.

02. Guild of Food Writers

instantShift - The Gestalt Principle and Design

Guild of Food Writers is an association who writes about food. A black old style pen is the background for a white spoon, again by closing the spoon figure.

Designed in 2005 by 300million

Gestalt Rules and Web Design

The Gestalt Laws, which we have seen until now applied to identities building, can also be found in web design layout creation.

When we design a layout we apply a large series of visual care to make the site more clear and usable. For example it is common to employ some kind of connection between the GUI elements so that the user can recognize a common pattern being able to navigate that website easily.

Tabbed navigation is a prime example of this principle. The Instantshift navigation menu i.e. responds to the good continuation law. The categories are on a straight line and this helps us to understand that they’re related to one another. This perception is supported by the fact that the words are grouped together with proximity and that the one pixel lineall around clearly define the menu by separating it from the logo or the body areas drawing a box.

instantShift - The Gestalt Principle and Design

Conclusions

Design is for sure mainly the result of creativity. By the way, taking inspiration from those recognized visual rules which have been studied from experts and psychologist could be helpful to build a methodology which goes further from talent and intuition, able to face critics and customers. The basic principles of design are the same than those that the Gestalt rules shows. Balance, visual proportion, color dominance, elements organization compose the recipe for an effective design.

This can definitely make difference in the final design.

Further Resources on Gestalt Principles

Like the article? Share it.

LinkedIn Pinterest

21 Comments

  1. Error in the author’s Bio – “Ester Liquori is a graphic design”
    Ester Liquori is a graphic designer

  2. Excellent article. I would love to see one dissecting a few website designs that work or don’t work on the basis of gestalt principles.

  3. @jhonny – Thanks for the heads up. Info edited.

  4. As always…. interesting & insightful!

  5. very informative post thank you very much.

  6. Great post. I was checking constantly this blog and I am impressed! Extremely useful information specifically the last part I care for such information a lot. I was looking for this certain information for a long time. Thank you and good luck.

  7. really inspiring post.

  8. Very nice article! too informative! i am new in Designing idustry so this would be useful to me :) thanks

  9. thanks for introducing this useful Gestalt principles. thanks for sharing this with me.

  10. Hi! Thank you all for the appreciation :-)
    @dedide I will take your request in consideration for further articles

    • nice post

  11. Very nice article :) Basic!

  12. I just love the post.

  13. hi,
    thanks for guseful article
    could you please inform me about the reference of this article and the name of books in related with this article,
    thanks,

  14. thanks for introducing this useful Gestalt principles. thanks for sharing this with me.

Leave a Comment Yourself

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