The Art Of Colors

  • Published on
    21-Apr-2017

  • View
    71.169

  • Download
    1

Transcript

The Art of ColorsA few tips for user interface designersby elisa giaccardielisa.giaccardi@colorado.eduLets warm up !Lets start with some basicsThere are two color systemsAdditiveSubtractivered + green + blue = whitemagenta + yellow + cyan = blackUI designers use the additive systemWhat is this jargon ?Hue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryHuename and properties of a color that enables it to be perceivedHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryBrilliancehow lightor darka color isHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementarySaturationthe level and mixture of white, black, grey or complimentary included in colorsHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryWhat are these ?Hue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryLearn the color wheelAnother way to visualizeAnother way to visualizePrimary colorsSecondary colorsTertiary colorsAnalogous colorsOpposite colors are complementaryCombinations of opposite or analogous colors are harmonicNow you know the jargon too!Wasnt it additive ?Web color wheelDo 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 jealousyIts about relationshipsDynamic relationshipDynamic-static relationshipStatic relationshipIts a matter of contrastColor perceptionIts about balanceThink with your eyes !Color palette tips & toolsStrive for harmonyBe mindful of contrast effectsUnderstand color dominanceRules of thumbfor UI designersEnsure text readability through contrastAvoid the use of textures and pattern for backgrounds behind textsAvoid contrasts that cause eye fatigueAvoid color combinations that cause illusions when positioned togetherEnhance user experience Establish conventions and use color consistentlyUse color both to support users tasks and for brandingUse color to enhance aesthetic appeal and user satisfactionUse color for identification, grouping, and emphasisRelate visual elementsDemarcate different areasHighlight important task-related informationUse color associations in expressing state informationBe consistent with job-related color associationsLearn about cultural color associationsIndicate availability using color or valueFor linksFor controlsFor iconsFor windowsSome good readingsItten, JohannesThe Art of ColorNew York: John Wiley & Sons, 1974Pabini, Gabriel-PetitColor Theory for Digital Displayshttp://www.uxmatters.com/Pabini, Gabriel-PetitApplying Color Theory to Digital Displayshttp://www.uxmatters.com/Slides available atHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryHue - name and properties/mixture of a color that enables it to be perceivedBrilliance - how light or dark a color isSaturation - the level and mixture of white, black, grey or complimentary included in colorExtension - proportions of colorSimultaneous - shifting of colors to complementaryMixture 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 jealousyColor perception