Your SlideShare is downloading. ×
0
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
The Art Of Colors
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Art Of Colors

47,357

Published on

Published in: Technology, Art & Photos, Design
22 Comments
137 Likes
Statistics
Notes
No Downloads
Views
Total Views
47,357
On Slideshare
0
From Embeds
0
Number of Embeds
33
Actions
Shares
0
Downloads
3,633
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

    ×