GESTALT THEORY Theory in web design GESTALT THEORY

GESTALT THEORY Theory in web design

GESTALT THEORY • Derived from perceptual theories created by German psychologists in the 1920 s • 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

SIMILARITY • Items with similar characteristics appear to be grouped together (ie. Size, shape, color, etc. ) • Similarity creates connections between objects. • In the 1 st 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 2 nd 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 1 st example, the eye is drawn on the path through space to the star. • The 2 nd 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 1 st 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 2 nd 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 1 st image, the closeness of the shapes cause them to be perceived as grouped and, thus, form a tree. • While the 2 nd 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 1 st image above, the figure initially looks like the shape of Africa. On closer inspection, a child and adult emerge as the figures. • The 2 nd 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/gestaltprinc. htm • https: //webdesign. tutsplus. com/articles/the-gestalt-principle-design-theory-for-webdesigners--webdesign-1756 • Goldstein, E. Bruce. Cognitive Psychology: Connecting Mind, Research, and Everyday Experience. Stamford: Cengage Learning, 2015. Print.