I have a question, what is the difference between a defined content area (visually) and one with no clear distinction, like so:

Defined: enter image description here

Invisible: enter image description here

  • Welcome to the site! Can you clarify? When you say "what is the difference" what context are you referring to? Jan 23 '14 at 2:15
  • I think they are referring to the fact that the background extends downward and provides a definitive border for the white area below and "inside" it; in comparison to having a separate border for the content area. Jan 23 '14 at 2:32
  • I'm not entirely clear what the question is, either. Content, by it's very nature, would be visible and define itself, would it not?
    – DA01
    Jan 23 '14 at 3:30
  • What Andrew G said. DA01, yes from my perspective as a designer that's my first thought.
    – Max
    Jan 28 '14 at 21:40

Personally I think the following, looking at your images.

  • Color is important, using color to distinguish borders can be easier on the eyes, especially if it's used right, like you did in the top example.
  • When comparing the top content area to the bottom content area, the bottom looks more bare, as you have given a specific border and outline of "objects" which will presumably fill that border. However, these objects aren't there for some reason or another. It gives the user a sense of uneasy anticipation, in my opinion.
  • Consistency is key, especially with webpages. In the other pages of the site, does the beige color fill in as a background or consistently stay as part of the top toolbar. If webpages change their look suddenly, especially if they have taken something away, it can look a lot like they haven't finished loading.
  • Think about where you want your user to look. For example, look at the top image. Does your eye get drawn towards the content area, or does it get drawn to the border. Mine seems to like the content area, because that is the part of the webpage that it is "presenting" to you. You can see it all around the content area, and because of that, the user is eased into the "new" content area being "presented" before them. However, look at the bottom image. My eye seems to be drawn towards the top toolbar. This is partially because it has the only color of the webpage, (the bottom is a harsh white), and it could be described as "taking over" the webpage, which can become intrusive and hostile.
  • Ease of use. Do you want your user to find your webpage easy and pleasing to use? My guess is that you do. If you have an undefined content area, you tend to be left with a little bit of a guessing game. For example, to allude to one of my above bullet points, is the webpage done loading? Is something going to appear in that empty white space with no border? What is that space for? (Because it sure doesn't look like a background.) Consequently, if you have a defined content area, especially using the background color to do so, you give the user a definitive answer that they don't need to worry about anything in the beige, and should focus on the content area you have provided.

Just my two cents. Hope this helped!

  • Yes, this helped a lot Andrew, I've been looking at several websites, and they seem to visibly define content areas, I'm interested in hearing all sides to the story, for and against, thank you again, much appreciated!
    – Max
    Jan 28 '14 at 22:41
  • The irony is that the ux.SE site does exactly what I was trying to convince you not to do. I just noticed that. :/ Jan 29 '14 at 2:15

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