Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

I am just finishing up a site for a non profit and we are having a bit of a debate of about what the background color should be

enter image description here

I have been trying to emphasise on the need for a neutral color like dark grey as shown in the above screenshot while the director wants a dark green color like shown in the screenshot below : enter image description here

My argument has been that the color contrast in the latter case is pretty sharp, while in the former case it's easier on the eye and hence the enhanced user experience. Are there any studies on what kind of colors should be used in the background?

The goal is to ensure easier reading when the user scans the site and reduce sharp transitions

share|improve this question
    
It looks like your background is really white and at the sides you have a bit of margin that is there for no reason other than taking up desktop real estate. At least make the margins smaller and closer in color to background. –  Danny Varod Jan 30 '12 at 1:14
2  
@DannyVarod: That's horrible advice. Negative space is necessary to keep visual balance. Narrow margins with stark contrast make the inner object feel crammed. –  dnbrv Jan 30 '12 at 1:23
    
The background on the sides needs to be the lightest color possible. Otherwise, you're introducing eye-strain similar to white text on dark background. I'm posting this as a comment because I don't have actual studies to back it up. –  dnbrv Jan 30 '12 at 1:25
    
@dnbrv thats interesting but wont there be a problem when the user is trying find out where the site content starts and ends ,i am in favor of the grey since its not such a sharp contrast and sort of melds in –  Mervin Johnsingh Jan 30 '12 at 1:35
    
@MFrank2012: Look at UX.SE or CNN or Facebook or ABC: the background is white everywhere. Do you have a problem of where content starts/ends? I looked at the large sized image - the contrast is less stark but the gray still feels better. –  dnbrv Jan 30 '12 at 1:56

3 Answers 3

up vote 8 down vote accepted

The background you choose for your website has the power to set the theme and set the mood for your site at a glance. But the main aim of the background should be to enhance the visual experience and not to distract the user too much from the content.

Analysis:

  • The image with grey background has more depth and there is a sense that the content area is to the fore. However the colour and texture do not match the theme of the content area which seems to be positivity, hopefulness and life.
  • In the second image the plain coloured background means there is less differentiation between the content area and the background. The image appears flat; the background and foreground appear to be on the same level. This combined with the fact that the dark green colour is so strong, results in the background competing with the content area for the user's attention.

Suggestions:

Combine a low-contrast texture with a subtle gradient in a hue and saturation that compliments the content area.

Lets look at some examples of sites that do a good job on these elements: thisiseyeweb.co.uk vuu.com.au pillowcompany.com

...links for inspiration: labusdesign.com, thehappybit.com, www.lomahousevegexpress.com, designkindle.com/wp-content/uploads/demos/wedding-site-template/index.htm

Colour Theory

I don't have any research as such to share with you however this three part series on Colour Theory from Smashing Magazine will give you lots of helpful insights: http://www.smashingmagazine.com/2010/02/02/color-theory-for-designers-part-2-understanding-concepts-and-terminology/

share|improve this answer

The goal is to ensure easier reading when the user scans the site.

Practicality aside, colour is obviously emotively persuasive.

I would imagine that catering for the emotional well-being of your end users is as important allowing them to scan information easily.

  • The grey you have chosen still provides a subtle contrast, partly because of the texture you have used. I think using texture in this way is a useful way of creating differentiation without creating distraction.

  • Unfortunately, the combination of grey and your chosen texture strongly suggests the surface of a breeze block - which is quite a stark / industrial association.

  • The subject matter of the site has a tendency to be potentially depressing - it's important to try to counteract this tendency through aesthetic choices.

  • The green (colour) background provides a more emotionally warm effect - however the strength of saturation and lack of lightness is slightly oppressive.

Bearing this in mind, I'd consider choosing a different, lighter / brighter green and combining it with the texture used in the first example.

share|improve this answer
    
I am sorry but I am not aware of the term breeze block,can you please elaborate on that –  Mervin Johnsingh Jan 30 '12 at 18:39
    
@Mfrank2012; I believe a breeze block is known as a cinder block in the US. –  codeinthehole Jan 30 '12 at 19:02
    
Ah thanks ,I get what you mean however I find your response about the grey being depressing and that combined with the content on the site being even more depressing –  Mervin Johnsingh Jan 30 '12 at 19:05

Don't fuss so much about the colors. It's more important to view the color differences, in other words, the contrasts. Color choices aside, by using a darker background you've now created a very visible rectangle where the content appears. This is an extra shape and you should ask yourself what you need it for. Suppose there would be no contrast between the background and the content rectangle (white background), in that case the rectangle would disappear. My guess is that it would invoke more calm and would be easier on the eye. Because the eye will be drawn to the text first, rather than the rectangle surrounding the text. Also the subtle colors in the header would become clearer. See what I mean?

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.