<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>
