Making Better Designs with Gestalt Principles

Gestalt PrinciplesAnd why they’re important for real good great quality designPresented by NotProf. Lucas Glenn, BFA MiB

Ch. 1 – Brief HistoryCh. 2 – TodayCh. 3 – PropertiesCh. 4 – Applied PropertiesCh. 5 – Gestalt Laws & DesignCh. 6 – Creative Exercise

Chapter 1

The History of Gestalt Theory❖ 1890, Berlin School of Experimental Psychology❖ Theory of mind: A gestalt is an organized whole that is

perceived as more than the whole of its parts❖ Credits: David Hume, Johann Wolfgang von Goethe,

Immanuel Kant, David Hartley, and Ernst Mach❖ Refined by Max Wertheimer, 1893❖ Mid 20th C. Cybernetics and Neurology

Chapter 2

Gestalt Theory Today

❖ Principles

Used in:❖ Perceptual Psychology❖ Cybernetics and neuroscience❖ Graphic Design, Visual Art❖ HCI – UI Design, Usability Engineering❖ Political Economics

Gestalt Properties

❖ Our tendency to recognize a full form from individual parts

Chapter 3

Emergence

Gestalt Properties

❖ There is more that can be perceived than what’s actually there

Chapter 3

Reification

Gestalt Properties

❖ Two perceptions popping back and forth

Chapter 3

Multistability

Gestalt Properties

❖ Flexible form recognition

Chapter 3

Invariance

A

B

C

D

Gestalt Properties: Design UseChapter 4

❖ Critical to the way a user or viewer perceives a design❖ Things to avoid, and things to apply❖ Some examples:

A. Emergence – Our mind sees the whole before the partsB. Reification – Our mind fills in the GapsC. Multi-Stability – Our mind seeks to avoid uncertaintyD. Invariance – Our mind is good at noticing similarities

and differences

Gestalt Laws & Design UseChapter 5

❖ Fundamental principle❖ Perceiving ambiguity and complexity as simple

Pragnanz (Good Figure, Law of Simplicity)

Chapter 5

❖ Closure is our minds combining multiple parts to form a unified whole

Laws of Grouping: Closure

Gestalt Laws & Design Use

Gestalt Laws & Design UseChapter 5

❖ Symmetry is our tendency to see objects as symmetrical shapes

Laws of Grouping: Symmetry and Order

Chapter 5

❖ Our minds separate shapes into figure and ground

Laws of Grouping: Figure/Ground

Gestalt Laws & Design Use

Chapter 5

❖ Visual connections between elements make us perceive them as related.

Laws of Grouping: Uniform Connectedness

Gestalt Laws & Design Use

Chapter 5

❖ Things look like groups if they within the same close region

Laws of Grouping: Common Regions

Gestalt Laws & Design Use

A STRIPmall in FloridaMy mom’s friend

ChinaGood times

Cats

John Stamos

Anger

Chapter 5

❖ Close things look like they’re more related

Laws of Grouping: Proximity

Gestalt Laws & Design Use

Cats ZebrasPlants

More cats

Chapter 5

❖ Elements on a line or curve appear related

Laws of Grouping: Continuation

Gestalt Laws & Design Use

Chapter 5

❖ Things that move in the same direction are perceived as as related

Laws of Grouping: Common Fate

Gestalt Laws & Design Use

Chapter 5

❖ Things that share characteristics are perceived as related

Laws of Grouping: Similarity

Gestalt Laws & Design Use

Chapter 5

❖ Things are perceived according to a user’s past experience

Laws of Grouping: Past Experiences

Gestalt Laws & Design Use

Bibliography❖ The designer's guide to Gestalt Theory, Creative Bloq, 2015

❖ Design Principles: Visual Perception and the Principles of Gestalt, Smashing Magazine, Steven Bradley, 2014

❖ Gestalt Psychology, Wikipedia, 2016

❖ Gestalt principles of form perception, Mads Soegaard, Interaction Design Foundation, 2015

❖ Cognitive psychology for UX: 7 Gestalt principles of visual perception, User Testing Blog, Spencer Lanoue, 2016

❖ Gestalt Principles of Perception, Andy Rutledge, 2009

– Lucas Glenn

“It’s time for a creative exercise”

Creative Exercise

Illustrate three total examples of any of the Gestalt Laws we went over.

At the end I’ll gather them and put them into a Learning Slideshow to be later shared on @general

❖ Pragnanz

❖ Closure

❖ Symmetry & Order

❖ Figure/Ground

❖ Uniform Connectedness

❖ Common Region

❖ Proximity

❖ Continuation

❖ Common Fate

❖ Similarity

❖ Past Experiences

Thanks for your participation