The Art Of Colors

of 55 /55
The Art of Colors A few tips for user interface designers by elisa giaccardi [email protected]

Embed Size (px)



Transcript of The Art Of Colors

  • The Art of Colors A few tips for user interface designers by elisa giaccardi [email_address]
  • Lets warm up !
  • Lets start with some basics
  • There are two color systems
  • Additive Subtractive red + green + blue = white magenta + yellow + cyan = black
  • UI designers use the additive system
  • What is this jargon ? hue brilliance saturation
    • Hue
    name and properties of a color that enables it to be perceived
    • Brilliance
    how light or dark a color is
    • Saturation
    the level and mixture of white , black , grey or complimentary included in colors
  • What are these ? primary secondary tertiary colors
  • Learn the color wheel
  • Another way to visualize
  • Another way to visualize
  • Primary colors
  • Secondary colors
  • Tertiary colors
  • Analogous colors
  • Opposite colors are complementary
  • Combinations of opposite or analogous colors are harmonic
  • Now you know the jargon too!
  • Wasnt it additive ?
  • Web color wheel
  • Do colors have personality ?
  • Edward Burtynsky What about this orange ?
  • Philip-Lorca diCorcia How about this yellow ?
  • Cindy Sherman And what about this green ?
  • Its about relationships
  • Dynamic relationship
  • Dynamic-static relationship
  • Static relationship
  • Its a matter of contrast
  • Its about balance
  • Think with your eyes !
  • Color palette tips & tools
  • Strive for harmony
  • Be mindful of contrast effects
  • Understand color dominance
  • Rules of thumb for UI designers
  • 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
  • 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
  • Use color for identification, grouping, and emphasis
    • Relate visual elements
    • Demarcate different areas
    • Highlight important task-related information
  • Use color associations in expressing state information
    • Be consistent with job-related color associations
    • Learn about cultural color associations
  • Indicate availability using color or value
    • For links
    • For controls
    • For icons
    • For windows
  • Some good readings
    • Itten, Johannes
    • The Art of Color
    • New York: John Wiley & Sons, 1974
    • Pabini, Gabriel-Petit
    • Color Theory for Digital Displays
    • Pabini, Gabriel-Petit
    • Applying Color Theory to Digital Displays
  • Slides available at