This third installment of the 5 parts to a better blog series discusses the influence of colors in guiding the human eye to the content you’re trying to put out. Most people don’t realize it at a first glance, but there’s actually a small number of things that can help your users see what you want them to see. Lets take a look at those.

Have you ever wondered how your website would look like in grayscale, without the help of color to guide your eyes? Apart from looking dull, because it most likely would, it would also keep you away from actually reading it. Thats because we are used to visual hints on screen text - like a webpage. Have a look at the screenshot below:

Without the color hints, you are forcing the brain into making decisions about what’s important and what isn’t. One thing to notice is that this is a screenshot of something you know, which helps that decision-making process, but if you were looking at a random webpage in grayscale, you’d trash it in one second because you wouldn’t make sense of any of it.

So what all of this means is that the eyes and the brain “look” at colors for guidance and to build a “tree of relevance” for each element on a screen. This is why you are now focussing on this text and not the sidebar or the menu up there. See what I mean?

Getting practical

By now you’ve probably seen the obvious. Without color distinction between elements on the screen, you’d get bored just by looking at it. And worse than that, you wouldn’t even know where to begin, when looking at a page. So lets see how we can use color to help us help our readers.

Usually, websites generally and blogs in particular share a “structure” that guides you subconsciously. That’s usually a title area, a navigation area and - quite naturally - the content. Since we’re not talking about layouts here (but probably will sometime soon), lets focus on color.

What distinguishes the sections of a website is the relevance tree I’ve talked about before. There’s no real term to define what it is, so from now on, lets call that our “attention tree” - a tree, because it maps each element to a branch with an attention measure.

What we want to do help the brain buil that attention tree, giving a bigger attention value to our content section. We’ll do that with color, but we’ll do it consciously. Lets start with a color scheme.

The color scheme

Start by thinking about your identity. What defines you, and your blog? These questions seem like the load of BS you’d see in an advertising campaign, but they’re actually quite important. Think about the kind of mood and content you’re going to put out, and build a color scheme accordingly. Blogs on business and VC shouldn’t be using bright bubblegum colors, and people blogging about apple pies shouldn’t be in black and white. The color scheme on the right defined the previous version of this website.

There are a few resources out there that help you build color schemes so you don’t end up with colors that don’t match with eachother. Color schemer seems like a good choice.

Once that’s done, you should map the colors to your sections. Meaning, you should separate your navigation from your content by using different background colors for each, so that the visitor can clearly distinguish between each section in no time. The rule’s the same for other sections. You don’t need to go crazy on color and give everything a different color from a Benetton catalogue. Use common sense, and group site sections logically. Both sides of the brain come in at work here - creativity and reasoning.

Colors in text blocks

Layout color is done, but if our whole text is in black and white it won’t do us any good. So, lets talk about that. People go into webpages (and weblogs specifically) to read text, so this is important.

There are a few things when it comes to text that make a difference:

• Using a different color in headlines causes the eye to know we’re changing topics.
• Links in big text blocks (like blog posts) shouldn’t have colors that distract the eye, but they should still be distinguished from the main text - in my case, I use a simple shade of grey.
• Colors in blocks other than the main content area should be picked carefully in order not to overly distract the eye.

Color in text blocks should make the text’s structure clear to the user. While structure is about headings, sizings and spacings (refer to the first part of this series if need to), using a slightly different color to mark your headlines helps the reader - but remember not to exagerate; don’t let color separation become an obsession.

Wrapping up, some other tips

Lets put it all together. Our goal is to help the viewer find the content he needs, so first we guide him into the section he’s looking for by using different background colors, and in there, we’ll use color in our text if necessary to bring out the relevant items.

Remember not to abuse colors. You should pick a consistent and effective color scheme - not something that would look in a suit by Jean Paul Gautier (you know, the fashion guy).

A good combination of type and structure (covered on Part 1), navigation organization (covered on Part 2) and colors, create a powerful user experience even for something as simple as a blog. Use these tips to make your content usable and enticing. But always keep in mind your weblog doesn’t need “bling” above content: you’re the purveyor of the real deal.

If you’re looking for more information about perception of content, there’s a great book I recommend: 2D Visual Perception. Now go spice up your pages. Parts 4 and 5 will be a little more business oriented and will discuss relationships to readers, etc. Stay tuned.