Rules of thumb for using colour in your content
68
Color in content
description
A presentation delivered by Greg Urban at Technical Communication UK 2011 (21 September)
Transcript of Rules of thumb for using colour in your content
Color in content
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
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!)
