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.

Why do sites like Google+ and the new upcoming Facebook news feed put their content in white boxes on grey backgrounds?

Are there any benefits to this compared to say an all white background like here on SE?

share|improve this question
add comment

3 Answers

They are taking the minimalist approach. By using white and grey the user gets: - less distracted with the shape and the colors - pays more attention on the content - has a good contrast = better readability

Think about other colors, i.e. red, orange, pink, etc. They all tell a story or could mean things. The users will tend to "like it" or "not like it" or just have preconceptions about it, i.e. it's a pink site, must be for girls.

The shades of grey and white are neutral and most users will find it acceptable.

Apple, Facebook and Google are used by users coming from all possible age ranges, backgrounds, countries, etc, therefore the use of neutral colors make the acceptance easier.

share|improve this answer
add comment

Having the white boxes on the grey background emphasizes the boxes ever so slightly. The boxes are part of the structure of the page, and there's a balancing act between having too little (visible) structure to organize the content and too much structure to overwhelm the content. White boxes on a black background (or vice versa) would be too heavy in most cases, while extremely low contrast (or structure minimally implied with whitespace) might not be enough to make the organization easily recognizable. The right balance, the right amount of visible structure, depends on the content as well as the desired tone or personality of the design.

share|improve this answer
add comment

Everything that Rosie and obelia said is true, plus tints/shades of grey give a feel of depth and elevations to the GUI. Darker grey : deeper, lighter grey or white with a border : elevated; Much like the shadow effect on controls; Very useful to emphasize GUI components.

share|improve this answer
add comment

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.