The Art of Colors A few tips for user interface designers by elisa giaccardi [email protected]
The Art Of Colors
Embed Size (px)
DESCRIPTION
Text 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
-
name and properties of a color that enables it to be perceived
-
how light or dark a color is
-
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
- 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
- Some good readings
-
- New York: John Wiley & Sons, 1974
- Color Theory for Digital Displays
- http://www.uxmatters.com/
- Applying Color Theory to Digital Displays
- http://www.uxmatters.com/
- Slides available at