The Art Of Colors

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

Brilliance
how light or dark a color is

Saturation
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

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 ?

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

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

Indicate availability using color or value
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/

Slides available at

http://moodle.apc.edu.ph	7668
http://visualcommunication.tistory.com	495
http://nso.district287.org	283
http://theteachermademedoit.pbworks.com	210
http://secmoodle.district287.org	205
http://burakargin.blogspot.com	108
http://www.slideshare.net	101
http://phobosmarketing.blogspot.com	99
http://boowoon.egloos.com	86
http://dtpword.pbworks.com	80
http://inglesiecc.wordpress.com	76
http://artsandcraftsbybea.blogspot.com.es	58
http://prezi4u.tistory.com	52
http://www.alaeditions.org	43
http://artsandcraftsbybea.blogspot.com	27
http://www.hanrss.com	25
http://www.ala.org	21
http://blog.livedoor.jp	21
http://blendedschools.blackboard.com	21
http://www.slidemagnet.com	18
http://adguer.blogspot.com	17
http://www.flashquix.com	15
http://valoriprimilab.blogspot.com	15
http://localhost	15
http://wpmu.bionicteaching.com	13
http://ang-dibujoeso.blogspot.com	13
http://www.adguer.com	11
http://philosophyrecycled.blogspot.com	10
http://www.cs.ubbcluj.ro	9
http://cvcc.blackboard.com	9
http://blog.joins.com	8
http://techinedstreyle.wikispaces.com	7
http://www.elearning.sek.es	7
http://amolafoto.blogspot.com	6
http://coloresdelverano.blogspot.com	6
http://pinterest.com	6
http://neocoin.net	6
http://webdevs.eversun.ph	4
http://database4kids.blogspot.com	4
http://ang-dibujoeso.blogspot.com.es	4
https://elearning.uh.edu	4
https://cvcc.blackboard.com	4
https://unis.blackboard.com	3
http://mycourse.highbury.ac.uk	3
http://rubencastrillo.blogspot.com	3
http://moin.neocoin.net	3
http://www.burakargin.blogspot.com	3
http://115.112.206.131	2
http://www.techgig.com	2
http://wallacesvault.blogspot.com	2
http://slidemagnet.com	2

The Art Of Colors

by Elisa Giaccardi

Accessibility

Categories

Upload Details

Usage Rights

86 Embeds 9,957

Statistics

The Art Of Colors Presentation Transcript

The Art Of Colors

by Elisa Giaccardi

Accessibility

Categories

Upload Details

Usage Rights

86 Embeds 9,957

Statistics

The Art Of Colors Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare