Content relevance. Let’s use some colors

This is a translation from my original post in spanish. I hope you like it!

We are planning a new design for our website and doubt between using blue, red, pink, yellow, … What would be better? What if I put bright pink edges? Surely no one would forget my web …

All the ones who have built a website once have gone through this process. What color to choose? Why can’t I just put fluorescent orange background? Well, some things seem obvious, but others less so. I will try to order some ideas on this issue in this post.

When designing a website, the first thing you have to think about is what is it’s objective, from that point, try to steer the user towards this goal. For example, say you have a blog as a hobby and the objective is to make users read your posts. I’ll give you two examples of design:

In the first example, we see that the areas we do not want to call attention are colored gray, inconspicuous, leaving white for the blog area that will be the text, which makes reading easier (it is less tiring to read over white background). In the second design we had white for the text, but in a fit of originality we have placed some more bright colors.

Look at the second design, Where do your eyes go? Most likely anywhere but content, since white takes less attention than those brightful colors. And now, look at the first design, although the header calls some attention, surely your eyes tend toward the target. Wow! That’s what I wanted! It seems not so difficult after all …

The trick consists on placing the brightest colors in the target area. Assuming that if we have a text, this must be on a white background (with some exceptions), if our goal were to take the user to the sidebar we could use the yellow of the second design, if instead, the goal is to bring the user to the text, you have to use less brightful colors than white for the rest of the page.

Practical example

Now let’s see an example, racingpasión’s blog used a dark red background time ago, which gives it personality and reminds us the characteristic Ferrari’s red. I picked this example just to show how to maintain the usability and creative freedom at the same time. Red, although striking, is in a desert area, without content, distracts the user 1 second but he knows right away that there is nothing there and the content focuses in on a white background. Note that the red is dark not bright, and also the sidebar is in dark gray, to avoid further distractions to those already generated by the background and give it a Ferrari’s look.