#ff0000, #ffffff & #0000ff
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

#ff0000, #ffffff & #0000ff

  • 208 views
Uploaded on

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

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

More in: Design , Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
208
On Slideshare
207
From Embeds
1
Number of Embeds
1

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 1

http://fesuffolk.herokuapp.com 1

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. #ff0000, #ffffff & #0000ff Monday, 28 May 2012 Title
  • 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. 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. 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. Monday, 28 May 2012 Cave paintings. Primative man slapping paint around on a bit of stone but it was a form of communication.
  • 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. 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. 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. 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. Monday, 28 May 2012 CMYK - being all subtractive n sheeet
  • 11. Monday, 28 May 2012 RGB and CMY put together
  • 12. Monday, 28 May 2012 oooo it’s a colour wheel
  • 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. Hue Monday, 28 May 2012 Hue Laurie. ho ho ho.
  • 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. Monday, 28 May 2012 Jean Capeinick - Nature morte aux oranges et citrons Predominate hues are yellow and orange
  • 17. Monday, 28 May 2012 Benjamin Williams Leader - A Welsh Cornfield Uses primary colours (red, yellow and blue) as well as green
  • 18. Saturation Monday, 28 May 2012
  • 19. Monday, 28 May 2012 Cristofano Allori - Judith with the head of Holofernes Rich artists could afford more saturated paints
  • 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. Value Monday, 28 May 2012
  • 22. Monday, 28 May 2012 Value - Brightness of the colour Although I’ve used black here it could be any colour
  • 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. Monday, 28 May 2012 Painter wheel with HSV
  • 25. Use of colour on the web Monday, 28 May 2012
  • 26. Monday, 28 May 2012 2nd time showing Going to refer back to the fact kids like big colours
  • 27. Monday, 28 May 2012 Readability
  • 28. Monday, 28 May 2012 “undesign” trend http://sixrevisions.com/web_design/undesign-portfolio-website/ Still has colour but used sparingly.
  • 29. Monday, 28 May 2012 Branding Blue, white and Yellow. All used within the logo and replicated across the site.
  • 30. Monday, 28 May 2012 Branding
  • 31. <---------------- Whaaaaaa? Monday, 28 May 2012 FAIL!
  • 32. Monday, 28 May 2012 Navigation and grouping
  • 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. 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. Monday, 28 May 2012 Vibrant. Strong colours to be eye catching
  • 36. Monday, 28 May 2012 Overuse of strong colours to be eye catching Tabloids try to be your friend
  • 37. Monday, 28 May 2012 Very serious papers by golly Pink on the FT to reflect its physical paper
  • 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. 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. 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. <---------------- 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. Monday, 28 May 2012 Tools to aid with colour accessibility http://snook.ca/technical/colour_contrast/colour.html
  • 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. 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. Monday, 28 May 2012 Any questions? (I hope not)