In this article, I describe various common graphic design elements in modern web “2.0? design style. Then attempt to explain why they work and why they have become common.

Not all these design features (that will be discussed in this article) are appropriate in all cases. There are always exceptions, and there are lots of bad examples of these features being used wrongly, over-used, or done without sensitivity to the “symphony” of a site’s design.

You can’t just take all these elements, throw them together and make a good web page.

Making a web page that works requires a lot of sensitivity to the various forces at work. A good design solution is one that balances those (often opposing) forces.

“Web 2.0″ Design Features

Here are list of common features that are topically used in Web 2.0 websites.

1. Simplicity
2. Central layout
3. Fewer columns
4. Separate top section
5. Simple nav
6. Bold logos
7. Bigger text
8. Strong colors
9. Rich surfaces – (not added yet)
10. Gradients – (not added yet)
11. Reflections – (not added yet)
12. Icons – (not added yet)

1). Simplicity

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.

I’m a great believer in simplicity. I think it’s the way forward for web design.

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

• They enable designers to shoot straight for the site’s 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 sites

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

Why simplicity is best

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

How to make your designs simple

There are two important aspects to achieving success with simplicity:

• Remove unnecessary components, without sacrificing effectiveness.
• Try out alternative solutions that achieve the same result more simply.

Whatever you’re saying, choose wisely where you use your ink/pixels. Use it to communicate, first and foremost. Then, ask whether you can communicate just as effectively with less. If so, do it.

2). Central layout

Basically, the vast majority of sites 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 & center feel more simple, bold and honest.

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.

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.

3). Fewer columns

A few years ago, 3-column sites were the norm, and 4-column sites weren’t uncommon. Today, 2 is more common, and 3 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 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.

How to choose your columns

I’d definitely recommend using no more than 3 columns, simply because you should use no more of anything than you need to.

There are always exceptions, if you think its necessarily to put more columns in your design use it wisely.

4). Separate top sections

This means making the top of the screen (the main branding & 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.

Why distinct top sections are good

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.

How to use a distinct top section

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.

Continue Reading Part 2 of this Article