Leading on from the clearly differentiated top area, you’ll notice that lots of sites define the various areas of real-estate boldly and clearly.

Real estate comes in various forms, including:

• Navigation
• Background / canvas
• Main content area
• Other stuff
• Callouts / cross-links

It’s possible to design a web page so that these areas are immediately distinct from their neighbours.

The strongest way to do this is using colour.

But white space can be just as effective.

The risk with strong colour is that it draws the eye, so it can take attention away from other relevant screen elements.

I think that placing clean content on white space creates an easier experience, helping the viewer to feel more relaxed and free to browse.

source: http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Why distinct top sections are good

The top section says “Here’s the top of the page”. Sounds obvious, but it feels good to know clearly where the page starts.

It also starts the site/page experience with a strong, bold statement. This is very “2.0″-spirited. We like strong, simple, bold attitude.

When & how to use a distinct top section

On any site, both the main branding and main navigation should be obvious, bold and clear.

So it’s a good idea to create a clear space at the top of a web site design that positions the logo and nav boldly.

Always put your logo right up the top of the screen. I’d always recommend putting your main navigation right after it.

It’s definitely a good thing to mark the top of the page with a section that marks out the high-level screen features as separate from the main site content.

The top section should be visually distinct from the rest of the page content. The strongest way to differentiate is to use a bold, solid block of different color or tone, but there are alternatives.

source: http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

Why using fewer columns is good

Less is more. Fewer columns feels simpler, bolder, and more honest. We’re communicating less information more clearly.

There’s also a by-product of the domination of centered layouts. Because we’re not filling the whole screen so much, and not trying to get as much on-screen at any one time, we simply don’t need as many columns of information.

source: http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

Why a central layout is good

This “2.0″ style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Also, because we’re being more economical with our pixels (and content), we’re not as pressurised to cram as much information as possible above the waterline/fold.

We’re using less to say more, so we can be a bit more free and easy with the amount of space used, and pad out our content with lots of lovely white space.

When & how to use a central layout

I’d say, position your site centrally unless there’s a really good reason not to.

You may be wanting to get more creative with the space, or get as much information on-screen as possible (for example with a web app).

source: http://www.webdesignfromscratch.com/web-design/web-2.0-design-style-guide.php

Simplicity

“Use as few features as are necessary to achieve what you need to achieve”

Web design is simpler than ever, and that’s a good thing.

2.0 design means focused, clean and simple.

That doesn’t necessarily mean minimalist, as I’ll explain later.

I really believe in simplicity. That’s not to say that all web sites should be minimal, but that we should use as few features as are necessary to achieve what you need to achieve.

I’ve written elsewhere about Occam’s Razor, which is a principle I use all the time. One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Here are some examples. Note how unnecessary elements have been stripped out from each. There could be a lot more on each page than there is… but would that make them stronger?

The result is that you have to look at the content. You find yourself interacting with exactly the screen features the designer intended. And you don’t mind – it’s easy, and you get just what you came for.

Why simplicity is good

• Web sites have goals and all web pages have purposes.
• Users’ attention is a finite resource.
• It’s the designer’s job to help users to find what they want (or to notice what the site wants them to notice)
• Stuff on the screen attracts the eye. The more stuff there is, the more different things there are to notice, and the less likely a user is to notice the important stuff.
• So we need to enable certain communication, and we also need to minimise noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.

(more…)