Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

The Art Of Colors

74,375 views

Published on

Published in: Technology, Art & Photos, Design

The Art Of Colors

  1. The Art of Colors A few tips for user interface designers by elisa giaccardi [email_address]
  2. Let’s warm up !
  3. Let’s start with some basics
  4. There are two color systems
  5. Additive Subtractive red + green + blue = white magenta + yellow + cyan = black
  6. UI designers use the additive system
  7. What is this jargon ? hue brilliance saturation
  8. <ul><li>Hue </li></ul>name and properties of a color that enables it to be perceived
  9. <ul><li>Brilliance </li></ul>how light or dark a color is
  10. <ul><li>Saturation </li></ul>the level and mixture of white , black , grey or complimentary included in colors
  11. What are these ? primary secondary tertiary colors
  12. Learn the color wheel
  13. Another way to visualize
  14. Another way to visualize
  15. Primary colors
  16. Secondary colors
  17. Tertiary colors
  18. Analogous colors
  19. Opposite colors are complementary
  20. Combinations of opposite or analogous colors are harmonic
  21. Now you know the jargon too!
  22. Wasn’t it additive ?
  23. Web color wheel
  24. Do colors have personality ?
  25.  
  26. © Edward Burtynsky What about this orange ?
  27. © Philip-Lorca diCorcia How about this yellow ?
  28. © Cindy Sherman And what about this green ?
  29. It’s about relationships
  30. Dynamic relationship
  31. Dynamic-static relationship
  32. Static relationship
  33. It’s a matter of contrast
  34.  
  35.  
  36.  
  37.  
  38. It’s about balance
  39.  
  40.  
  41. Think with your eyes !
  42. Color palette tips & tools
  43. Strive for harmony
  44. Be mindful of contrast effects
  45. Understand color dominance
  46.  
  47. Rules of thumb for UI designers
  48. Ensure text readability through contrast <ul><li>Avoid the use of textures and pattern for backgrounds behind texts </li></ul><ul><li>Avoid contrasts that cause eye fatigue </li></ul><ul><li>Avoid color combinations that cause illusions when positioned together </li></ul>
  49. Enhance user experience <ul><li>Establish conventions and use color consistently </li></ul><ul><li>Use color both to support users’ tasks and for branding </li></ul><ul><li>Use color to enhance aesthetic appeal and user satisfaction </li></ul>
  50. Use color for identification, grouping, and emphasis <ul><li>Relate visual elements </li></ul><ul><li>Demarcate different areas </li></ul><ul><li>Highlight important task-related information </li></ul>
  51. Use color associations in expressing state information <ul><li>Be consistent with job-related color associations </li></ul><ul><li>Learn about cultural color associations </li></ul>
  52. Indicate availability using color or value <ul><li>For links </li></ul><ul><li>For controls </li></ul><ul><li>For icons </li></ul><ul><li>For windows </li></ul>
  53. Some good readings
  54. <ul><li>Itten, Johannes </li></ul><ul><li>The Art of Color </li></ul><ul><li>New York: John Wiley & Sons, 1974 </li></ul><ul><li>Pabini, Gabriel-Petit </li></ul><ul><li>Color Theory for Digital Displays </li></ul><ul><li>http://www.uxmatters.com/ </li></ul><ul><li>Pabini, Gabriel-Petit </li></ul><ul><li>Applying Color Theory to Digital Displays </li></ul><ul><li>http://www.uxmatters.com/ </li></ul>
  55. Slides available at

×