Web 2.0 principles for good web design

If we had to sum up "Web 2.0" design in one word, it would have to be "simplicity", so that's where we'll start.

Today's simple, bold, elegant web page designs deliver more with less:

• They enable designers to shoot straight for the websites goals, by guiding the site visitor's eye through the use of fewer, well-chosen visual elements.
  
• They use fewer words but say more, and carefully selected imagery to create the desired feel.
  
• They reject the idea that we can't guess what people want from our web pages.

1. Simplicity

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 we will explain later.

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

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:

• Websites 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 online 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.

2. Central layout

Basically, the vast majority of new media web site designs these days are positioned centrally within the browser window. Relatively few are full-screen (liquid) or left-aligned/fixed-size, compared to a few years ago.

Why a central layout is good?

This "2.0" style is simple, bold and honest. Sites that sit straight front and 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 and how to use a central layout

I'd say, position your website 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).

3. Fewer columns

A few years ago, three-column sites were the norm, and four-column sites weren't uncommon. Today, two is more common, and three is the mainstream maximum.

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 centred 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.

4. Separate top sections

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

Of course, there's nothing new about this approach. It's a good idea, and has been used for ever. But it's being used more than ever now, and the distinction is often stronger.

When and how to use a distinct top section

On any website, 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 website 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 colour or tone, but there are alternatives.

5. Solid areas of screen real-estate

Leading on from the clearly differentiated top area, you'll notice that lots of websites 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.

6. Simple nav

Permanent navigation - your global site nav that appears on every page as part of the webpage template - needs to be clearly identifiable as navigation, and should be easy to interpret, target and select.

2.0 design makes global navigation large, bold, clean and obvious. Inline hyperlinks (links within text) are typically clearly differentiated from normal text.

Users need to be able to identify navigation, which tells them various important information: Where they are (in the scheme of things), where else they can go from here and what options they have for doing stuff.

Following the principle of online simplicity, and general reduction of noise, the best ways to clarify navigation are: positioning permanent navigation links apart from content, differentiating navigation using colour, tone and shape; making navigation items large and bold; using clear text to make the purpose of each link unambiguous.

7. Bold logos

A clear, bold, strong brand - incorporating attitude, tone of voice, and first impression - is helped by a bold logo.

Here are some. Notice that logos are tending to be quite large, in line with the general 2.0 principles. Strong, bold logos say "This is who we are." in a way that we can believe.

8. Bigger text

Lots of "2.0" web sites have big text, compared to older-style sites.

If you fill the same amount of space with less "stuff", you have more room.

When you've made more room, you can choose to make more important elements bigger than less important elements (if they're still there).

Making things bigger makes them more noticeable than lesser elements. This effect has been used throughout the history of print design, on headings, title pages and headlines.

Not only does big text stand out, but it's also more accessible to more people. That's not just people with visual impairments, but also people looking on LCD screens in sunlight, people sitting a little further from the screen, and people just skimming the page. If you think about it, that could be quite a lot of people!

9. Strong colours

Bright, strong colours draw the eye. Use them to divide the page into clear sections, and to highlight important elements.

When you have a simple, stripped-out design, you can use a bit of intense colour to help differentiate areas of real-estate and to draw attention to items you want the visitor to notice. If you're using strong colours to attract the eye, it only works if there's lots of area that isn't strongly coloured.

If everything is trying to attract the eye, then the eye just gets confused, and the site will feel confusing and chaotic.
See how we apply these principles to website design and development.