Gestalt Principles ๐Ÿง ๐Ÿ‘

Hello everybody, I am @lorenzo and in this post I want talk about one of most important topic of graphic design (and not only). I 'm obviously talking about 7 Gestalt Principles. As matter of fact the Gestalt it is also used for the creation of the optical illusions. For those who donโ€™t know it I recommend greater attention. For the next seven days Iโ€™m writing a post about it. So letโ€™s start.

The human brain is made to see structure, logic, and patterns and this helps us make sense of the world. In the 1920s a group of German psychologists developed theories around how people perceive the world around them. They called it Gestalt principles.

  1. Figure-ground
  2. Similarity
  3. Proximity
  4. Continuity
  5. Common region
  6. Closure
  7. Experience

Today Iโ€™m talking about the first principle of Gestalt (it is also my favorite).
The principle of contrast, also known as the figure-ground, states that objects are perceived as outlines, and therefore figures, in contrast with a background.
The more the figure will have a greater contrast with the background - and with the other elements - the easier it will be to distinguish it.


One of most famous optical illusion: the chalice and the two faces.


Ying and Yang draw.



In this example we can see two H.


Often Figure-ground is used to design a simple and clean logo. Less is more.

I wish it can be useful for someone. See tomorrow.


Vectornator Project: Gestalt-Figure-ground.vectornator (170.2 KB)

14 Likes

Itโ€™s beautiful @lorenzo !! I canโ€™t wait for the next days to learn more about Gestalt Principles! Thank you so much!! :heart_eyes: :star_struck:

3 Likes

As second day Iโ€™m talking about similarity. The principle of similarity states that when things appear to be similar to each other, we group them together. This happened because we think they have the same function. Our brain can group objects for shape, size or color.


A comparison on how much you can dare.


In the cross figure we can discern the โ€œLโ€ for each side and at the same time a cross.


Some example group by shape, size and color.


An example of flower logo. In this case the pictogram can be monochromatic o colorful. In each ways we can see the four different shapes and and the same time your brain sees it like one shape.


Vectornator Project: Getsalt-Similarity.vectornator (7.0 MB)

6 Likes

Today Iโ€™m talking about the third principle Gestalt: proximity. Proximity states that things that are close together appear to be more related than things that are spaced farther apart. So the space is the key of proximity.


The shape to left seems to represent to three different lines because the horizontal space is twice the vertical space. But when horizontal space becomes like vertical space we perceive one block like the shape to right.


As already mentioned, the space is important: it means shapes so far can destroy the whole structure.


An example of a stylized palace. It also contains a spoiler of the next Gestalt Principle. As matter of fact it often used with proximity.


Hamburger Logo.


Vectornator Project:
Gestalt-Proximity.vectornator (312.8 KB)

6 Likes

As I announced yesterday, Iโ€™m talking about the principle of continuity. It states that elements that are arranged on a line or curve are perceived to be more related than elements not on the line or curve. Our brain need to follow and complete the path. The eye follow every a line.


Some Examples of continuity.


Our brain connect the vertical rectangles (cyan) like a chain in spite of the spaces between the three blocks and we struggle to follow the horizontal lines because they are separated from the chain (cyan line). So the proximity and the continuity are related.


In the first draw we can follow with eyes the lines of 8 despite they are broken. In the second draw we have the opposite situation. The two lines are merged but the power of continuity is so strong that we can differentiate two lines thanks of the them motion.


An example of Logo.


Vectornator Project: Gestalt-Continiuty.vectornator (450.5 KB)

5 Likes

The principle of common region says that items within a boundary are perceived as a group and
assumed to share some common characteristic or functionality .
We perceive objects located within the same closed region as being grouped together.


The red rectangles border the elements contained in them.


The common region is often used in the GUI to group similar elements.


An example how use common region in a draw.


Vectornator Project: Gestalt-CommonRegion-Gestalt.vectornator (1.3 MB)

5 Likes

We are nearing the end. The sixth principle of Gestalt is closure. It states that when we look at a complex visual elements, we tend to simplify it in a pattern.
In other words, when we see an image that has missing parts, our brain will fill in the blanks and make a complete image so we can still recognize the design.


In the upper row you can see two examples about geometric shapes. You can recognize them despite they are broken. In the under row you can see two examples where closure itโ€™s applied for the text.


In top left the famous Kanizsa triangle illusion makes us realise the way our visual systems work.


A draw of a panda :panda_face: (is so cute).


Logo example.


Vectornator Project:
Gestalt-Closure.vectornator (2.0 MB)

4 Likes

Itโ€™s so impressive @Lorenzo!! Thank you so much for sharing your beautiful lessons and Vectornator files :wink: with the community! :heart:

2 Likes

Thank you so much @Vivien. :heart:

3 Likes

We have come to the end of the week of gestalt principles as last but not the least topic today Iโ€™m talking about experience law. It explains that we can throw to use our prior knowledge in order to understand certain elements. In others word we can recognize in a abstract object or picture the primordial shapes imprinted in our brain.


If you know the latin alphabet you can perceive the F and the N. People with a different alphabet canโ€™t see it. In the bottom there is a table with two chairs. Are you sure? Maybe is something else but you donโ€™t know it. Anyway I hid an Esther egg about its meaning.


Often we associate three vertical dots to stoplight.


Do you know this drink?


Logo example, what does it look like to you?

As you have noticed, several principles are often involved at the same time. For example in the Coca Cola draw I used figure-ground and experience.

Vectornator Project:
Gestalt-Experience.vectornator.zip (47.8 KB)

I hope these posts were useful to someone. :wink:

3 Likes

Thank you so much to all Vectornator community. I give you a last present that could be useful to remember the 7 principles.

Vectornator Project:
Gestalt-Cover.vectornator.zip (417.0 KB)

3 Likes

Thank you @lorenzo. It was very interesting to read about 7 Gestalt principles. Special thanks for providing great examples :fire: :fire: :fire:

3 Likes

Iโ€™m glad you enjoyed it. :heart:

4 Likes

Really cool. Thank you so much for your tricks. :+1:

1 Like