32
Gestalt Principles And why they’re important for real good great quality design Presented by NotProf. Lucas Glenn, BFA MiB Ch. 1 – Brief History Ch. 2 – Today Ch. 3 – Properties Ch. 4 – Applied Properties Ch. 5 – Gestalt Laws & Design Ch. 6 – Creative Exercise

Making Better Designs with Gestalt Principles

Embed Size (px)

Citation preview

Page 1: 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

Page 2: Making Better Designs with Gestalt Principles

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

Page 3: Making Better Designs with Gestalt Principles

Chapter 2

Gestalt Theory Today

❖ Principles

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

Page 4: Making Better Designs with Gestalt Principles

Gestalt Properties

❖ Our tendency to recognize a full form from individual parts

Chapter 3

Emergence

Page 5: Making Better Designs with Gestalt Principles

Gestalt Properties

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

Chapter 3

Reification

Page 6: Making Better Designs with Gestalt Principles

Gestalt Properties

❖ Two perceptions popping back and forth

Chapter 3

Multistability

Page 7: Making Better Designs with Gestalt Principles

Gestalt Properties

❖ Flexible form recognition

Chapter 3

Invariance

Page 8: Making Better Designs with Gestalt Principles

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

Page 9: Making Better Designs with Gestalt Principles

Gestalt Laws & Design UseChapter 5

❖ Fundamental principle❖ Perceiving ambiguity and complexity as simple

Pragnanz (Good Figure, Law of Simplicity)

Page 10: Making Better Designs with Gestalt Principles

Chapter 5

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

Laws of Grouping: Closure

Gestalt Laws & Design Use

Page 11: Making Better Designs with Gestalt Principles
Page 12: Making Better Designs with Gestalt Principles

Gestalt Laws & Design UseChapter 5

❖ Symmetry is our tendency to see objects as symmetrical shapes

Laws of Grouping: Symmetry and Order

Page 13: Making Better Designs with Gestalt Principles
Page 14: Making Better Designs with Gestalt Principles

Chapter 5

❖ Our minds separate shapes into figure and ground

Laws of Grouping: Figure/Ground

Gestalt Laws & Design Use

Page 15: Making Better Designs with Gestalt Principles
Page 16: Making Better Designs with Gestalt Principles

Chapter 5

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

Laws of Grouping: Uniform Connectedness

Gestalt Laws & Design Use

Page 17: Making Better Designs with Gestalt Principles
Page 18: Making Better Designs with Gestalt Principles

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

Page 19: Making Better Designs with Gestalt Principles
Page 20: Making Better Designs with Gestalt Principles

Chapter 5

❖ Close things look like they’re more related

Laws of Grouping: Proximity

Gestalt Laws & Design Use

Cats ZebrasPlants

More cats

Page 21: Making Better Designs with Gestalt Principles
Page 22: Making Better Designs with Gestalt Principles

Chapter 5

❖ Elements on a line or curve appear related

Laws of Grouping: Continuation

Gestalt Laws & Design Use

Page 23: Making Better Designs with Gestalt Principles
Page 24: Making Better Designs with Gestalt Principles

Chapter 5

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

Laws of Grouping: Common Fate

Gestalt Laws & Design Use

Page 25: Making Better Designs with Gestalt Principles
Page 26: Making Better Designs with Gestalt Principles

Chapter 5

❖ Things that share characteristics are perceived as related

Laws of Grouping: Similarity

Gestalt Laws & Design Use

Page 27: Making Better Designs with Gestalt Principles
Page 28: Making Better Designs with Gestalt Principles

Chapter 5

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

Laws of Grouping: Past Experiences

Gestalt Laws & Design Use

Page 29: Making Better Designs with Gestalt Principles

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

Page 30: Making Better Designs with Gestalt Principles

– Lucas Glenn

“It’s time for a creative exercise”

Page 31: Making Better Designs with Gestalt Principles

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

Page 32: Making Better Designs with Gestalt Principles

Thanks for your participation