Skip links

The Gestalt Principle in Web Design

Web design frequently uses a design theory called the Gestalt Principle. It means “unified whole” and refers to theories of visual perception developed by German psychologists in the 1920’s. These theories attempt to describe how people tend to organize visual elements into groups or unified wholes to achieve visual unity through the use of certain principles. The principles include:

  • Similarity, which occurs when separate objects look similar to one another and can be perceived as a group or pattern.   Anomalies within this pattern become emphasized because they are dissimilar to the other objects in the group.
  • Continuation, which occurs when the eye is compelled to move through one object and continue to another object.
  • Closure, which occurs when an object is incomplete or a space is not completely enclosed.  However, if enough of the shape is indicated, the whole will be perceived by filling in the missing information, creating closure.
  • Proximity, which occurs when elements are placed close together and tend to be perceived as a group, creating unity, rather than separate shapes.

This information is important because it applies to the overall design or the overall look of a website, which should be considered before the details are set in place. This is because viewers will first see the outer shape of any design and will then focus on details. Essentially, the design of a website is perceived as a whole at first glance and in order to really change and make a creative website, the framework/structure/shell needs to be addressed first. Otherwise, the only thing to really do is change the individual elements, which may not make much of a difference. This can be called “changing the structural gestalt.” Starting with what can be considered the container or overall structural shell of a design will allow for a new look that can encompass your concept.

A great additional resource: Ahmed Hussam, The Gestalt Principle: Design Theory for Web Designers and for some great examples, take a look at this article.