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