Order concepts for web designers

1. Mater of Arts in Communication Design
WEB DESIGN
Order & equilibrium

2. "Order." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014.
<http://www.merriam-webster.com/dictionary/order>.
Order
"Disorder." Merriam-Webster.com. Merriam-Webster, n.d. Web. 12 Feb. 2014.
<http://www.merriam-webster.com/dictionary/disorder>.
WEB DESIGN NABA 2014 Roberto DADDA
2

3. Disorder gives the idea of complexity
Order
WEB DESIGN NABA 2014 Roberto DADDA
3

4. Ordered complexity!
Order
WEB DESIGN NABA 2014 Roberto DADDA
4

5. We need order AND
simplicity!
Order
WEB DESIGN NABA 2014 Roberto DADDA
5

6. Order
Albert Einstein, 14 March 1879 – 18 April 1955)
Everything Should
Be Made as
Simple as Possible,
But Not Simpler
WEB DESIGN NABA 2014 Roberto DADDA
6

7. Order
WEB DESIGN NABA 2014 Roberto DADDA
7

8. Order
WEB DESIGN NABA 2014 Roberto DADDA
8

9. Information density
too low
usefull info
total info
EQUILIBRIUM!
too high
Order
• Waste of precious screen
space
• Two many click
• Impession of loosing time
• STM needed to understand
correlation between pages
and pages elements
WEB DESIGN NABA 2014 Roberto DADDA
• Impression of confusion
• STM needed to undertand
page elements
• Difficult to remember
• Download time rises
9

10. Grid usage, clean design & test with
user’s
Order
WEB DESIGN NABA 2014 Roberto DADDA
10

11. Let’s learn from video
makers
http://userinterfaced.com/designing-video-information-density-for-optimum-audience-engagement/
Order
WEB DESIGN NABA 2014 Roberto DADDA
11

12. Joan MIRO, Stars in Snails' Sexes 1925
Contrast & user’s
focus
Order
With color, dimension,
shape… contrast we may
attract the user attention on
elements and information
flow direction.
WEB DESIGN NABA 2014 Roberto DADDA
12

13. Order
WEB DESIGN NABA 2014 Roberto DADDA
13

14. In page design…
• Identify element’s correlation, connection and order using
the laws of Gestalt
• Use de facto general standards
• Use reasonable local standards
• Evoid useless information
• Minimize cognitive load
Order
WEB DESIGN NABA 2014 Roberto DADDA
14

15. Design effort
deep
trivial
Balanced design
TOO MUCH
NONEXISTENT
CAOS
simple
Order
CORRECT
complex
WEB DESIGN NABA 2014 Roberto DADDA
Rules
15

16. Graphics for usability, the goals
• Be easy to read (text and images) for all the expected
users
• Help to understand structure of page giving to the user
a sensation of simplicity
• Help to associate homogeneous content elements
• Use visual codes usual for the expected users and
coherent
• Use coherent visual codes inside the pages ecosystem
• Avoid redundancy
• Avoid ambiguity
Order
WEB DESIGN NABA 2014 Roberto DADDA
16

17. Noise and chaos
• Noise
• Avoid the usage of useless visual
elements that divert the attention
from the meaningful ones
• Chaos
• Avid putting too many elements
together, they will interfere!
Order
WEB DESIGN NABA 2014 Roberto DADDA
17

18. Order
Dada or Dadaism was an art movement of the
European avant-garde in the early 20th century.
WEB DESIGN NABA 2014 Roberto DADDA
18

19. Order
WEB DESIGN NABA 2014 Roberto DADDA
19

20. Contrast, alikeness, stratification
• Contrast
• Use it to differentiate elements and make the
user focus where needed
• Alikeness
• Group with this gestalt law correlated and
homologous elements
• Stratification
• Visual layers help users to identify logical
correlation and background
Order
WEB DESIGN NABA 2014 Roberto DADDA
20

21. Structure and visual journey
• Structure
• Use graphics elements, shape and
position to make content structure and
elements correlations evident (Grid,
alignment, panes…)
• Visual journey
• Give to the customer the possibility of
perceiving interaction as a logical journey
easy to find and to remember.
Order
WEB DESIGN NABA 2014 Roberto DADDA
21

22. Order
WEB DESIGN NABA 2014 Roberto DADDA
22

23. Consistence & contest
• Consistence
• Let’s call the same elements with
the same names, symbols, colors,
shapes…
• Context
• Adapt symbols to the contest and
to the attended user’s
Order
WEB DESIGN NABA 2014 Roberto DADDA
23

24. Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda
Order
WEB DESIGN NABA 2014 Roberto DADDA
24