Making Better Designs with Gestalt Principles
-
Upload
lucas-glenn -
Category
Design
-
view
80 -
download
1
Transcript of 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