8/6/2019 Gestalt Design Principles

1/15

laws of perceptual organization. . . . ........ 1I!I_1 I'_ " ." .I! ~" . . . . . . . . . . . . . . a

Mary WalshCarlo Mostacci

8/6/2019 Gestalt Design Principles

2/15

ges piesOverview. / BackgroundigureProximitySimilarityGood ContinuityClosureSurroundednessSmallnessSymmetryPragnanzSummaryConclusionsReferences

8/6/2019 Gestalt Design Principles

3/15

ges lew ill:! I! II. III!: _ II i!i iii ~ " ' ! ! i i i Iii I ! ! !1 _ I l 1 0 1ti!~.i1Iii."Ii~il! I I I" - I 1 1 I I I I 1 1 I I I" 1 1! ,. !III" W C ' ." II II .1

. B. -~ "" ~. ;'1' '!I I; ' ,,, , . ~ Ii ' I. r _ . . :}J :'.:: :;II' '_ .... ~IGestalt pysychology allows communicators to

predict how viewers will respond to designelements. The Gestalt principles were developedin the nineteenth century by psychologists whobelieved that whole images are often perceivedas more than the sum of their parts. Based uponthis belief, Gestalt psychologists developed a setof principles to explain perceptual organization-how smaller objects are grouped to formlarger ones. These principles are often referredto asthe "laws of perceptual organization."Knowing and using Gestalt principles in visualcommunications helps to get our messageaccross and makes our designs more dynamic.This booklet briefly il lustrates the nine Gestaltprinciples and evaluates how they can beapplied to create effective publications.

8/6/2019 Gestalt Design Principles

4/15

ges !groundFigure/ground (figure/background) organiza-tion is an important phenomenon of gestaltperception. The figure/ground principle statesthat we tend to perceive some visual elementsasthe figure, with a definite shape and border,while other elements appear asthe background,further away and behind the main focus of thefigure. In the top image we seea flower figurewith a definite shape and border. The middleimage il lustrates how shadowing can create aclear sense of f igure definition and depth. Manyartists and designers play upon figure/back-ground to create visual i llusions in a mannersimilar to the bottom image. While we perceivethe whole image to be the figure against amedium blue background, focussing on the Mor W changes what letter seems to rise furtherout of the page.

8/6/2019 Gestalt Design Principles

5/15

ges ity

Proximity is a grouping principle ofperceptual organization-it states that objectsnear each other tend to begrouped together.For example, the upper image shows one squarestanding out among a sheet of evenly spacedsquares. The lone square seems differentbecause it is spaced further away from theothers. In the middle image, we perceivecolumns made from the same squares becausethere islessvertical space between them thanhorizontal space. The opposite istrue in thebottom image, and so we perceive rows.

8/6/2019 Gestalt Design Principles

6/15

ges rity IISimilarity isanother grouping principle,which states that those elements that sharequalit ies (of color, size, or shape, forexample) will be perceived as part of thesame group. For example, in the upper imagewe see a sheet of evenly spaced light bluesquares, but we perceive two squares asdifferent from the rest and from each other.The top-middle square seems differentbecause of its color, and the bottom-middlesquare seems different because of i ts size. Inthe middle image, columns appear becausewe associate similar colors together eventhough the squares are evenly spaced. In thebottom image, rows appear because weassociate similar shapes together.

. " . ~ ; . ~ . ' " I I: '/Ili .I,II~,::-.;..:;::. :.:'.. ('Ii' ". ".'.,~_-:.~'I.~:'. '-:''_~.''':'.:.:: ,1 . ~.". :' : . ._ L . , , : . ,:: ~.:. (. ~"__''Ii'

' . ; . . - ~ . ' . c . ' . ' . . , , 0 " ' .~1 :; . . . . . ~:~, ~.~~j S , ~l::

8/6/2019 Gestalt Design Principles

7/15

8/6/2019 Gestalt Design Principles

8/15

8/6/2019 Gestalt Design Principles

9/15

ges ndednessSurroundedness isanother principle thatorganizes figure and background. The elementsof an image seen assurrounded will be perceivedasthe figure, and the elements that are doingthe surrounding will be perceived asthe back-ground. In the top and middle images, we seetwo pine trees and a flower if the pale blue is thesurround, or an upside-down "W" and a cross ifthe darker blue is the surround. In the bottomimage, we seea pattern of overlapping crosses ifwe look first at the top left. But if we focus onthe bottom right we seea pattern of flowers; wechanged what is doing the surrounding andtherefore what the resulting figure is.

8/6/2019 Gestalt Design Principles

10/15

gesSmallness isa Gestalt principle that also contrib-utes to the figure/background organization-itstates that smaller areas tend to be seen asfigures against a larger background. When twofigures overlap, this principle states that thesmaller of the two will be considered the figurewhile the larger will be perceived as the back-ground. In the upper image, we perceive a small,pale blue box on a box outline, andboth sit ontop of a darker blue background. The middleand bottom images usesmallness/area to playupon our perception of figure/background. Inboth cases,we can perceive the images comingout of the page or going into the page, depend-ing on where we focus to see f igure andbackground.

8/6/2019 Gestalt Design Principles

11/15

ges etrySymmetry states that symmetrical areas tend tobe seen asfigures against asymmetrical back-grounds. For example, in the top image, we seetwo overlapping circles, not one el lipse enclosedby two asymmetric shapes. Similarly, in themiddle image we see three rectangles laid dia-gonally over a rectangular background, and weignore the asymmetrical shapes in the top leftand bottom right. In the bottom image, we seesymmetry helping create a three-dimensionalbox. Instead of perceiving seven individual(and mostly asymmetric) shapes, we perceivethe whole image as a symmetric three-dimensional box, emerging from the top leftor bottom right of its space depending wherewe focus.

8/6/2019 Gestalt Design Principles

12/15

8/6/2019 Gestalt Design Principles

13/15

ges aryFigure/Ground: the mind establishes a foregroundand background when interpreting forms.Proximity: features which are close together areassociated.Similarity: features which look similar are associated.Good Continuity: contours based on smooth conti-nuity are preferred to abrupt changes of direction.Closure: interpretations which produce 'closed'rather than 'open' f igures are favoured.Surroundness: areas which can be seen assurrounded by others tend to be perceived as fore-ground figures.Smallness: smaller areas tend to be seen asfiguresagainst a larger background.Symmetry: symmetrical areas tend to be seen asfigures against asymmetrical backgrounds.Pragnanz: the simplest and most stable interpreta-tions are favoured.

ill:! I! II. III!: _ II i!i iii ~ " ' ! ! i i i Iii I ! ! !1 _ I l 1 0 1ti!~.i1Iii."Ii~il! I I I" - I 1 1 I I I I 1 1 I I I" 1 1! ,. !III" W C ' ." II II .1

. B. -~ : I " ~ . ;'1' '!I I; ' ,,, , . ~ Ii ' I. r _ . . :}J :'.:: :;II' '_ .... ~I

8/6/2019 Gestalt Design Principles

14/15

ges srons . . . . . . ... . (11'- . . . . . . . . . . . . . .., , , ., ,- . . , , .. . . . . . . . . . .

, I ~ .. ~. ~ ~. .. - _ - . ~

'. It '" _J if '- Ii i - I I ' " II= . . ~ . ~ S . ~ -. " . . .I."~. IJI . ..

Gestalt theory was founded by Germanpsychologists Max Wertheimer, WolfgangKohler, and Kurt Koffka-it focused on howpeople interpret the world. Its message isthat"we seethe whole as being greater than thesum of its parts." With this concept in mind andits principles to guide us, we are better versedascreative professionals to fashion dynamicdesigns that not only attract our audiences,but also effectuate communication.

8/6/2019 Gestalt Design Principles

15/15

ges nces ill:! I! II. III!: _ II i!i iii ~ " ' ! ! i i i Iii I ! ! !1 _ I l 1 0 1ti!~.i1Iii."Ii~il! I I I" - I 1 1 I I I I 1 1 I I I" 1 1! ,. !III" W C ' ." II II .1

. B. -~ "" ~. ;'1' '!I I; ' ,,, , . ~ Ii ' I. r _ . . :}J :'.:: :;II' '_ .... ~I

Chandler, Daniel. Visual Perception 6.10 March 2001. http://www.aber.ac.uk/~ednwww/Undgrad/ED10510/visper06.htmlPalmer, Stephen. Gestalt perception. 8 March2001. http://phobos.cs. unibuc.ro/mltecs/work/palmer r.htrnlRallman, L. Gestalt psychology. 8 March 2001.http://homepages. ius.edu/LZ/RALLMAN/web_docs/gesta It. htm IVan Wagner, Kendra. Gestalt Laws of Percep-tual Organization. http://psychology.about.com/od/sensationandperception/ss/gestaltlaws.htmVolosinov, Valentin. Gestalt Principles of VisualOrganiz. 3 Jan. 2008. http://www.aber.ac.uk/media/Modules/MC10220/visper07.html

http://www.aber.ac.uk/http://psychology.about.com/http://www.aber.ac.uk/http://www.aber.ac.uk/http://psychology.about.com/http://www.aber.ac.uk/