design tips for using color. objectives identify and discuss various functions of color in design...
TRANSCRIPT
![Page 1: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/1.jpg)
Design Tips for Design Tips for Using ColorUsing Color
![Page 2: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/2.jpg)
ObjectivesObjectives
• Identify and discuss various functions of color in design
• Define terms related to color
• Offer some tips on using color as a design tool
![Page 3: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/3.jpg)
Hmmmm . . .Hmmmm . . .
• How are we How are we affected by color?affected by color?
• Do we respond to Do we respond to certain colors in a certain colors in a certain way?certain way?
• How did we learn How did we learn these responses?these responses?
![Page 4: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/4.jpg)
Color ContributionsColor Contributions• Can influence Can influence
mood and mood and receptivenessreceptiveness
• Provide visual Provide visual varietyvariety
• Focus attentionFocus attention
• Enhance meaningEnhance meaning
![Page 5: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/5.jpg)
• Clarify Clarify informationinformation
• Establish Establish consistent lookconsistent look
• Indicate real Indicate real world appearanceworld appearance
Color ContributionsColor Contributions
![Page 6: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/6.jpg)
Presentation Presentation ElementsElements
BackgroundFormat andColor
Text Style andColor
Highlight Elementsand Color
![Page 7: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/7.jpg)
The Color WheelThe Color Wheel
![Page 8: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/8.jpg)
The Color WheelThe Color Wheel• Colors across the Colors across the
wheel from each wheel from each other are said to be other are said to be “complementary”“complementary”
![Page 9: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/9.jpg)
The Color WheelThe Color Wheel• Careful! There are Careful! There are
color models that color models that use Red, Blue and use Red, Blue and Yellow as primariesYellow as primaries
• Complementary Complementary colors will be colors will be different with each different with each modelmodel
![Page 10: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/10.jpg)
The Color WheelThe Color Wheel• Color “opposites” Color “opposites”
is a better is a better description!description!
![Page 11: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/11.jpg)
The Color WheelThe Color Wheel• Color “opposites” do Color “opposites” do
not work well when not work well when placed next to each placed next to each otherother
• Especially, fully Especially, fully saturated oppositessaturated opposites
• Red & Green - Yuk!Red & Green - Yuk!
![Page 12: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/12.jpg)
ReadabilityReadabilityMaximum readability is achieved throughcontrast.
Readability!
Readability!
![Page 13: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/13.jpg)
Contrast DefinedContrast Defined
The difference between the “lightest” The difference between the “lightest” lights and the “darkest” darks.lights and the “darkest” darks.
The highest contrast isblack with white
![Page 14: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/14.jpg)
Color Contrast DefinedColor Contrast Defined
The relative differenceThe relative differencebetween two adjacent colors.between two adjacent colors.
![Page 15: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/15.jpg)
Contrast TypesContrast Typesfor Color for Color
Hue (Color)
Brightness
Saturation
![Page 16: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/16.jpg)
Hue ContrastHue Contrast
Colors have “hue” contrast whenColors have “hue” contrast whenthey are opposites on the color wheel.they are opposites on the color wheel.
![Page 17: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/17.jpg)
Hue ContrastHue Contrast
Opposite hueshave maximum hue contrast.
![Page 18: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/18.jpg)
Hue ContrastHue Contrast
They rarely work welltogether asforeground/backgroundcombinations!
![Page 19: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/19.jpg)
They clash!!!!
Hue ContrastHue Contrast
![Page 20: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/20.jpg)
If You Must UseIf You Must UseOpposites TogetherOpposites TogetherReduce saturation of at least one hue -Reduce saturation of at least one hue -
![Page 21: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/21.jpg)
Separate with a black or white line -Separate with a black or white line -
If You Must UseIf You Must UseOpposites TogetherOpposites Together
![Page 22: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/22.jpg)
Separate by distance -Separate by distance -
If You Must UseIf You Must UseOpposites TogetherOpposites Together
![Page 23: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/23.jpg)
Saturation ContrastSaturation ContrastContrast increases as differencesContrast increases as differencesin saturation increase - in saturation increase -
![Page 24: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/24.jpg)
Saturation ContrastSaturation ContrastContrast increases as differencesContrast increases as differencesin brightness increase - in brightness increase -
![Page 25: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/25.jpg)
Sample Contrast Sample Contrast CombinationsCombinations
Yellow contrasts inbrightness and hue.
![Page 26: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/26.jpg)
Sample Contrast Sample Contrast CombinationsCombinations
This is brightness- only contrast
![Page 27: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/27.jpg)
Sample Contrast Sample Contrast CombinationsCombinations
This is hue- only contrast
![Page 28: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/28.jpg)
The Color WheelThe Color Wheel• Colors next to Colors next to
each other are each other are said to be said to be “analogous”“analogous”
• Sometimes called Sometimes called “spectral “spectral neighborsneighbors
• They work well as They work well as schemes schemes
![Page 29: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/29.jpg)
The Color WheelThe Color Wheel• Good for highlight Good for highlight
color color combinationscombinations
• Not good for Not good for fore/background fore/background combinations combinations because . . . because . . .
![Page 30: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/30.jpg)
Spectral NeighborsSpectral Neighbors
Have lowHave lowhue contrast!hue contrast!
![Page 31: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/31.jpg)
Spectral NeighborsSpectral Neighbors
Avoid use when distinct separation is Avoid use when distinct separation is desired!desired!-- Pie chart pieces-- Pie chart pieces-- Foreground/Background text combos-- Foreground/Background text combos
![Page 32: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/32.jpg)
Spectral NeighborsSpectral Neighbors
• Work well as Work well as shadow or shadow or “highlight colors.“highlight colors.
![Page 33: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/33.jpg)
Color Triads -PrimaryColor Triads -PrimaryEqually spacedEqually spacedaround the coloraround the colorwheelwheel
Generally, aren’t pleasingGenerally, aren’t pleasingcombinationscombinations
![Page 34: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/34.jpg)
Equally spacedEqually spacedaround the coloraround the colorwheelwheel
Generally, aren’t pleasingGenerally, aren’t pleasingcombinationscombinations
Color Triads - SecondaryColor Triads - Secondary
![Page 35: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/35.jpg)
Color CategoriesColor Categories
““Warm” ColorsWarm” Colors Moderate Moderate saturationsaturation- Reds- Reds- Oranges- Oranges- Yellows- Yellows- Browns- Browns
![Page 36: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/36.jpg)
Hot Colors . . .Hot Colors . . .
Can cause viewer fatigue!!Can cause viewer fatigue!!
![Page 37: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/37.jpg)
Color CategoriesColor Categories
““Cool” ColorsCool” Colors Moderate Moderate saturationsaturation- Blues- Blues- Greens- Greens
![Page 38: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/38.jpg)
Cool Colors . . .Cool Colors . . .
Can make a viewer passive!
![Page 39: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/39.jpg)
Neutral Colors . . .Neutral Colors . . .
Serve a good backdrops forServe a good backdrops formost highlights.most highlights.
![Page 40: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/40.jpg)
Color TipsColor Tips• Limit the number of Limit the number of
hues - some hues - some suggest no more 5suggest no more 5
• Goal of color is to Goal of color is to enhance design not enhance design not make a busy, make a busy, distracting distracting messagemessage
![Page 41: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/41.jpg)
Color TipsColor Tips• Children prefer Children prefer
bright, “fun” bright, “fun” colors colors
• They shy away They shy away from dark, from dark, moody colorsmoody colors
![Page 42: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/42.jpg)
Color TipsColor Tips• Avoid limited Avoid limited
contrast for contrast for older adults - older adults - our eyes don’t our eyes don’t work as well as work as well as they used to! they used to!
![Page 43: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/43.jpg)
Color TipsColor Tips• Avoid deeply Avoid deeply
saturated colors saturated colors placed next to placed next to each other - they each other - they tend to shimmer tend to shimmer on theon the
![Page 44: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/44.jpg)
Color TipsColor Tips• Bright colors Bright colors
attract attentionattract attention– good for bulletsgood for bullets– buttonsbuttons– etcetc
• But, don’t But, don’t overwhelm overwhelm viewerviewer
Next
![Page 45: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/45.jpg)
Step 1 Step 2 Step 3
Color can highlight steps in a process
Color TipsColor Tips
![Page 46: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/46.jpg)
Color TipsColor Tips
• Emphasize Emphasize important important words or words or elements with elements with color.color.
Highlight important words
for emphasis
![Page 47: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/47.jpg)
Color TipsColor Tips
Avoid small text ondithered backgrounds.
![Page 48: Design Tips for Using Color. Objectives Identify and discuss various functions of color in design Define terms related to color Offer some tips on using](https://reader036.vdocuments.mx/reader036/viewer/2022062315/5697bf981a28abf838c9134f/html5/thumbnails/48.jpg)
Curriculum Content andCurriculum Content andActivities created byActivities created byDr. Mark MortensenDr. Mark Mortensen
Dept. of Technology & CognitionDept. of Technology & CognitionUniversity of North TexasUniversity of North Texas
Copyright C. Mark Mortensen 2001