1. Gestalt theory
Theory in web design

2. Gestalt Theory
Derived from perceptual theories created by German psychologists in the 1920s
Deals with how we perceive objects
“The whole is different than the sum of its parts”
The grouping of elements influences how they will be perceived as a whole
Principles: similarity, continuation, closure, proximity, figure & ground
Goldstein, 2015.

3. Similarity
Items with similar characteristics appear to be grouped together (ie. Size, shape, color, etc.)
Similarity creates connections between objects.
In the 1st image, the 3 figures on the left appear as a group, while the figure on the right is dissimilar – and, thus, stands out as an anomaly.
In the 2nd image, the similarity of the black lines and marks appear grouped, and together reveal the image of a zebra against the white background.

4. Continuation
Continuation occurs with the idea that the eye follows a curve.
The eye moves through one object to another.
In the 1st example, the eye is drawn on the path through space to the star.
The 2nd example is twofold: it connects the letters a and z, representing that they sell everything from A to Z, and is also the shape of a smile – something someone is sure to have when they shop at Amazon.

5. closure
Even if an image is not complete, our minds still can perceive an object.
Our minds fill missing spaces to form objects that are familiar.
In the 1st example, even though the number 1 is not outlined, our minds fill in the gaps and view the negative space in the logo as the number 1.
Even with the gaps on the 2nd image, our minds fill in the curves and identify the incomplete object as a panda.

6. proximity
Items placed close together take advantage of proximity – they are perceived as a group.
Items not close together are more likely perceived as individual objects.
In the 1st image, the closeness of the shapes cause them to be perceived as grouped and, thus, form a tree.
While the 2nd image is comprised of multiple different food items, their proximity reveals the shape of a car.
Both examples also rely on closure as a design component.

7. Figure & ground Refers to identifying a figure from the background.
Sometimes it is difficult to differentiate between the figure and
the background. The figure is the actual ground in this image:
In the 1st image above, the figure initially looks like the shape
of Africa. On closer inspection, a child and adult emerge as the figures.
The 2nd image reveals a tree as the figure, with an ape and a lion emerging from the background. Or perhaps, is it the other way around?

8. A couple other Examples

9. MC Escher is awesome

10. “Waves” by Wilma Hurskainen

11. References
taltprinc.htm
for-web-designers--webdesign-1756
Goldstein, E. Bruce. Cognitive Psychology: Connecting Mind, Research, and Everyday Experience. Stamford: Cengage Learning, Print.