Hide Notes 

Slide 1: The Art of Colors A few tips for user interface designers by elisa giaccardi elisa.giaccardi@colorado.edu
Slide 2: Let’s warm up !
Slide 3: Let’s start with some basics
Slide 4: There are two color systems
Slide 5: Additive Subtractive red + green + blue = white magenta + yellow + cyan = black
Slide 6: UI designers use the additive system
Slide 7: What is this jargon ? hue brilliance saturation
Slide 8: Hue name and properties of a color that enables it to be perceived
Slide 9: Brilliance how light or dark a color is
Slide 10: Saturation the level and mixture of white, black, grey or complimentary included in colors
Slide 11: What are these ? primary secondary tertiary colors
Slide 12: Learn the color wheel
Slide 13: Another way to visualize
Slide 14: Another way to visualize
Slide 15: Primary colors
Slide 16: Secondary colors
Slide 17: Tertiary colors
Slide 18: Analogous colors
Slide 19: Opposite colors are complementary
Slide 20: Combinations of opposite or analogous colors are harmonic
Slide 21: Now you know the jargon too!
Slide 22: Wasn’t it additive ?
Slide 23: Web color wheel
Slide 24: Do colors have personality ?
Slide 26: What about this orange ? © Edward Burtynsky
Slide 27: How about this yellow ? © Philip-Lorca diCorcia
Slide 28: And what about this green ? © Cindy Sherman
Slide 29: It’s about relationships
Slide 30: Dynamic relationship
Slide 31: Dynamic-static relationship
Slide 32: Static relationship
Slide 33: It’s a matter of contrast
Slide 38: It’s about balance
Slide 41: Think with your eyes !
Slide 42: Color palette tips & tools
Slide 43: Strive for harmony
Slide 44: Be mindful of contrast effects
Slide 45: Understand color dominance
Slide 47: Rules of thumb for UI designers
Slide 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
Slide 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
Slide 50: Use color for identification, grouping, and emphasis • Relate visual elements • Demarcate different areas • Highlight important task-related information
Slide 51: Use color associations in expressing state information • Be consistent with job-related color associations • Learn about cultural color associations
Slide 52: Indicate availability using color or value • For links • For controls • For icons • For windows
Slide 53: So me good r eading s
Slide 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/
Slide 55: Slides available at