Designing with Color


118616905_13d60793bc.jpg


Flickr image: Rainbow of Peace, 2006

Aside from good taste, economy and technology are the two main factors limiting your color choices. Too little color and you risk boring your audience. Too much color and the end result is distraction or worse, a graying or emotional neutralization of color. Nonetheless, a limited number of colors can be blended in order to create an overall effect of harmony or contrast. When you become skilled, you might even consider disharmony to create a unique jarring effect. Like many elements of the design process, once you know the rules, you can break them. Learn the rules by following the tutorial below in order to gain understanding as to how color works on our psyche and on the page. You can begin by analyzing the color wheel (see image below).


 
  476359521_2e83cf9307_o(2).gif


Flickr image: Color Wheel, 2007

 

Colors on the Web suggests that the best color option for website design and most documents consists of three color choices.    

  • The primary color sets the tone.
  • The secondary color backs up the primary color and is often harmonious or adjacent to the primary color on the color wheel.  
  • And finally, the highlight color is used to emphasize certain parts of the page. Often, this color is a complementary color, opposite the primary or secondary color on the color wheel. Use it with moderation. 

Color Basics

Hue refers to the primary colors: red, green and blue (see image below). 


2797930772_f989365355.jpg

Flickr image: Red, Green, Blue, 2008

Value is the measure of lightness and darkness of a color.
Monochromatic color is where only the value of the color changes (see image below). 
 

2502174940_f4793fb618.jpg

Flickr image: Dark Red Monochrome, 2008

Analogous colors  are adjacent to each other on the color wheel, for example, yellow and green. Analogous colors feel harmonious (see picture below).

 


733878567_65fa1fb0bd.jpg
Flickr image: Field of Sunflowers, 2007

 

Complementary colors are opposite to each other on the color wheel, for example, red and green. Complimentary colors exhibit more contrast when positioned adjacent to each other -for example red appears more intense when positioned on or beside green (see image below).

 

3615911048_c1c4c38459_o.jpg


Flickr image: Ladybug, Ladybird, 2009

Color and Temperature

We consider colors warm or cool because of our association with various elements in our surroundings. Red, yellow and orange are considered warm colors; in contrast, blue, green and violet are considered cool colors. Color contrasts are relative: Yellow-green is cool next to red or orange, but is  considered warm next to blue or purple. 

We associate warm colors, yellows, red and orange, with fire and sun (see image below).

3019783397_10bbdaeda2_o.jpg


Flickr image: Squall, 2008.

We associate cool colors, violet and blue  with snow and ice (see image below).

 
 
3410783929_051d93bc86.jpg


Flickr image: I've Reached the End of the World, 2009


 

Color and Movement
Perceptually, cool colors tend to recede into the distance whereas warm colors appear to advance (see image below).


322437015_1fb3198496.jpg

Flickr image:  After the Rainstorm, 2006

This advancing or receding quality is based on how our eye adjusts to see the colors. Warm colors such as red, orange or yellow appear to come forward while cool colors such as blue and green appear  to recede slightly.
 

Color Tutorial
 

Step 1: Find out the basics: Visual Literacy

Step 2: Know color theory:  Color Matters

Step 3:  Check out more research here: The Elements of Design

Step 4: Consider composition: Composition and the Elements of Visual Design

Step 5: Check out these tips on how to combine colors using the color wheel.

Step 6: Know your color rules: Write Design Online

Step 7: Understand the meaning of colors:

 

RED

535418789_3c20c66dd2.jpg

Flickr image: Colombia es Pasion, 2007

Effect: Stimulating, arousing, provokes action, speeds metabolism, makes you hungry

Positive: Strength, power, speed, intensity, love, passion, vitality, heart
Negative: Aggressive, bloody, rage, revolution, painful, dangerous, financial loss
Sound: Loud
Taste/Smell: Sweet, strong
Best Use: Promote Action: Buy It Now, spot color black and white document


ORANGE

181991086_bcc5b99853.jpg

Flickr image: Songless Under a Harvest Moon, 2006

Effect: Exciting, stimulating, cheering
Positive: Warm, autumn, jovial, social, activity, excitability, expansive, confident, creative

Negative: None
Sound: Loud
Taste/Smell: Strong, spicy

Best Use:

YELLOW

2371336419_d831455ca6.jpg

Flickr image: Circles, 2008

Effect: Cheering, enhances concentration, speeds metabolism
Positive: Bright, sunny, energetic, enlightenment, light, luminous, highest light reflection, gold, summer, optimism

Negative: Cowardice, jaundice, illness, hazardous, caution, pure bright lemon yellow is the most fatiguing color, yellow is an eye irritant, babies cry more in yellow rooms, husbands and wives fight more in yellow kitchens, opera singers throw more tantrums in yellow dressing rooms
Sound: Shrill
Taste/Smell: Sour

Best Use: Text bullets and subheadings (dark background)

GREEN

33612120_755d58678d.jpg

Flickr image: Romanesco2, 2005

Effect: Relaxing, refreshing

Positive: Nature, growth, hope, life, quiet, constancy, spring,
prosperity, money, green thumb, Go! assertive

Negative: Poison, nausea, jealousy, sickly, immature, unripe, gullible
Sound: Muffled when dull or shrill when saturated
Taste/Smell: Fresh to salty
Best Use: Highlight and accent color



BLUE

Thumbnail image for 1084199839_b081fa9c41.jpg
Flicker image: Blue Hair, 2007
 
Effect: Relaxing, calming, appetite suppressant, increases energy
Positive: Sky, water, peaceful, calm, dignity, loyalty, cool, depth, stability, trusting, Blue Ribbon, Blue Chip stock (safe and conservative)

Negative: Cold, "blues", melancholy, prudish, severe, moral
Sound: Distant
Taste/Smell: Clean, mild

Best Use: Background websites

VIOLET

3043180722_8c8bc4068b.jpg

Flickr image: Purple Dazzler, 2008

Effect: Subduing
Positive: Romance, enchantment, mystical, royal, sacred, dignified, fantasy

Negative: Lonely, pompous, conceited, profane, shocking, excessive
Sound: Deep, resonant
Taste/Smell: Exotic
Best Use:

 

BROWN

3000880347_1f3fc82edc_o.jpg

Flickr image: Olive the Mini Daschund, 2008

Effect: Comforting, stabilizing
Positive: Earth, wood, coffee, chocolate, dependability, receptive, sensuality, comfort, security, genuiness

Negative: Muddy, grubby, drab, sad and wistful
Sound: Deep, dark
Taste/Smell: Musty, roasted

Best Use:

 

Step 8: Understand the color of sound: Color of My Sound

 

COLOR AS SOUND.jpg

 

Step 9: Spin the Color Wheel to find pleasing colors for your website

                                                            

Step 10: Understand why we use color in documents:
 
2353059905_002b803c78.jpg

Flickr image: Color Chart, 2008

Color can have 5 general functions in documents: 1. directing attention, 2. delimiting shapes and areas, 3. clarifying complex ideas, 4. facilitating identification, and 5. creating affect. Perhaps the most important of these are directing attention and providing clarity because these have their effect during the preattentive stages of perceptions, where the influence of the message's form of interpretation is most predictable (William Winn).
 


 

Step 11: Understand why we avoid color:

Many technical communicators and their teachers avoid chromatic color despite the proven ability of color to enhance technical communication. They can overcome this reluctance and use color effectively if they understand how color works, respect the limitations of color, and apply it in ways compatible with communications objectives and human perception (William Horton).

Further more, Horton contends, Color aids decision making and focuses attention; it reveals organization and pattern and adds dimensions. However, unless used carefully and sparingly, color can make the tasks of reading text and interpreting small objects slower and less accurate. Excessive or irrelevant use of color can distract and hinder performance by drawing attention away from information the viewer seeks.

If you choose primarily colors that are strong and contrast with no one color having dominance, the net effect will be an emotional grey (McCloud Understanding Comics) A single-color saturation will achieve the greatest emotional impact.


3039883977_58b55fb78f_o.jpg

Flickr image: Color Chart Micron Hicon, 2008


Step 12: Know the color psychology of logos: Logocrtiques

Step 13: Know the history of color trends. The following information comes from the website: Colourlovers

20s
Coco Chanel's all-beige outfits
Green/orange/red/gold/gray/black/white
Flappers, flamboyant style

30s
Depression era
Elsa Schiaparelli pink
Royal purple popular due to the coronation of King Edward 8th
Clothing in military blues, khaki, browns

40s
Hollywood strong influence: glamour Holly-wood blonde furniture
WWII, hearth and home in movies, songs, and interiors.
Brown and tan comfort colors in both decor and fashion.
Warm, rich wood stains

50s

More paint colors available
Bright clear aqua, pink, & orchid in interior design
Pink appliances
Two-tone cars & clothes

60s
Youth movement, Beatniks, hippies
Psychedelic, fluorescent colors
Black/red Spanish styles
Avocado green and harvest gold everywhere
Bright color combinations that shock: purple & red, blue & green, yellow and orange

70s
Focus on the earth: The Environment
Greens, browns, orange
Daisies, rainbows, mushrooms
Handcrafted is important
Farmhouses, covered bridges as art motifs
Shag carpet

80s
Mauve, slate blue, gray
Designer southwest style
Victorian jewel tones
Clutter is stylish

90s
Victorian jewel tones now include Teal
Retro: Boomer's childhood motifs
Incoming brights
Clean & green
White

 

 

Step 14: Follow color trends: Web Design Color Trends 2009


Unlinked Sources

Horton, William.  "Overcoming Chromophobia: A Guide to the Confident and Appropriate Use of Color. " IEEE Transactions on Professional Communication  34.3 (1991): 160-173. ABI/INFORM Global, ProQuest. Web.  17 Oct. 2009.

McCloud, Scott, Understanding Comics. New York: HarperPerennial, 1993.

Winn, William.  "Color in Document Design. " IEEE Transactions on Professional Communication  34.3 (1991): 180-185. ABI/INFORM Global, ProQuest. Web.  17 Oct. 2009.

 

 





Leave a comment



yeehaw.jpg