Mater of Arts in Communication Design

WEB DESIGN
Color usage
Use of colors
Phisiological factors

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

2
Colors influence each other

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

3
Avoid…
• Putting togheter saturated colour far in the spectrum
• Focusing becomes difficult!

Color usage

WEB DESIGN NABA...
Testo blu su fondo rosso

Testo blu
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

5
In case use
BORDERS

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

6
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

7
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

8
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

9
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

10
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

11
Make experiments!

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

12
Our brain likes complentary colors
togheter
red

blue

green

orange
jellow
violet

Color usage

WEB DESIGN NABA 2014 Robe...
Colors for text
• Colors of text and background are VERY important
• TEXT better light colors in center if spectrum
• BACK...
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

15
Contrast 3:1 minimum
Contrast is the difference in luminance
and/or color that makes an object (or
its representation in a...
Consider disabilities

John Dalton

• As an example COLOR BLINDNES
• 8% of european males
• 0.4% of european females

Colo...
They see colors!

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

18
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

19
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

20
http://colorfilter.wickline.org/

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

21
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

22
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

23
Use of colors
Cognitive factors

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

24
Few meaningful colors: 3 to 6!

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

25
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

26
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

27
Semantic of
colors

"Semantic." Merriam-Webster.com. Merriam-Webster, n.d. Web. 9 Feb. 2014.
<http://www.merriam-webster.c...
Standard associations
• Give color a meaning
• Use the same color for
conform elements

"Conform." Merriam-Webster.com. Me...
Attention!
• Clear saturated colors gets
attention

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

30
Armony of colors
• How decide witch colors stay well
together?
• Many opinions, few certainties.
• The Chevreul (1839) the...
Michel Eugène Chevreul
(31 August 1786 – 9 April 1889)
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

32
Manufacture des Gobelins, Paris.
Faubourg Saint Marcel

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

33
Sir William Henry Perkin,
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

(12 March 1838 – 14 July 1907)

34
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

35
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

36
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

37
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

38
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

39
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

40
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

41
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

42
Warm and cold colors
•
•
•
•

Near
Urgent
Action
Needs an answer

• Far
• Calm
• Status infos

Color usage

WEB DESIGN NAB...
Advance & retrocede

Color usage

WEB DESIGN NABA 2014 Roberto DADDA

44
Semantic
• RED
• Stop
• Warm
• Fire

• YELLOW
• Attention
• Slow down

Color usage

• GREEN
•
•
•
•

Go on
OK
Safety
Natur...
STOP

AVANTI

USCITA
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

46
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

47
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

48
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

49
Color usage

WEB DESIGN NABA 2014 Roberto DADDA

50
Roberto Dadda
www.dadda.it
roberto@dadda.it
+39 338 775 22 03
Twitter, facebook, linkedin: robertodadda

Color usage

WEB ...
Upcoming SlideShare
Loading in …5
×

Color 2

562 views

Published on

Elements of colors usage for web designer

Published in: Design
  • Be the first to comment

  • Be the first to like this

Color 2

  1. 1. Mater of Arts in Communication Design WEB DESIGN Color usage
  2. 2. Use of colors Phisiological factors Color usage WEB DESIGN NABA 2014 Roberto DADDA 2
  3. 3. Colors influence each other Color usage WEB DESIGN NABA 2014 Roberto DADDA 3
  4. 4. Avoid… • Putting togheter saturated colour far in the spectrum • Focusing becomes difficult! Color usage WEB DESIGN NABA 2014 Roberto DADDA 4
  5. 5. Testo blu su fondo rosso Testo blu Color usage WEB DESIGN NABA 2014 Roberto DADDA 5
  6. 6. In case use BORDERS Color usage WEB DESIGN NABA 2014 Roberto DADDA 6
  7. 7. Color usage WEB DESIGN NABA 2014 Roberto DADDA 7
  8. 8. Color usage WEB DESIGN NABA 2014 Roberto DADDA 8
  9. 9. Color usage WEB DESIGN NABA 2014 Roberto DADDA 9
  10. 10. Color usage WEB DESIGN NABA 2014 Roberto DADDA 10
  11. 11. Color usage WEB DESIGN NABA 2014 Roberto DADDA 11
  12. 12. Make experiments! Color usage WEB DESIGN NABA 2014 Roberto DADDA 12
  13. 13. Our brain likes complentary colors togheter red blue green orange jellow violet Color usage WEB DESIGN NABA 2014 Roberto DADDA 13
  14. 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. 15. Color usage WEB DESIGN NABA 2014 Roberto DADDA 15
  16. 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. 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. 18. They see colors! Color usage WEB DESIGN NABA 2014 Roberto DADDA 18
  19. 19. Color usage WEB DESIGN NABA 2014 Roberto DADDA 19
  20. 20. Color usage WEB DESIGN NABA 2014 Roberto DADDA 20
  21. 21. http://colorfilter.wickline.org/ Color usage WEB DESIGN NABA 2014 Roberto DADDA 21
  22. 22. Color usage WEB DESIGN NABA 2014 Roberto DADDA 22
  23. 23. Color usage WEB DESIGN NABA 2014 Roberto DADDA 23
  24. 24. Use of colors Cognitive factors Color usage WEB DESIGN NABA 2014 Roberto DADDA 24
  25. 25. Few meaningful colors: 3 to 6! Color usage WEB DESIGN NABA 2014 Roberto DADDA 25
  26. 26. Color usage WEB DESIGN NABA 2014 Roberto DADDA 26
  27. 27. Color usage WEB DESIGN NABA 2014 Roberto DADDA 27
  28. 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. 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. 30. Attention! • Clear saturated colors gets attention Color usage WEB DESIGN NABA 2014 Roberto DADDA 30
  31. 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. 32. Michel Eugène Chevreul (31 August 1786 – 9 April 1889) Color usage WEB DESIGN NABA 2014 Roberto DADDA 32
  33. 33. Manufacture des Gobelins, Paris. Faubourg Saint Marcel Color usage WEB DESIGN NABA 2014 Roberto DADDA 33
  34. 34. Sir William Henry Perkin, Color usage WEB DESIGN NABA 2014 Roberto DADDA (12 March 1838 – 14 July 1907) 34
  35. 35. Color usage WEB DESIGN NABA 2014 Roberto DADDA 35
  36. 36. Color usage WEB DESIGN NABA 2014 Roberto DADDA 36
  37. 37. Color usage WEB DESIGN NABA 2014 Roberto DADDA 37
  38. 38. Color usage WEB DESIGN NABA 2014 Roberto DADDA 38
  39. 39. Color usage WEB DESIGN NABA 2014 Roberto DADDA 39
  40. 40. Color usage WEB DESIGN NABA 2014 Roberto DADDA 40
  41. 41. Color usage WEB DESIGN NABA 2014 Roberto DADDA 41
  42. 42. Color usage WEB DESIGN NABA 2014 Roberto DADDA 42
  43. 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. 44. Advance & retrocede Color usage WEB DESIGN NABA 2014 Roberto DADDA 44
  45. 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. 46. STOP AVANTI USCITA Color usage WEB DESIGN NABA 2014 Roberto DADDA 46
  47. 47. Color usage WEB DESIGN NABA 2014 Roberto DADDA 47
  48. 48. Color usage WEB DESIGN NABA 2014 Roberto DADDA 48
  49. 49. Color usage WEB DESIGN NABA 2014 Roberto DADDA 49
  50. 50. Color usage WEB DESIGN NABA 2014 Roberto DADDA 50
  51. 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

×