The Art Of Colors

66,288 views
64,224 views

Published on

Published in: Technology, Art & Photos, Design
23 Comments
152 Likes
Statistics
Notes
No Downloads
Views
Total views
66,288
On SlideShare
0
From Embeds
0
Number of Embeds
27,372
Actions
Shares
0
Downloads
3,719
Comments
23
Likes
152
Embeds 0
No embeds

No notes for slide
  • 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

    ×