Elements of colors usage for web designer

1. Mater of Arts in Communication Design
WEB DESIGN
Color usage

2. Use of colors
Phisiological factors
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
2

3. Colors influence each other
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
3

4. Avoid…
• Putting togheter saturated colour far in the spectrum
• Focusing becomes difficult!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
4

5. Testo blu su fondo rosso
Testo blu
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
5

6. In case use
BORDERS
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
6

7. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
7

8. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
8

9. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
9

10. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
10

11. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
11

12. Make experiments!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
12

13. Our brain likes complentary colors
togheter
red
blue
green
orange
jellow
violet
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
13

14. Colors for text
• Colors of text and background are VERY important
• TEXT better light colors in center if spectrum
• BACKGROUND better dark colors in the extremes of spectrum
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
14

15. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
15

16. Contrast 3:1 minimum
Contrast is the difference in luminance
and/or color that makes an object (or
its representation in an image or
display) distinguishable.
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
16

17. Consider disabilities
John Dalton
• As an example COLOR BLINDNES
• 8% of european males
• 0.4% of european females
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
17

18. They see colors!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
18

19. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
19

20. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
20

21. http://colorfilter.wickline.org/
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
21

22. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
22

23. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
23

24. Use of colors
Cognitive factors
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
24

25. Few meaningful colors: 3 to 6!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
25

26. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
26

27. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
27

28. Semantic of
colors
"Semantic." Merriam-Webster.com. Merriam-Webster, n.d. Web. 9 Feb. 2014.
<http://www.merriam-webster.com/dictionary/semantic>.
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
28

29. Standard associations
• Give color a meaning
• Use the same color for
conform elements
"Conform." Merriam-Webster.com. Merriam-Webster, n.d.
Web. 9 Feb. 2014. <http://www.merriamwebster.com/dictionary/conform>.
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
29

30. Attention!
• Clear saturated colors gets
attention
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
30

31. Armony of colors
• How decide witch colors stay well
together?
• Many opinions, few certainties.
• The Chevreul (1839) theory says that color
adiacent or opposite in the wheel stay
well togheter
• Nothing demonstrated formally, but wide
usage in art!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
31

32. Michel Eugène Chevreul
(31 August 1786 – 9 April 1889)
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
32

33. Manufacture des Gobelins, Paris.
Faubourg Saint Marcel
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
33

34. Sir William Henry Perkin,
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
(12 March 1838 – 14 July 1907)
34

35. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
35

36. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
36

37. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
37

38. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
38

39. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
39

40. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
40

41. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
41

42. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
42

43. Warm and cold colors
•
•
•
•
Near
Urgent
Action
Needs an answer
• Far
• Calm
• Status infos
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
43

44. Advance & retrocede
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
44

45. Semantic
• RED
• Stop
• Warm
• Fire
• YELLOW
• Attention
• Slow down
Color usage
• GREEN
•
•
•
•
Go on
OK
Safety
Nature
• GREY & WHITE
• Neutral
WEB DESIGN NABA 2014 Roberto DADDA
45

46. STOP
AVANTI
USCITA
Color usage
WEB DESIGN NABA 2014 Roberto DADDA
46

47. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
47

48. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
48

49. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
49

50. Color usage
WEB DESIGN NABA 2014 Roberto DADDA
50

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