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

www.dadda.itroberto@dadda.it+39 338 775 22 03Twitter, facebook, linkedin: robertodadda