The Art Of Colors

  • 46,284 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
46,284
On Slideshare
0
From Embeds
0
Number of Embeds
31

Actions

Shares
Downloads
3,626
Comments
22
Likes
137

Embeds 0

No embeds

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. 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.
    • Hue
    name and properties of a color that enables it to be perceived
  • 9.
    • Brilliance
    how light or dark a color is
  • 10.
    • Saturation
    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
    • Avoid the use of textures and pattern for backgrounds behind texts
    • Avoid contrasts that cause eye fatigue
    • Avoid color combinations that cause illusions when positioned together
  • 49. Enhance user experience
    • Establish conventions and use color consistently
    • Use color both to support users’ tasks and for branding
    • Use color to enhance aesthetic appeal and user satisfaction
  • 50. Use color for identification, grouping, and emphasis
    • Relate visual elements
    • Demarcate different areas
    • Highlight important task-related information
  • 51. Use color associations in expressing state information
    • Be consistent with job-related color associations
    • Learn about cultural color associations
  • 52. Indicate availability using color or value
    • For links
    • For controls
    • For icons
    • For windows
  • 53. Some good readings
  • 54.
    • Itten, Johannes
    • The Art of Color
    • New York: John Wiley & Sons, 1974
    • Pabini, Gabriel-Petit
    • Color Theory for Digital Displays
    • http://www.uxmatters.com/
    • Pabini, Gabriel-Petit
    • Applying Color Theory to Digital Displays
    • http://www.uxmatters.com/
  • 55. Slides available at