Gestalt Design Principles for Developers
-
Upload
davide-folletto-casali -
Category
Design
-
view
29.486 -
download
1
Transcript of Gestalt Design Principles for Developers
![Page 1: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/1.jpg)
GESTALT DESIGN PRINCIPLES FOR DEVELOPERS
Davide ‘Folletto’ Casali
![Page 2: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/2.jpg)
UX Redirector Advisor
NIGHT.EU
![Page 3: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/3.jpg)
@Folletto
![Page 4: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/4.jpg)
“I don’t get why you’re doing
this presentation”
![Page 5: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/5.jpg)
CREATE A DESIGN
![Page 6: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/6.jpg)
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
![Page 7: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/7.jpg)
CREATE A DESIGNDESIGNERS’ STUFF
![Page 8: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/8.jpg)
APPLY A DESIGN
![Page 9: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/9.jpg)
STAY CONSISTENT
USE THE GRID
APPLY A DESIGN
![Page 10: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/10.jpg)
ANYONE CANAPPLY A DESIGN
![Page 11: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/11.jpg)
STOP IDEALIZING UNICORNS
![Page 12: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/12.jpg)
C/AThe Art Director / Copywriter Duo
WILLIAM BERNBACH ~1960 · INDUSTRY REVOLUTION · FROM $1M TO $40M
![Page 13: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/13.jpg)
D/DThe Designer / Developer Duo
BETTER COLLABORATION · LESS REWORK · HIGHER QUALITY
![Page 14: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/14.jpg)
Principles of Gestalt
![Page 15: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/15.jpg)
![Page 16: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/16.jpg)
The total is more than the sum of the parts
EMERGENCE
![Page 17: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/17.jpg)
![Page 18: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/18.jpg)
You perceive more than it’s visualized
REIFICATION
![Page 19: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/19.jpg)
![Page 20: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/20.jpg)
Simple objects are recognized independently of rotation, scale,
deformation and style
INVARIANCE
![Page 21: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/21.jpg)
![Page 22: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/22.jpg)
Ambiguous perceptual experiences oscillate between
alternative interpretations.
MULTISTABILITY
![Page 23: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/23.jpg)
INVARIANCEREIFICATION MULTISTABILITYEMERGENCE
![Page 24: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/24.jpg)
Laws of Prägnanz
![Page 25: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/25.jpg)
INVARIANCEREIFICATIONEMERGENCE
![Page 26: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/26.jpg)
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
![Page 27: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/27.jpg)
Intersecting objects tend to be perceived as a single uninterrupted object
LAW OF CONTINUATION
![Page 28: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/28.jpg)
![Page 29: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/29.jpg)
![Page 30: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/30.jpg)
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
![Page 31: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/31.jpg)
Elements with the same moving direction
will be perceived as a unit
LAW OF COMMON FATE
![Page 32: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/32.jpg)
© star-blazer
![Page 33: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/33.jpg)
SCROLLING
![Page 34: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/34.jpg)
MOTION
![Page 35: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/35.jpg)
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
![Page 36: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/36.jpg)
Our mind will try to complete an incomplete visual stimulus to
increase regularity
LAW OF CLOSURE
![Page 37: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/37.jpg)
© Scott McCloud, Understanding Comics
![Page 38: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/38.jpg)
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.
![Page 39: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/39.jpg)
![Page 40: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/40.jpg)
CLOSURE CALLS FOR ALIGNMENT
![Page 41: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/41.jpg)
CLOSURE CALLS FOR ALIGNMENT
![Page 42: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/42.jpg)
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY
![Page 43: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/43.jpg)
Elements close together will be perceived as a
whole
LAW OF PROXIMITY
![Page 44: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/44.jpg)
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.
![Page 45: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/45.jpg)
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
![Page 46: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/46.jpg)
DASHBOARDS
![Page 47: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/47.jpg)
INVARIANCEREIFICATIONEMERGENCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY
SIMILARITY
![Page 48: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/48.jpg)
Similar looking elements will be perceived as a whole
LAW OF SIMILARITY
![Page 49: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/49.jpg)
![Page 50: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/50.jpg)
LOTS OF INFORMATION JUST WITH SHAPES
![Page 51: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/51.jpg)
ICONS REINFORCE MEANING ACROSS SCREENS AND DEVICES
![Page 52: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/52.jpg)
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
![Page 53: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/53.jpg)
Different or unique element will gain more prominence
LAW OF FOCAL POINT
![Page 54: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/54.jpg)
Like this.
![Page 55: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/55.jpg)
Or this.
![Page 56: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/56.jpg)
Not quite… REPETITION WEAKENS FOCAL POINT.
![Page 57: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/57.jpg)
CALL TO ACTION
![Page 58: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/58.jpg)
LINKS
![Page 59: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/59.jpg)
FLOW HINTS
![Page 60: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/60.jpg)
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
![Page 61: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/61.jpg)
PROXIMITY
FOCAL POINT
CLOSURE
FOCAL POINT
FOCAL POINT
![Page 62: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/62.jpg)
CLOSURE
PROXIMITY
FOCAL POINT
SIMILARITY
CLOSURE
![Page 63: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/63.jpg)
Grids
![Page 64: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/64.jpg)
“”
Massimo Vignelli
Grids are one of the several tools helping designers to achieve syntactical consistency
in graphic design.
![Page 65: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/65.jpg)
© The Vignelli Canon
![Page 66: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/66.jpg)
CLOSURE
PROXIMITY
SIMILARITY
GRIDS AUTOMATICALLY APPLY MULTIPLE LAWS
![Page 67: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/67.jpg)
CLOSURE
PROXIMITY
SIMILARITY
SAVE TIME
![Page 68: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/68.jpg)
SUPPORT CONSISTENCY
![Page 69: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/69.jpg)
GLOBAL CONSISTENCY TRUMPS LOCAL OPTIMIZATION
![Page 70: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/70.jpg)
Follow the grid.
![Page 71: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/71.jpg)
...or define one.
![Page 72: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/72.jpg)
TOO FINE
![Page 73: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/73.jpg)
TOO COARSE
![Page 74: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/74.jpg)
JUST RIGHT
![Page 75: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/75.jpg)
“”
Massimo Vignelli
There are infinite kinds of grids, but just one – the most appropriate –
for any problem.
![Page 76: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/76.jpg)
Can I break the grid?
![Page 77: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/77.jpg)
Vergine delle Rocce Leonardo Da Vinci
© Analisi di Alfonso Rubino
![Page 78: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/78.jpg)
What about responsive web design?
![Page 79: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/79.jpg)
THE WEB IS FLUID
![Page 80: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/80.jpg)
“Why do you keep asking me to make it
pixel perfect?”
![Page 81: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/81.jpg)
You don’t need pixel-perfection, you need gestalt-perfection.
![Page 82: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/82.jpg)
CLOSURE
COMMON FATE PROXIMITY FOCAL POINT
SIMILARITYCONTINUATION
INVARIANCEREIFICATIONEMERGENCE
![Page 83: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/83.jpg)
“”
Pleasing things work better, are easier to learn,
and produce a more harmonious result.Donald Norman
→ The Aesthetic-Usability Effect
![Page 84: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/84.jpg)
Where next?
![Page 85: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/85.jpg)
Original diagram by Dan Saffer, Updated by Barbara Chicca
![Page 86: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/86.jpg)
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…
![Page 87: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/87.jpg)
“
”Bruno Munari
To complicate is easy, to simplify is hard. To complicate, just add,
everyone is able to complicate. Few are able to simplify.
![Page 88: Gestalt Design Principles for Developers](https://reader034.fdocuments.net/reader034/viewer/2022052207/58f9aa3b760da3da068b76d9/html5/thumbnails/88.jpg)
Thanks.
@Folletto