Gestalt theory Theory in web design

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.

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.

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.

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.

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.

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?

A couple other Examples

MC Escher is awesome

“Waves” by Wilma Hurskainen

References http://graphicdesign.spokanefalls.edu/tutorials/process/gestaltprinciples/ges taltprinc.htm https://webdesign.tutsplus.com/articles/the-gestalt-principle-design-theory- for-web-designers--webdesign-1756 Goldstein, E. Bruce. Cognitive Psychology: Connecting Mind, Research, and Everyday Experience. Stamford: Cengage Learning, 2015. Print.