WEB DESIGNMater of Arts in Communication Design
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 2
Use of colors Phisiological factors
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 3
Colors influence each other
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 4
Avoid…• Putting togheter saturated colour far in the spectrum• Focusing becomes difficult!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 5 Color usage
Testo blu su fondo rosso
Testo blu
WEB DESIGN NABA 2014 Roberto DADDA
In case use BORDERS
Color usage 6
WEB DESIGN NABA 2014 Roberto DADDA 7 Color usage
WEB DESIGN NABA 2014 Roberto DADDAColor usage 8
WEB DESIGN NABA 2014 Roberto DADDAColor usage 9
WEB DESIGN NABA 2014 Roberto DADDAColor usage 10
WEB DESIGN NABA 2014 Roberto DADDAColor usage 11
WEB DESIGN NABA 2014 Roberto DADDA
Make experiments!
Color usage 12
WEB DESIGN NABA 2014 Roberto DADDA 13
Our brain likes complentary colors togheter
Color usage
red
green
violet
jellow
orange
blue
WEB DESIGN NABA 2014 Roberto DADDA 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 15 Color usage
WEB DESIGN NABA 2014 Roberto DADDA
Contrast 3:1 minimum
Color usage 16
Contrast is the difference in luminance and/or color that makes an object (or its representation in an image or display) distinguishable.
WEB DESIGN NABA 2014 Roberto DADDA 17
Consider disabilities• As an example COLOR BLINDNES• 8% of european males• 0.4% of european females
Color usage
John
Dal
ton
WEB DESIGN NABA 2014 Roberto DADDA 18
They see colors!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 19 Color usage
WEB DESIGN NABA 2014 Roberto DADDA 20Color usage
WEB DESIGN NABA 2014 Roberto DADDA 21
http://colorfilter.wickline.org/
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 22 Color usage
WEB DESIGN NABA 2014 Roberto DADDAColor usage 23
WEB DESIGN NABA 2014 Roberto DADDA 24
Use of colors Cognitive factors
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 25
Few meaningful colors: 3 to 6!
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 26Color usage
WEB DESIGN NABA 2014 Roberto DADDA 27 Color usage
WEB DESIGN NABA 2014 Roberto DADDA
Semantic ofcolors
Color usage 28
"Semantic." Merriam-Webster.com. Merriam-Webster, n.d. Web. 9 Feb. 2014. <http://www.merriam-webster.com/dictionary/semantic>.
WEB DESIGN NABA 2014 Roberto DADDA 29
Standard associations• Give color a meaning• Use the same color for
conform elements
Color usage
"Conform." Merriam-Webster.com. Merriam-Webster, n.d. Web. 9 Feb. 2014. <http://www.merriam-webster.com/dictionary/conform>.
WEB DESIGN NABA 2014 Roberto DADDA 30
Attention!
• Clear saturated colors gets attention
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 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 32 Color usage
Michel Eugène Chevreul(31 August 1786 – 9 April 1889)
WEB DESIGN NABA 2014 Roberto DADDAColor usage 33
Manufacture des Gobelins, Paris. Faubourg Saint Marcel
WEB DESIGN NABA 2014 Roberto DADDAColor usage 34
Sir William Henry Perkin, (12 March 1838 – 14 July 1907)
WEB DESIGN NABA 2014 Roberto DADDA 35 Color usage
WEB DESIGN NABA 2014 Roberto DADDAColor usage 36
WEB DESIGN NABA 2014 Roberto DADDAColor usage 37
WEB DESIGN NABA 2014 Roberto DADDAColor usage 38
WEB DESIGN NABA 2014 Roberto DADDAColor usage 39
WEB DESIGN NABA 2014 Roberto DADDAColor usage 40
WEB DESIGN NABA 2014 Roberto DADDAColor usage 41
WEB DESIGN NABA 2014 Roberto DADDAColor usage 42
WEB DESIGN NABA 2014 Roberto DADDA
Warm and cold colors
Color usage 43
• Near• Urgent• Action• Needs an answer
• Far• Calm• Status infos
WEB DESIGN NABA 2014 Roberto DADDA 44
Advance & retrocede
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 45
Semantic
• RED• Stop• Warm• Fire
• YELLOW• Attention• Slow down
• GREEN• Go on• OK• Safety• Nature
• GREY & WHITE• Neutral
Color usage
WEB DESIGN NABA 2014 Roberto DADDA 46 Color usage
STOP
AVANTI
Pericolo!
USCITA
WEB DESIGN NABA 2014 Roberto DADDAColor usage 47
WEB DESIGN NABA 2014 Roberto DADDAColor usage 48
WEB DESIGN NABA 2014 Roberto DADDAColor usage 49
WEB DESIGN NABA 2014 Roberto DADDAColor usage 50
WEB DESIGN NABA 2014 Roberto DADDAColor usage 51
Roberto Dadda
[email protected]+39 338 775 22 03Twitter, facebook, linkedin: robertodadda
Top Related