The Art Of Colors

  • Published on
    21-Apr-2017

  • View
    71.169

  • Download
    1

Embed Size (px)

Transcript

  • The Art of ColorsA few tips for user interface designersby elisa giaccardielisa.giaccardi@colorado.edu

  • Lets warm up !

  • Lets start with some basics

  • There are two color systems

  • AdditiveSubtractivered + green + blue = whitemagenta + yellow + cyan = black

  • UI designers use the additive system

  • What is this jargon ?

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

  • Huename and properties of a color that enables it to be perceived

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

  • Brilliancehow lightor darka color is

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

  • Saturationthe level and mixture of white, black, grey or complimentary included in colors

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

  • What are these ?

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

  • 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 BurtynskyWhat about this orange ?

    Mixture of yellow and red. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation. In heraldry, orange is symbolic of strength and endurance. When diluted with black, declines into dull and withered brown. Dark orange can mean deceit and distrust.

  • Philip-Lorca diCorcia How about this yellow ?

    Yellow is the color of sunshine. Its associated with joy, happiness, intellect, and energy. Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy.Shades of yellow (when gray is added) are visually unappealing because they lose cheerfulness and become dingy. Dull (dingy) yellow represents caution, decay, sickness, and jealous.

  • Cindy Sherman And what about this green ?

    Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Yellow-green can indicate sickness, cowardice, discord, and jealousy

  • Its about relationships

  • Dynamic relationship

  • Dynamic-static relationship

  • Static relationship

  • Its a matter of contrast

    Color perception

  • Its about balance

  • Think with your eyes !

  • Color palette tips & tools

  • Strive for harmony

  • Be mindful of contrast effects

  • Understand color dominance

  • Rules of thumbfor 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, JohannesThe Art of ColorNew York: John Wiley & Sons, 1974

    Pabini, Gabriel-PetitColor Theory for Digital Displayshttp://www.uxmatters.com/

    Pabini, Gabriel-PetitApplying Color Theory to Digital Displayshttp://www.uxmatters.com/

  • Slides available at

    Hue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementaryHue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementaryHue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementaryHue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementaryHue - name and properties/mixture 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 color

    Extension - proportions of color

    Simultaneous - shifting of colors to complementary

    Mixture of yellow and red. Orange represents enthusiasm, fascination, happiness, creativity, determination, attraction, success, encouragement, and stimulation. In heraldry, orange is symbolic of strength and endurance. When diluted with black, declines into dull and withered brown. Dark orange can mean deceit and distrust.Yellow is the color of sunshine. Its associated with joy, happiness, intellect, and energy. Yellow produces a warming effect, arouses cheerfulness, stimulates mental activity, and generates muscle energy.Shades of yellow (when gray is added) are visually unappealing because they lose cheerfulness and become dingy. Dull (dingy) yellow represents caution, decay, sickness, and jealous.Green is the color of nature. It symbolizes growth, harmony, freshness, and fertility. Green has strong emotional correspondence with safety. Yellow-green can indicate sickness, cowardice, discord, and jealousy

    Color perception

Recommended

View more >