gestalt in web design

What are Gestalt Principles?

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

Why?

Humans perceive a group of objects in their entirety before noticing 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 & Order
  • Proximity (Grouping)
  • Similarity
  • Figure/Ground
  • Continuation
  • Closure

Symmetry & Order

Having an orderly and balanced view which allows the viewers to immediately determine what they are looking for.

Symmetry&order in Gestalt principles in web design

Proximity

Things that have a connection stay close together. When separated, it is natural to assume that they do not have any ties with one another.

proximity in web design

Examples of Proximity in Web Design

Web Forms are good examples of proximity as the labels and fields are grouped together. This helps the user understand the form quickly and completes it correctly.

proximity example in web design

Similarity

When grouping items together, we put together things that are similar.

similarity in web design

Examples of Similarity in Web Design

The buttons are similar and are expected to perform similarly. The white tabs suggest that they all have the same function while the red tab grabs the user’s attention to get them to sign up.

similarity example in web design

Figure/Ground

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

figureground in web design

Examples of Figure-ground in Web Design

The most basic principle in web design is to allow the 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

Continuation

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

continuation in web design

Examples of Continuation in Web Design

When designing an interface, there needs to be a consideration for 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

Closure

When given incomplete information, humans find patterns to seek completion and fill in the bits and pieces that do not actually exist to fill up what is missing.

closure 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

Why use Gestalt Principles in Web Design?

The term Gestalt means “form” or “shape” in German. It is important for a website to look neat, specifically in a way that allows the users to feel more connected. Such uses of optical illusions make use of the brain to allow users to feel connected with a site as they browse. It is beneficial to consider Gestalt principles while designing websites, as all of them work cohesively to help achieve a better structure and graphic design for your website.

About Pixel Mechanics

As a one-stop e-commerce solutions provider in Singapore, Pixel Mechanics is a website design and development company that aims to help businesses transition to the online space seamlessly.