Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Rules of thumb for using colour in your content


Published on

A presentation delivered by Greg Urban at Technical Communication UK 2011 (21 September)

Published in: Design, Technology
  • Be the first to comment

Rules of thumb for using colour in your content

  1. 1. Color in content Presented by Greg Urban Contact:
  2. 2. Color and the techwriter <ul><li>When do writers need to choose colors? </li></ul><ul><li>Lone writer – needs to create a document from scratch </li></ul><ul><li>Writer needs to adapt company-branded colors or logo and apply it to content </li></ul><ul><li>Writer needs to adjust existing colors </li></ul><ul><li>Other situation? </li></ul>
  3. 3. Best way to choose colors?
  4. 4. The short answer <ul><li>Steal them. </li></ul><ul><li>“ Good artists borrow, great artists steal” – Picasso </li></ul><ul><li>Take something and make it your own. </li></ul><ul><li>Adjust it to fit your needs. </li></ul><ul><li>If you just copy something it will never look right. </li></ul>
  5. 5. Workflow for choosing colors <ul><li>Intent – You want to create a certain effect. Usually calm and reassuring, but sometimes attention-grabbing. Or somewhere in-between. </li></ul><ul><li>Find colors that have the effect you desire. The best ones are in a format similar to your content, so they have similar proportions. </li></ul><ul><li>Adapt them to your content </li></ul>
  6. 6. Using the color wheel <ul><li>The color wheel is a useful tool for seeing the relationships between colors </li></ul>
  7. 7. Complementary (opposite) Primary Color Complements Secondary Color Complements
  8. 8. Opposite (complementary) <ul><li>Tip: If your color combination seems dull, increase the amount of complementary color in one of the colors. </li></ul><ul><li>A color combination is at it’s most energetic when it consists of a color and it’s opposing color on the color wheel. </li></ul>
  9. 10. Analogous
  10. 11. Automatically harmonious (analogous) <ul><li>Colors next to each other on the color wheel are automatically harmonious. They contain large amounts of the same color. </li></ul><ul><li>Tip: If harmonious colors need more contrast between them, change their values, making some of them darker (shades) or lighter (tints). </li></ul>
  11. 12. Split complements
  12. 13. Split complements <ul><li>The most interesting color combinations are often based on split complements. </li></ul><ul><li>Tip: When you are choosing accents for a main color, take the two colors that flank the complementary color on the color wheel. </li></ul>
  13. 14. Split complements
  14. 15. Muted, rich, split complements
  15. 16. Triads <ul><li>Triads are three colors split evenly apart on the color wheel. </li></ul>
  16. 17. Triadic colors
  17. 19. Triad
  18. 20. Bright triad (well, mostly)
  19. 21. Muted triad
  20. 22. Muting colors <ul><li>You can ‘mute’ paint colors by adding the complement of the color to the color. </li></ul><ul><li>This makes the color more rich and muted. </li></ul><ul><li>When digitally manipulating colors, you desaturate the color by using sliders to lower the amount of the main color. </li></ul>
  21. 23. Contrast
  22. 24. Importance of contrast <ul><li>Contrast is important for good design. It differentiates and adds interest to content. </li></ul><ul><li>Effective contrast in design depends on: </li></ul><ul><li>Different font styles and font sizes </li></ul><ul><li>Graphic elements ( includes illustrations and photos) to break up text </li></ul><ul><li>Color contrast </li></ul><ul><li>Value contrast </li></ul>
  23. 25. Color contrast <ul><li> </li></ul><ul><li>Part of the interesting ‘Color is relative’ web site </li></ul>
  24. 28. Color is relative <ul><li>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. </li></ul>
  25. 29. The most important element of color is value <ul><li>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. </li></ul><ul><li>Differences in value create contrast. </li></ul><ul><li>This is important because: </li></ul><ul><ul><li>Most documents are still printed in B&W </li></ul></ul><ul><ul><li>8% of men have some degree of colorblindness </li></ul></ul><ul><ul><li>Sooner or later, we will all have weaker eyes, and contrast is important for readability. </li></ul></ul>
  26. 30. Value is relative. It depends on contrast with other values
  27. 35. We all love color, but… <ul><li>Don’t let color overpower good design. </li></ul><ul><li>It is far more important to have good layout and good contrasts in your document. </li></ul><ul><li>Value trumps color when it comes to ‘reading’ the structure of a document. </li></ul>
  28. 39. Original iPad sunflower <ul><li>Selected and enlarged in Photoshop </li></ul>
  29. 40. <ul><li>Used Magic wand and Level adjustment to lighten value of yellow and darken blue </li></ul>
  30. 41. With revised graphic
  31. 42. Enough talk let’s do some stealing
  32. 43. Using Rainbow Firefox plug-in
  33. 44. The Rainbow Color Library Framemaker color definitions
  34. 45. Applying ‘stolen’ colors to a document
  35. 46. Colors applied to doc
  36. 47. Stealing from the Masters
  37. 48. The results
  38. 53. How about as grayscale?
  39. 54. Color on the Web
  40. 59. Blue is the most commonly used color for content. <ul><li>Long value scale = better B&W printing </li></ul>
  41. 60. Blue is a good main color as other colors ‘ pop’ against it. It is also cool emotionally, even in large amounts
  42. 62. Summary: Rules of Thumb
  43. 63. To make color combinations more lively <ul><li>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.) </li></ul><ul><li>‘ Un-mute’ your colors by lessening the amount of gray in them. Digitally, lighten them and increase the saturation. </li></ul>
  44. 64. Blue is your friend <ul><li>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!) </li></ul><ul><li>Blue has a long value range, so it prints well in black and white. </li></ul><ul><li>It has a cool emotional affect, so it doesn’t distract from the text content. </li></ul>
  45. 65. Value is relative and is the most important aspect of color <ul><li>If colors do not scan well in black and white, the document will not scan well either. </li></ul><ul><li>A good value difference is 2.5 to 3 steps (10-step scale). This makes an easily discerned difference. </li></ul>
  46. 66. Color is relative <ul><li>Changing one color in a color combination can easily change the effect. </li></ul><ul><li>This is another reason to find a color combination that has the effect you are looking for and then adapt it to your content. </li></ul>
  47. 67. Expect to do a LOT of tweaking to find the ‘sweet spot’ <ul><li>The good news is there is slack. Color combinations can succeed even if they are a little ‘off’. </li></ul><ul><li>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!) </li></ul>
  48. 68. Thank you! <ul><li>Contact: Greg Urban </li></ul><ul><ul><li>[email_address] </li></ul></ul>