Color and Design

Web Site Components

Technology

Interaction

Visual Design

Content

Site Architecture

Color

Color choice defines web site at a glance Powerful and persuasive tool Color is free!

– In web design only– Cost of color plays big role in print

Color and Mood

Commonly accepted psychological effects– Yellow = Happy– Red = Energizing

Individual tastes– Based on complex emotional responses– Not logical

Black is depressing to some people, dramatic to others

Color and Mood

Age– Children and teens have different color tastes

than adults Gender

– Men and women prefer different colors Culture

– Cultures around world have different feelings and associations with colors

Color Theory

Primary colors– Red, Yellow, Blue– Any color of rainbow can

be made from primary colors, plus black and white

The Color Wheel

Secondary colors– Generated from mixing

adjacent primary colors

Tertiary colors– Generated from mixing

adjacent secondary and primary colors

Color Theory

Mixing all primary, secondary, and tertiary colors creates brown

Color Theory

Black, white, and shades of gray are true neutrals

Black and white cannot be created by mixing any other colors

Can get gray by mixing opposing colors on color wheel

– Complementary colors

Color Attributes

Hue (chroma)– Technical term for a specific color– Each separate wedge of color wheel – Can be mixed to create other hues

Color Attributes

Value– The lightness or darkness of a color– Tint

Mixing white with a hue

– Shade Mixing black with a hue

Value

High-key– Light in value– Tints such as pink

Low-key– Dark in value– Shades such as burgundy

Color Attributes

Saturation– Level of purity or intensity of a hue– Fully-Saturated Hue

Has not been mixed with black, white, gray, or its complimentary color

De-Saturating a Hue

Mixing a hue with gray or complimentary color

Result is a tone– “toned down”

Less intense– Sophisticated, earthy, rich– Drab, dull, grungy

Color Attributes

Temperature– Colors can feel warm or cool– Warm

Yellow, orange, red

– Cool Purple, blue, green

Designing Cautions

If designing on LCD screen…– Check colors on other monitors early in design

process– LCD screens have brighter and more saturated

palette – Viewing angle on LCD alters way colors appear

Choosing a Color Scheme

Most important thing you can do to build appeal, mood, and ambiance for your site

Some organizations have set colors you cannot deviate from– Select colors from logo, add additional tints or

shades for variety

Who is Your Audience?

Children– Primary colors– Fully-saturated bright colors

Corporate– Monochromatic, stable scheme

Rock Group– Neon or dark/murky colors– Mood band wants to project

What’s Your Mood?

Fully-saturated hues– Vivid, intense, child-like

Tones and shades– Sophisticated

Tints– Babies, femininity

Colors having uncommon names are seen as being more complex and sophisticated

– Mauve– Salmon– Grayish-green with blue

undertones

Which Colors Portray Your Mood?

Limit to 1-3 colors– Difficult to unify large number of colors

Repetition of color unifies a page– Every color you use should appear in more than

one place on page

Repeat colors throughout site– Reassures visitors they are in right place

Using Color-Coding Schemes

Should be of approximately same value and saturation

Express same mood Part of unified, site-wide color scheme Keep other site characteristics consistent

– Layout, graphics, navigation

Color Proportions

Don’t use equal amounts of each color

– Page will look boring, lacking focal point

3 color scheme:– Background color 60%– Header, graphics that

need some emphasis 30%

– Most striking, most emphasis 10%

Monochromatic Scheme

Tints and shades of a single hue Unified, harmonious, professional Can be dull if poorly used

Complimentary Color Scheme

Two colors opposing each other on traditional color wheel

Fully-saturated complimentary colors– Vibrant, jarring, attention getting, creates tension and

illusion of movement– Often used by sports teams– Not a good idea for background/text

Can be tamed by using tints, shades, tones– Pale lettuce green/baby pink– Burgundy/dark forest green

Two colors opposing each other on traditional color wheel

Fully-saturated complimentary colors– Vibrant, jarring, attention getting, creates tension and

illusion of movement– Not a good idea for background/text

Can be tamed by using tints, shades, tones– Pale lettuce green/baby pink– Burgundy/dark forest green

Complimentary Color Scheme

Triad Color Scheme

Three evenly spaced colors on color wheel Bold, vibrant, jarring, but not as much as

complimentary colors Often used in children’s sites

Analogous Color Scheme

Several colors adjacent to each other on color wheel

Citrus hues of yellow, orange, green

Harmonious, stylish, pleasing

Warm colors– Cozy, inviting– Appear closer to viewer

Cool colors– Sophisticated,

professional– Appear to recede from

viewer

Inspiration for Color Schemes

Fashion Home décor High-end sites Television ads Clothing Catalogs

Opening credits of a movie

Fabric stores Art books Window displays Box of crayons

Color Contrast

Degree of difference between various color attributes

Used to emphasize some items while de-emphasizing others

Color Contrast

Hue– Complimentary colors have greatest contrast

Value– Lighter colors contrast with darker colors

Saturation– Highly saturated colors contrast with low

saturated color Temperature

– Warm colors contrast with cool colors

Color Contrast

For maximum legibility:– Foreground elements (text) should contrast in

VALUE with background elements Black text on white background NOT black on navy background

– Should always be able to remove all color from design and still be able to read it

Color Contrast

For maximum legibility:– Foreground elements (text) should contrast in

VALUE with background elements Black text on white background NOT black on navy background

– Should always be able to remove all color from design and still be able to read it

Color Contrast

Background Colors

Need to have sufficient value contrast between foreground and background

Dark text on light background– Print media

Black backgrounds– Overused, but when done well can be stunning

Dark gray is newest trend– Mercedes, Jonathan Yuen (self promotes

interactive web site)

Color and Accessibility

10% of male population is color blind Ensure there is sufficient value contrast

between foreground and background– So that hue is irrelevant for legibility– View in grayscale to test

Color alone should never be only clue to meaning– Navigation links

ACTIVITY

Using the blank sheet provided for, maximize the materials you have by illustrating your mode on the basis of today’s discussion. Provide an appealing title for your masterpiece.