<ul><li> The Art of Colors A few tips for user interface designers by elisa giaccardi [email_address] </li><li> Lets warm up ! </li><li> Lets start with some basics </li><li> There are two color systems </li><li> Additive Subtractive red + green + blue = white magenta + yellow + cyan = black </li><li> UI designers use the additive system </li><li> What is this jargon ? hue brilliance saturation </li><li><ul><li>Hue </li></ul>name and properties of a color that enables it to be perceived </li><li><ul><li>Brilliance </li></ul>how light or dark a color is </li><li><ul><li>Saturation </li></ul>the level and mixture of white , black , grey or complimentary included in colors </li><li> What are these ? primary secondary tertiary colors </li><li> Learn the color wheel </li><li> Another way to visualize </li><li> Another way to visualize </li><li> Primary colors </li><li> Secondary colors </li><li> Tertiary colors </li><li> Analogous colors </li><li> Opposite colors are complementary </li><li> Combinations of opposite or analogous colors are harmonic </li><li> Now you know the jargon too! </li><li> Wasnt it additive ? </li><li> Web color wheel </li><li> Do colors have personality ? </li><li> Edward Burtynsky What about this orange ? </li><li> Philip-Lorca diCorcia How about this yellow ? </li><li> Cindy Sherman And what about this green ? </li><li> Its about relationships </li><li> Dynamic relationship </li><li> Dynamic-static relationship </li><li> Static relationship </li><li> Its a matter of contrast </li><li> Its about balance </li><li> Think with your eyes ! </li><li> Color palette tips & tools </li><li> Strive for harmony </li><li> Be mindful of contrast effects </li><li> Understand color dominance </li><li> Rules of thumb for UI designers </li><li> 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></li><li> 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></li><li> 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></li><li> 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></li><li> 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></li><li> Some good readings </li><li><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></li><li> Slides available at </li></ul>
