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.

1. GESTALT DESIGN PRINCIPLES
FOR DEVELOPERS
Davide ‘Folletto’ Casali

2. NIGHT.EU
UX Redirector Advisor

3. @Folletto

4. “I don’t get why
you’re doing
this presentation”

5. CREATE A DESIGN

6. UNDERSTAND COMMUNICATION
CREATE PALETTES
CREATE A DESIGN
KNOW GRIDS
UNDERSTAND TYPEFACES
APPLY GESTALT
UNDERSTAND MOOD
CHOOSE GRIDS
UNDERSTAND COLOR THEORY
KNOW GESTALT
CREATE GRIDS
UNDERSTAND PERCEPTION
UNDERSTAND PROPORTIONS
UNDERSTAND FEELING

7. CREATE A DESIGN
DESIGNERS’ STUFF

8. APPLY A DESIGN

9. APPLY A DESIGN
STAY CONSISTENT
USE THE GRID

10. APPLY A DESIGN
ANYONE CAN

11. STOP IDEALIZING UNICORNS

12. A/C
The Art Director / Copywriter Duo
WILLIAM BERNBACH ~1960 · INDUSTRY REVOLUTION · FROM $1M TO $40M

13. D/D
The Designer / Developer Duo
BETTER COLLABORATION · LESS REWORK · HIGHER QUALITY

14. Principles
of Gestalt

16. EMERGENCE
The total is more than
the sum of the parts

18. REIFICATION
You perceive more
than it’s visualized

20. INVARIANCE
Simple objects are recognized
independently of rotation, scale,
deformation and style

22. MULTISTABILITY
Ambiguous perceptual
experiences oscillate between
alternative interpretations.

23. EMERGENCE REIFICATION INVARIANCE MULTISTABILITY

24. Laws of
Prägnanz

25. EMERGENCE REIFICATION INVARIANCE

26. EMERGENCE REIFICATION INVARIANCE
CONTINUATION

27. LAW OF
CONTINUATION
Intersecting objects tend to be
perceived as a single
uninterrupted object

30. EMERGENCE REIFICATION INVARIANCE
CONTINUATION
COMMON FATE

31. LAW OF
COMMON FATE
Elements with the same
moving direction
will be perceived as a unit

32. © star-blazer

33. SCROLLING

34. MOTION

35. EMERGENCE REIFICATION INVARIANCE
CONTINUATION
COMMON FATE
CLOSURE

36. LAW OF
CLOSURE
Our mind will try to complete an
incomplete visual stimulus to
increase regularity

37. © Scott McCloud, Understanding Comics

38. 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.
BOXES… WITHOUT LINES

40. CLOSURE CALLS FOR ALIGNMENT

41. CLOSURE CALLS FOR ALIGNMENT

42. EMERGENCE REIFICATION INVARIANCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY

43. LAW OF
PROXIMITY
Elements close together
will be perceived as a
whole

44. 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.

45. 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
KElaEcPus tCreO. NTENT UNITS TOGETHER

46. DASHBOARDS

47. EMERGENCE REIFICATION INVARIANCE
CONTINUATION
COMMON FATE
CLOSURE
PROXIMITY
SIMILARITY

48. LAW OF
SIMILARITY
Similar looking elements
will be perceived as a whole

50. LOTS OF INFORMATION JUST WITH SHAPES

51. ICONS REINFORCE MEANING ACROSS SCREENS AND DEVICES

52. EMERGENCE REIFICATION INVARIANCE
CONTINUATION CLOSURE
SIMILARITY
COMMON FATE PROXIMITY FOCAL POINT

53. LAW OF
FOCAL POINT
Different or unique element will
gain more prominence

54. Like this.

55. Or this.

56. Not quite…
REPETITION WEAKENS FOCAL POINT.

57. CALL TO ACTION

58. LINKS

59. FLOW HINTS

60. EMERGENCE REIFICATION INVARIANCE
CONTINUATION CLOSURE
SIMILARITY
COMMON FATE PROXIMITY FOCAL POINT

61. PROXIMITY
FOCAL POINT
CLOSURE
FOCAL POINT
FOCAL POINT

62. CLOSURE
PROXIMITY
FOCAL POINT
SIMILARITY
CLOSURE

63. Grids

64. “
” Massimo Vignelli
Grids are one of the several tools helping
designers to achieve syntactical consistency
in graphic design.

65. © The Vignelli Canon

66. SIMILARITY
PROXIMITY
CLOSURE
GRIDS AUTOMATICALLY
APPLY MULTIPLE LAWS

67. SIMILARITY
PROXIMITY
CLOSURE
SAVE TIME

68. SUPPORT CONSISTENCY

69. GLOBAL CONSISTENCY
TRUMPS LOCAL OPTIMIZATION

70. Follow the grid.

71. ...or define one.

72. TOO FINE

73. TOO COARSE

74. JUST RIGHT

75. “
” Massimo Vignelli
There are infinite kinds of grids, but just one
– the most appropriate –
for any problem.

76. Can I break the grid?

77. Vergine delle Rocce
Leonardo Da Vinci
© Analisi di Alfonso Rubino

78. What about
responsive web design?

79. THE WEB IS FLUID

80. “Why do you keep
asking me to make it
pixel perfect?”

81. You don’t need pixel-perfection,
you need gestalt-perfection.

82. EMERGENCE REIFICATION INVARIANCE
CONTINUATION CLOSURE
SIMILARITY
COMMON FATE PROXIMITY FOCAL POINT

83. “
”
Pleasing things work better,
are easier to learn,
and produce a more harmonious result.
Donald Norman
→ The Aesthetic-Usability Effect

84. Where next?

85. Original diagram by Dan Saffer, Updated by Barbara Chicca

86. UX for the Web? UX for Management? UX Foundation?
The Elements of
User Experience
J.J. Garrett
The Inmates are
Running the Asylum
A. Cooper
The Design of
Everyday Things
D. Norman
And many more, but you can start here…

87. “
” Bruno Munari
To complicate is easy, to simplify is hard.
To complicate, just add,
everyone is able to complicate.
Few are able to simplify.

88. Thanks.
@Folletto