#ff0000, #ffffff & #0000ff

Monday, 28 May 2012

Title
Who am I and why am I here?

Monday, 28 May 2012

I studied art and design, tried to get into VFX and then worked in video...
white - clean, sterile, perfection
red - anger, passion, sexual
green - decay, health, nature
blue - cold, healthy, knowle...
Red
South Africa - mourning
Green
China - infidelity
Purple
Thailand - mourning
Black
East - Wealth

Monday, 28 May 2012

C...
Monday, 28 May 2012

Cave paintings. Primative man slapping paint around on a bit of stone but it was a form of communicat...
Monday, 28 May 2012

Age of target audience is important
Children like big, bold, primary colours, adults tend to go for m...
Monday, 28 May 2012

RGB - Additive colours. They are emitted from monitors/TVs/projectors/glowing thingy’s and are projec...
Monday, 28 May 2012

RGB - additive. ooooo purty. Its like some cosmic ride maaaaaaan.
We can see the colours blend togeth...
Monday, 28 May 2012

CMYK - Subtractive colours. Used in print and called subtractive because light hits the colour and al...
Monday, 28 May 2012

CMYK - being all subtractive n sheeet
Monday, 28 May 2012

RGB and CMY put together
Monday, 28 May 2012

oooo it’s a colour wheel
Monday, 28 May 2012

If we extend the colour wheel into 3d space we can see this
All colours can be expressed with HSV (ak...
Hue

Monday, 28 May 2012

Hue Laurie. ho ho ho.
Monday, 28 May 2012

Hue is the colour (inc shades) of colour. When we say red, green, blue etc... we mean the hue
In the ...
Monday, 28 May 2012

Jean Capeinick - Nature morte aux oranges et citrons
Predominate hues are yellow and orange
Monday, 28 May 2012

Benjamin Williams Leader - A Welsh Cornfield
Uses primary colours (red, yellow and blue) as well as gr...
Saturation

Monday, 28 May 2012
Monday, 28 May 2012

Cristofano Allori - Judith with the head of Holofernes
Rich artists could afford more saturated paint...
Monday, 28 May 2012

Jehan Georges - The fortune Teller
This shows contrast between Saturation and value. The eye will lin...
Value

Monday, 28 May 2012
Monday, 28 May 2012

Value - Brightness of the colour
Although I’ve used black here it could be any colour
Monday, 28 May 2012

Goya - The shooting of May 3rd 1808
Very high value in the main figure and he is surrounded by dark/lo...
Monday, 28 May 2012

Painter wheel with HSV
Use of colour on the web

Monday, 28 May 2012
Monday, 28 May 2012

2nd time showing
Going to refer back to the fact kids like big colours
Monday, 28 May 2012

Readability
Monday, 28 May 2012

“undesign” trend http://sixrevisions.com/web_design/undesign-portfolio-website/
Still has colour but ...
Monday, 28 May 2012

Branding
Blue, white and Yellow. All used within the logo and replicated across the site.
Monday, 28 May 2012

Branding
<---------------- Whaaaaaa?

Monday, 28 May 2012

FAIL!
Monday, 28 May 2012

Navigation and grouping
Monday, 28 May 2012

Well sorted layout. Reflects the same look as their physical versions as web design/layout is based on...
Monday, 28 May 2012

All broadsheets use colour for sections. Helps with navigation and area identification
The Guardian ev...
Monday, 28 May 2012

Vibrant. Strong colours to be eye catching
Monday, 28 May 2012

Overuse of strong colours to be eye catching
Tabloids try to be your friend
Monday, 28 May 2012

Very serious papers by golly
Pink on the FT to reflect its physical paper
Monday, 28 May 2012

No colours other than the rather strange ones used on rollovers
Vhaat is dat orange dat the WSJ is ve...
Accessibility

Monday, 28 May 2012

...and I quote “If colour alone is used to convey information, people who cannot diffe...
Monday, 28 May 2012

Colourblindness
Common in men - about one in 20
Far fewer women - around one in 200
This graphic is f...
<---------------- Whaaaaaa?
<---------------- Double whaaaaa?

Monday, 28 May 2012

colour contrast fail! The text is too ...
Monday, 28 May 2012

Tools to aid with colour accessibility
http://snook.ca/technical/colour_contrast/colour.html
Don't rely on colour alone
www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-colour.html

Monday, 28 May 20...
Monday, 28 May 2012

In conclusion, colour is a very important part of design. Its emotional, it can convey meaning but it...
Monday, 28 May 2012

Any questions? (I hope not)
Upcoming SlideShare
Loading in...5
×

#ff0000, #ffffff & #0000ff

152

Published on

David Kirkby Did an excellent talk on the imact of Colour on design for http://fesuffolk.co.uk on 28 May 2012

Published in: Design, Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
152
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "#ff0000, #ffffff & #0000ff"

  1. 1. #ff0000, #ffffff & #0000ff Monday, 28 May 2012 Title
  2. 2. Who am I and why am I here? Monday, 28 May 2012 I studied art and design, tried to get into VFX and then worked in video and DTP before web. I like painting, colours, art, texture and long walks in the moonlight but the police have put me under a curfew after the last time.
  3. 3. white - clean, sterile, perfection red - anger, passion, sexual green - decay, health, nature blue - cold, healthy, knowledge orange - deceit, aggression, action yellow - sickness, richness, caution black - moody, serious, evil Snooooore.... Monday, 28 May 2012 Pink was a manly colour up to the 1900s as it was close to red Virgin Mary wears blue in paintings as it was more feminine White was the colour of mourning for medieval queens Purple - over 70% prepubescent children preferred purple
  4. 4. Red South Africa - mourning Green China - infidelity Purple Thailand - mourning Black East - Wealth Monday, 28 May 2012 Cultural differences around the world. Be careful when selecting colours
  5. 5. Monday, 28 May 2012 Cave paintings. Primative man slapping paint around on a bit of stone but it was a form of communication.
  6. 6. Monday, 28 May 2012 Age of target audience is important Children like big, bold, primary colours, adults tend to go for more subtle tones (frakking Disney go and stick in muted colours on CP homepage just to throw a spanner in the works)
  7. 7. Monday, 28 May 2012 RGB - Additive colours. They are emitted from monitors/TVs/projectors/glowing thingy’s and are projecting colour. Websites will use RGB for graphics
  8. 8. Monday, 28 May 2012 RGB - additive. ooooo purty. Its like some cosmic ride maaaaaaan. We can see the colours blend together to make different colours
  9. 9. Monday, 28 May 2012 CMYK - Subtractive colours. Used in print and called subtractive because light hits the colour and all of it is absorbed except for that colour
  10. 10. Monday, 28 May 2012 CMYK - being all subtractive n sheeet
  11. 11. Monday, 28 May 2012 RGB and CMY put together
  12. 12. Monday, 28 May 2012 oooo it’s a colour wheel
  13. 13. Monday, 28 May 2012 If we extend the colour wheel into 3d space we can see this All colours can be expressed with HSV (aka HSB) Hue Saturation Value/Hue Saturation Brightness
  14. 14. Hue Monday, 28 May 2012 Hue Laurie. ho ho ho.
  15. 15. Monday, 28 May 2012 Hue is the colour (inc shades) of colour. When we say red, green, blue etc... we mean the hue In the visible spectrum there’s no brown, pink or magenta
  16. 16. Monday, 28 May 2012 Jean Capeinick - Nature morte aux oranges et citrons Predominate hues are yellow and orange
  17. 17. Monday, 28 May 2012 Benjamin Williams Leader - A Welsh Cornfield Uses primary colours (red, yellow and blue) as well as green
  18. 18. Saturation Monday, 28 May 2012
  19. 19. Monday, 28 May 2012 Cristofano Allori - Judith with the head of Holofernes Rich artists could afford more saturated paints
  20. 20. Monday, 28 May 2012 Jehan Georges - The fortune Teller This shows contrast between Saturation and value. The eye will linger longer on the white in the middle, the red robes will draw the eye but the main focus is the teller.
  21. 21. Value Monday, 28 May 2012
  22. 22. Monday, 28 May 2012 Value - Brightness of the colour Although I’ve used black here it could be any colour
  23. 23. Monday, 28 May 2012 Goya - The shooting of May 3rd 1808 Very high value in the main figure and he is surrounded by dark/low value Its helping to make him ‘pop’ as the main focus of the image
  24. 24. Monday, 28 May 2012 Painter wheel with HSV
  25. 25. Use of colour on the web Monday, 28 May 2012
  26. 26. Monday, 28 May 2012 2nd time showing Going to refer back to the fact kids like big colours
  27. 27. Monday, 28 May 2012 Readability
  28. 28. Monday, 28 May 2012 “undesign” trend http://sixrevisions.com/web_design/undesign-portfolio-website/ Still has colour but used sparingly.
  29. 29. Monday, 28 May 2012 Branding Blue, white and Yellow. All used within the logo and replicated across the site.
  30. 30. Monday, 28 May 2012 Branding
  31. 31. <---------------- Whaaaaaa? Monday, 28 May 2012 FAIL!
  32. 32. Monday, 28 May 2012 Navigation and grouping
  33. 33. Monday, 28 May 2012 Well sorted layout. Reflects the same look as their physical versions as web design/layout is based on print
  34. 34. Monday, 28 May 2012 All broadsheets use colour for sections. Helps with navigation and area identification The Guardian even colours its own logo but sport and 2012 are both green Branding confusing? Not really, they rely on the text to convey the brand
  35. 35. Monday, 28 May 2012 Vibrant. Strong colours to be eye catching
  36. 36. Monday, 28 May 2012 Overuse of strong colours to be eye catching Tabloids try to be your friend
  37. 37. Monday, 28 May 2012 Very serious papers by golly Pink on the FT to reflect its physical paper
  38. 38. Monday, 28 May 2012 No colours other than the rather strange ones used on rollovers Vhaat is dat orange dat the WSJ is vearink, darlink?
  39. 39. Accessibility Monday, 28 May 2012 ...and I quote “If colour alone is used to convey information, people who cannot differentiate between certain colours and users with devices that have non-colour or non-visual displays will not receive the information. When foreground and background colours are too close to the same hue, they may not provide sufficient contrast when viewed using monochrome displays or by people with different types of colour deficits.”
  40. 40. Monday, 28 May 2012 Colourblindness Common in men - about one in 20 Far fewer women - around one in 200 This graphic is from the Ishihara test to determine colour blindness
  41. 41. <---------------- Whaaaaaa? <---------------- Double whaaaaa? Monday, 28 May 2012 colour contrast fail! The text is too damn hard to read. While they may not feel that the statement of ownership is not important, its still information that is hard to read. Someone may actually want to read what it says.
  42. 42. Monday, 28 May 2012 Tools to aid with colour accessibility http://snook.ca/technical/colour_contrast/colour.html
  43. 43. Don't rely on colour alone www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-without-colour.html Monday, 28 May 2012 another quote “Colour is an important asset in design of Web content, enhancing its aesthetic appeal, its usability, and its accessibility. However, some users have difficulty perceiving colour. People with partial sight often experience limited colour vision, and many older users do not see colour well. In addition, people using text-only, limited-colour or monochrome displays and browsers will be unable to access information that is presented only in colour.”
  44. 44. Monday, 28 May 2012 In conclusion, colour is a very important part of design. Its emotional, it can convey meaning but it can also be abused. Good grief, thats vague isn’t it?
  45. 45. Monday, 28 May 2012 Any questions? (I hope not)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×