gestalt in web design

What exactly are Gestalt principles?

It is a theory of visual perception that is commonly seen in optical illusions.

Why so?

It is because we, humans perceive a group of objects entirety before we see them individually. We often see the whole more than the sum of the different parts, even when the parts are separate entities.

The 6 Gestalt principles are:

  • Symmetry and order
  • Proximity (grouping)
  • Similarity
  • Figure/ground
  • Continuation
  • Closure

Symmetry and order

Having a view that is orderly and balanced does not make the viewers spend a long time trying to figure out where to find something.

Symmetry&order in Gestalt principles in web design

Proximity

Things that have a connection stay close together. If they are physically separated, we assume that they do no have any connection.

proximity in web design

Similarity

When grouping items together, we tend to put together things that are similar. For example: shape, colour, shade, quality & orientation.

similarity in web design

Figure/ground

When looking at something, we often separate out a foreground (figure) and a background (ground) where foreground is the main subject that we focus on and the background is generally ignored.

figureground in web design

Continuation

When we see a line, our eyes tend to follow it towards the direction that the line is going till where it ends.

continuation in web design

Closure

When given incomplete information, us humans tend to find patterns to seek completion and filling in the bits that does not actually exist to fill up the missing information.

closure in web design

Why use Gestalt principles in web design?

As the term Gestalt means “form” or “shape” in German, it is important for our website to look neat in a way that users are able to feel more connected to our website as it uses optical illusions which makes use of our brains to let users feel connected with us as they browse through the website.

Examples of Proximity in web design

Web forms are good examples of proximity as label and field are grouped together. Doing so helps the user to understand the form quickly and complete it correctly.

proximity example in web design

Examples of Similarity in web design

In this example, the buttons are similar and expect them to perform a similar action. The white tabs suggest they all have the same function while the red tab screams for attention to get the user to sign up.

similarity example in web design

Examples of Figure-ground in web design

The most basic principle in web design is allowing user to see that an action is possible. A button that pops out from its background is a simple example of Figure-Ground relationship.

Example of Figure-ground in Web design

Examples of Continuation in web design

When designing an interface we always consider the Continuation principle as the user’s eyes will follow a certain path, pausing on the most prominent graphic elements.

continuation example in web design

Examples of Closure in web design

An example of closure is when users are prompted to guess invisible elements by looking at the visible elements. In this example, 4 images are hidden but there are enough visual elements for the user to understand that the next image is just one click away.

Example of Closure in Web design

Takeaway

In conclusion, it is beneficial to consider Gestalt principles while designing for websites as all of them work together as one to achieve a better structure and graphic design for your website. Remember these are the key points for you to evaluate the aesthetics of your website. If it’s not, it is time to apply these principles. We hope this article benefits you. Stay tune to our next blog post where we will be sharing with you on more tips regarding the various topics.