Template for Tools
If you’re a graphic design specialist, you will have studied color, and you may be far more confident in how you approach color when constructing a web site. However, for writers who know far more about words, colors can feel overwhelming.
By chance, years ago, hunting books on color, I came across one that reprinted famous images, and then offered the palette of all the colors next to the image. I could look at the colors, and then look back at the painting, sometimes hunting for a color I hadn’t noticed.
The clothing color suggestion
When I first started teaching writing in online spaces, I would say, about basic web pages, choose colors that might wear on a day when you’re trying to look professional. Enter any class room full of students, dressed up or in their mid-semester exam wear, and they’ll have blues, greys, creams, tans in large percentages. Rarely will you see anything other than muted colors in choices for pants, jeans, jeggings, leggings, or sweats. Most of the jackets will also be muted color. Then, for emphasis, in shirts, or hats, or sweatshirts, you’ll see the color pop. Think of web pages similarly, at least at first, until you gather a sense of how to work with color as a writer.
Becoming more aware of color?
How might you, as a writer, become more confident with color choices? You certainly can read books and/or access youtube videos on color design, and you can study the design choices on web sites. The best strategy for me has been to select three sites that are in a specific industry, study their color choices, the amount of each color on various web site pages, and from those specific choices, learn something about how to bring color to sites that have a similar agenda.
Paragraph Paragraph Paragraph Paragraph Paragraph Paragraph
For this post, I want to start by looking at 3 banking websites. I know banking isn’t necessarily an obvious first example, but banks require a conservative approach. People must trust their online presence, or the online usage will be limited. The colors banks choose must convey messages about reliability, trustworthiness, and those colors can be culture – specific. Some color theorists might argue that many banks choose to wrap their sites in blue because that color conveys authority and trust. Who knows. It matters to understand not only the color, but the proportion.
I’ve chosen two national banks, and one regional bank: Chase Bank, Wells Fargo, and Union Bank. You can try this exercise with your own favorite banks, just to see if you find differences. Open up three bank sites. How many colors do you see? Stay at the top of the page for a minute, and watch the images that scrolls. Be sure to note:
- Background colors – even if white;
- gradations of a font color—look for black turning to grey.
- Small dividing lines/borders around text
- Check roll over (particularly easy to see in the menu though roll overs are fading in the land of icons for menu options)
- Notice the prominent colors in staged pictures – Photo content counts as part of their color palette.
- Dominant color: Red
- White, as font and background
- Shades of Grey
- Cream / Beige/Taupe/Brown
- Red (and variation on red),
- Gold and variations that shift towards vibrant orange,)
- Blue (often denim)
- Light Green,
- Green (for a themed secondary page)
- Tealish Blue (For a themed secondary page)
- Orange/rust (For a themed secondary page)
- Purple (For a themed secondary page)
Union Bank and trust:
- Dominant color: Green
- Black font and degrees of grey
- White (background/font)
- Dominant color: Beige/grey/blue
- Shades of Grey
- Blue (shades of blue)
- Green (shades of Green)
If I want to create a website, and I want it to be corporate in feel, I can look at the amount of color in each section of a page, and try to recreate the same proportions. For example, in the Well’s fargo, the red portion is prominent in the header bar, but immediately below it, the background for the site is white or a very light cream, the images have very light backgrounds that are also cream or grey, and the person in any images may have just a small amount of red. I wouldn’t conclude, from this web site, that I should offer a background of red. Instead, I might choose one button in red, the top bar in red, and I might choose an image that includes a small pop of red. I want similar proportions to the example I find. If I want the logic without the specific color, I might switch out the red bar, the red button, the red portion in the image, and shift, instead, to the color in my palette that is a strong, vivid color.
If you want to create a site that has the feel of an image you like, but you can’t find a web site that reflects the proportion of color emphasis. If you think about proportions that you like in paintings, or if you look at the proportions of colors in a photo, (say, image at the beach, where the main colors might be blue (sky), teal (ocean), and taupe/cream (sand), with the focus on people), can you recreate that image in your web site design?
Take this image from Wells Fargo, for example.
You can load that image into an online palette generator like http://www.cssdrive.com/imagepalette/index.php
Or to coolors.co/app (and then click on the little icon for a camera).
Curiously, when you drop that image into coolors, the orange color comes up, which is important for one point: if you study an image, trying to indicate how much of the screen is which color, you’ll find that the orange they recommend here is almost like a pin point on the image itself.
If you take an image and the color proportions as a guide, this small amount of orange in this color scheme can act as a guide for how much of your web site’s screen should include that color. If you can see that much of the image is a kind of light blue-grey color, then you can imagine that a significant portion of your screen should be that color as well.
If you don’t like those colors, you can try again. Or you can take some of those colors over to a site that helps you to see the possibilities for color choices.
- Get the proportion
- Practice seeing how others create the emphasis
- Look at how your contrast works
- Look at how the color blind simulator sees your colors
- Keep breaking sites down in terms of color.