gestalt design principles for developers
DESCRIPTION
Extended version of the WordCamp Europe and BetterSoftware 2014 talk. This presentation highlights some foundational principles that helps cross-disciplinary teams of designers and developers to communicate better.TRANSCRIPT
GESTALT DESIGN PRINCIPLES FOR DEVELOPERS
Davide ‘Folletto’ Casali
UX Redirector Advisor
NIGHT.EU
@Folletto
“I don’t get why you’re doing
this presentation”
CREATE A DESIGN
KNOW GESTALT
KNOW GRIDSUNDERSTAND TYPEFACES
UNDERSTAND MOODAPPLY GESTALT
CREATE GRIDS
CHOOSE GRIDSUNDERSTAND COLOR THEORY
CREATE PALETTES
UNDERSTAND PERCEPTIONUNDERSTAND PROPORTIONS
UNDERSTAND COMMUNICATION
UNDERSTAND FEELING
CREATE A DESIGN
CREATE A DESIGNDESIGNERS’ STUFF
APPLY A DESIGN
STAY CONSISTENT
USE THE GRID
APPLY A DESIGN
ANYONE CANAPPLY A DESIGN
STOP IDEALIZING UNICORNS
C/AThe Art Director / Copywriter Duo
WILLIAM BERNBACH ~1960 · INDUSTRY REVOLUTION · FROM $1M TO $40M
D/DThe Designer / Developer Duo
BETTER COLLABORATION · LESS REWORK · HIGHER QUALITY
Principles of Gestalt
The total is more than the sum of the parts
EMERGENCE
You perceive more than it’s visualized
REIFICATION
Simple objects are recognized independently of rotation, scale,
deformation and style
INVARIANCE
Ambiguous perceptual experiences oscillate between
alternative interpretations.
MULTISTABILITY
INVARIANCEREIFICATION MULTISTABILITYEMERGENCE
Laws of Prägnanz
INVARIANCEREIFICATIONEMERGENCE
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
Intersecting objects tend to be perceived as a single uninterrupted object
LAW OF CONTINUATION
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
Elements with the same moving direction
will be perceived as a unit
LAW OF COMMON FATE
© star-blazer
SCROLLING
MOTION
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
Our mind will try to complete an incomplete visual stimulus to
increase regularity
LAW OF CLOSURE
© Scott McCloud, Understanding Comics
BOXES… WITHOUT LINES
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.
CLOSURE CALLS FOR ALIGNMENT
CLOSURE CALLS FOR ALIGNMENT
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY
Elements close together will be perceived as a
whole
LAW OF PROXIMITY
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam.
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.
Lorem ipsum !
Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam.
Lorem ipsum Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.
Lorem ipsum !
Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre. Lorem ipsum gaium sit amet isciquitur elit in ellam urbe lacustre.KEEP CONTENT UNITS TOGETHER
DASHBOARDS
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY
SIMILARITY
Similar looking elements will be perceived as a whole
LAW OF SIMILARITY
LOTS OF INFORMATION JUST WITH SHAPES
ICONS REINFORCE MEANING ACROSS SCREENS AND DEVICES
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
Different or unique element will gain more prominence
LAW OF FOCAL POINT
Like this.
Or this.
Not quite… REPETITION WEAKENS FOCAL POINT.
CALL TO ACTION
LINKS
FLOW HINTS
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
PROXIMITY
FOCAL POINT
CLOSURE
FOCAL POINT
FOCAL POINT
CLOSURE
PROXIMITY
FOCAL POINT
SIMILARITY
CLOSURE
Grids
“”
Massimo Vignelli
Grids are one of the several tools helping designers to achieve syntactical consistency
in graphic design.
© The Vignelli Canon
CLOSURE
PROXIMITY
SIMILARITY
GRIDS AUTOMATICALLY APPLY MULTIPLE LAWS
CLOSURE
PROXIMITY
SIMILARITY
SAVE TIME
SUPPORT CONSISTENCY
GLOBAL CONSISTENCY TRUMPS LOCAL OPTIMIZATION
Follow the grid.
...or define one.
TOO FINE
TOO COARSE
JUST RIGHT
“”
Massimo Vignelli
There are infinite kinds of grids, but just one – the most appropriate –
for any problem.
Can I break the grid?
Vergine delle Rocce Leonardo Da Vinci
© Analisi di Alfonso Rubino
What about responsive web design?
THE WEB IS FLUID
“Why do you keep asking me to make it
pixel perfect?”
You don’t need pixel-perfection, you need gestalt-perfection.
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
“”
Pleasing things work better, are easier to learn,
and produce a more harmonious result.Donald Norman
→ The Aesthetic-Usability Effect
Where next?
Original diagram by Dan Saffer, Updated by Barbara Chicca
The Elements of User Experience
J.J. Garrett
UX for the Web? UX for Management? UX Foundation?
The Inmates are Running the Asylum
A. Cooper
The Design of Everyday Things
D. Norman
And many more, but you can start here…
“
”Bruno Munari
To complicate is easy, to simplify is hard. To complicate, just add,
everyone is able to complicate. Few are able to simplify.
Thanks.
@Folletto