The Art of Colors A few tips for user interface designers by elisa giaccardi [email_address]

Let’s warm up !

Let’s 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

Hue

Brilliance how light or dark a color is

Brilliance

Saturation the level and mixture of white , black , grey or complimentary included in colors

Saturation

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!

Wasn’t 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 ?

It’s about relationships

Dynamic relationship

Dynamic-static relationship

Static relationship

It’s a matter of contrast

It’s 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

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

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

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

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

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 http://www.uxmatters.com/ Pabini, Gabriel-Petit Applying Color Theory to Digital Displays http://www.uxmatters.com/

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/

Slides available at