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.

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.

When & how to make your designs simple

When?

Always!

How?

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.

Whenever you're designing, take it as a discipline consciously to remove all unnecessary visual elements

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.

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

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.

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

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

Example: The top section is separated with a solid line, rather than being solid colour itself.

Solid areas of screen real-estate

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.

Simple navigation

Permanent navigation - your global site nav that appears on every page as part of the page 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.

Why simple navigation is better

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

How to keep your navigation simple

Simply remember the key: navigation should be clearly distinguishable from non-navigation.

Just follow the guidelines above, regarding differentiation through position, colour and clarity.

Inline hyperlinks should also stand out sufficiently from the text around them.

Bold logos

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

Why?

Strong, bold logos say "This is who we are." in a way that we can believe.

When & how?

It's very hard to say how to create a good logo, but in brief...

Your logo should:

• work visually in its main context, and any other uses in which it may be used
• be recognisable and distinctive
• represent your brand's personality and qualities on first viewing

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!

When & how to use big text

Big text makes most pages more usable for more people, so it's a good thing.

Of course, size is relative. You can't take a normal, busy site, make ALL the text bigger, and make it more usable. That might not work, that might be worse.

In order to use big text, you have to make room by simplifying, removing unnecessary elements.

You also need to haave a reason to make some text bigger than other text. And the text must be meaningful and useful. There's no point adding some big text just because it's oh-so 2.0!

If you need to have a lot of information on a page, and it's all relatively equal in importance, then maybe you can keep it all small.

Bold text introductions

Leading on from the big text theme, many sites lead with strong all-text headline descriptions.

These normally set out the site's USP, elevator pitch or main message.

They tend to be graphical, rather than regular text. The reason for this is that designers want a lot of control over the page's visual impact, especially early on in a browsing experience.

When & how to use a bold text intro

Only use one if you've got something bold to say. v (If you haven't got something bold to say, maybe it's worth having a think about the purpose of your page/site and coming up with somethign worth saying boldly!)

If you have a simple message that you want to be seen first, go ahead and headline it. Make it clear by putting it against a relatively plain background.

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.

Remember to use sparingly

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.

Rich surfaces

Most 2.0-style sites use subtle 3D effects, sparingly, to enhance the qualitative feel of the design.

We all know that these little touches just feel nice, but we may not know why.

Realistic surface effects (like drop-shadows, gradients and reflections) help make a visual interface feel more real, solid and "finished".

They may also remind us of certain tactile or aesthetic qualities of real-world objects, such as water droplets, shiny plastic buttons, and marble floors. Making stuff look solid and real can make it look "touchable", which is likely to appeal.

When & how to use rich surfaces

The golden rule here is to use with care, and not to overdo it.

Like any of these techniques, a rich surface may add value to your design when used sensitively and appropriately.

If your navigation/icon/logo/layout sucks fundamentally, you can't polish your way out. Get the fundamentals right first.

It can also be important to maintain a consistent light-source. Although this can get more complex with the illusion of back-lit diffusion in buttons etc., you still know whether an overall design feels consistent.

3D effects can also make elements seem to stand out from the page, but only if the rest of the page is relatively flat.

Avoid trying to make your entire design 3D-realistic because:

• It's more work
• It will increase the overall size of the page assets
• And you don't need to. 3D effects use lots of different pixels, and different pixels should be used deliberately to draw the visitor's attention to key content elements, or to enhance "soft" informational aspects. A little goes a long way.

Gradients

Web 2.0 design has more gradients than the Alps.

Why gradients are so useful

Gradients soften areas that would otherwise be flat colour/tone.

They can create the illusion of a non-flat surface, used to good effect on Alex Dukal's portfolio.

Gradients can be used to fade a colour into a lighter or darker tone, which can help create mood.

In page backgrounds, they may also create an illusion of distance.

A common gradient combo is blue-to-white, which evokes the effect of aerial perspective, creating the sense that the background fades away towards the horizon.

They are commonly used at the very top of page backgrounds, where they help denote the boundary of the viewable area.

They're also an integral part of drop-shadows, and the inner-glows and specular highlights you see on glass- or plastic-style buttons.

Note that gradients usually work best when juxtaposed with areas of flat colour or tone.

Reflections

The illusion of reflection is one of the most common applications on gradients.
These commonly come in 2 kinds:

• Highlights caused by light reflecting on shiny surfaces
• That shiny table effect!

Specular highlights

Realistic effects of water droplets, glass beads, shiny plastic buttons etc. have been very popular over the past couple of years.

I don't know where the trends started, but Apple's web site must have been one of the most influential, preceding their Aqua interface look & feel.

That shiny table effect!

Pioneered by Apple again (I'm sure). This is a really nice effect which is so prevalent now, it's in danger of being overused, now starting to look tired and is falling out of favour with designers.

Remember, of course, that web designers are usually more sensitive to these things, so even if we're getting turned off by it, the general public may still think it's cool for some time to come.

Cute icons

Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.

Icons can be useful when they're easily recognisable and carry a clear meaning. In lots of other cases, a simple word is more effective.

In the old days, icons were sometimes overused. It seemed that everyone wanted an icon for every navigation link or tab. Now, we use clear text more extensively, and are less ready to litter a page with icons.

Where 2.0 designers do employ icons, they are reserved for higher-value spots, where.
Simpler, more spacious designs demand less attention and allow for a richer icons.

Various attributes of cute icons:

• Simple and clean
• Cute and quirky
• Richly detailed

Star flashes

These are the star-shaped labels that you see stuck on web pages, alerting you to something important.

They work by evoking price stickers in low-cost stores. For this reason, they suit the start-up ethic of many 2.0 sites, but for the same reason may cheapen other sites.

They can really work well, but of course should only be used to draw attention to something important.

I'd recommend only using one on a page (at most!).

Another style that's seeming over-used, and will probably run its course over the next year.