Rules of thumb for using colour in your content

Color in content Presented by Greg Urban Contact: gjurban@pacbell.net

Color and the techwriter
When do writers need to choose colors?
Lone writer – needs to create a document from scratch
Writer needs to adapt company-branded colors or logo and apply it to content
Writer needs to adjust existing colors
Other situation?

Best way to choose colors?

The short answer
Steal them.
“ Good artists borrow, great artists steal” – Picasso
Take something and make it your own.
Adjust it to fit your needs.
If you just copy something it will never look right.

Workflow for choosing colors
Intent – You want to create a certain effect. Usually calm and reassuring, but sometimes attention-grabbing. Or somewhere in-between.
Find colors that have the effect you desire. The best ones are in a format similar to your content, so they have similar proportions.
Adapt them to your content

Using the color wheel
The color wheel is a useful tool for seeing the relationships between colors

Complementary (opposite) Primary Color Complements Secondary Color Complements

Opposite (complementary)
Tip: If your color combination seems dull, increase the amount of complementary color in one of the colors.
A color combination is at it’s most energetic when it consists of a color and it’s opposing color on the color wheel.

Analogous

Automatically harmonious (analogous)
Colors next to each other on the color wheel are automatically harmonious. They contain large amounts of the same color.
Tip: If harmonious colors need more contrast between them, change their values, making some of them darker (shades) or lighter (tints).

Split complements

Split complements
The most interesting color combinations are often based on split complements.
Tip: When you are choosing accents for a main color, take the two colors that flank the complementary color on the color wheel.

Split complements

Muted, rich, split complements

Triads
Triads are three colors split evenly apart on the color wheel.

Triadic colors

Bright triad (well, mostly)

Muted triad

Muting colors
You can ‘mute’ paint colors by adding the complement of the color to the color.
This makes the color more rich and muted.
When digitally manipulating colors, you desaturate the color by using sliders to lower the amount of the main color.

Contrast

Importance of contrast
Contrast is important for good design. It differentiates and adds interest to content.
Effective contrast in design depends on:
Different font styles and font sizes
Graphic elements ( includes illustrations and photos) to break up text
Color contrast
Value contrast

Color contrast
http://samesameordifferent.com/
Part of the interesting ‘Color is relative’ web site http://colorisrelative.com/color/

Color is relative
The point of the previous screens is that colors exist in relation to other colors. Changing one color in a color combination can easily change the effect. This is another reason to find a color combination that has the effect you are looking for and then adapt it to your content.

The most important element of color is value
A 10-value scale shows the 10 colors between white and black. For our purposes, value is the grayscale version of the colors in our content.
Differences in value create contrast.
This is important because:
Most documents are still printed in B&W
8% of men have some degree of colorblindness
Sooner or later, we will all have weaker eyes, and contrast is important for readability.

Value is relative. It depends on contrast with other values

We all love color, but…
Don’t let color overpower good design.
It is far more important to have good layout and good contrasts in your document.
Value trumps color when it comes to ‘reading’ the structure of a document.

Original iPad sunflower
Selected and enlarged in Photoshop

Used Magic wand and Level adjustment to lighten value of yellow and darken blue

With revised graphic

Enough talk let’s do some stealing

Using Rainbow Firefox plug-in

The Rainbow Color Library Framemaker color definitions

Applying ‘stolen’ colors to a document

Colors applied to doc

Stealing from the Masters

The results

How about as grayscale?

Color on the Web

Blue is the most commonly used color for content.
Long value scale = better B&W printing

Blue is a good main color as other colors ‘ pop’ against it. It is also cool emotionally, even in large amounts

Summary: Rules of Thumb

To make color combinations more lively
Emphasize the amount of complementary color in your color combination. (‘Push’ at least one of the colors towards a hue complementary to one of the main colors.)
‘ Un-mute’ your colors by lessening the amount of gray in them. Digitally, lighten them and increase the saturation.

Blue is your friend
If you don’t have a lot of time to pick colors, use different values of blue. Use red and yellow accents (not too big!)
Blue has a long value range, so it prints well in black and white.
It has a cool emotional affect, so it doesn’t distract from the text content.

Value is relative and is the most important aspect of color
If colors do not scan well in black and white, the document will not scan well either.
A good value difference is 2.5 to 3 steps (10-step scale). This makes an easily discerned difference.

Color is relative
Changing one color in a color combination can easily change the effect.
This is another reason to find a color combination that has the effect you are looking for and then adapt it to your content.

Expect to do a LOT of tweaking to find the ‘sweet spot’
The good news is there is slack. Color combinations can succeed even if they are a little ‘off’.
But - there is a ‘sweet spot’ that you will recognize when you hit it…it makes everything work. (Though you can still be sabotaged by a screen with different color settings, so pay attention to value so your content will be legible!)

Thank you!
Contact: Greg Urban
[email_address]

Rules of thumb for using colour in your content

by TCUK on Sep 21, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

Statistics

Rules of thumb for using colour in your content — Presentation Transcript