Web 2.0 Design – How to Design Web 2.0 Style (part 1)

Web 2.0 Design – How to Design Web 2.0 Style (5 Parts)

 

In this tutorial, I describe various common graphic design elements in modern web (“2.0″) design style.

I then attempt to explain why they work (i.e. why they have become common), as well as how, when and where you might use each element in your designs.

To learn how to design Web2.0 sites yourself, you must read “Save the Pixel – The Art of Simple Web Design”, which is a comprehensive guidebook to the principles and techniques of Web2.0 design.

 Summary of features covered

The list below is a summary of many of the common features of typical “Web 2.0″ sites.
Clearly, a site doesn’t need to exhibit all these features to work well, and displaying these features doesn’t make a design “2.0″ – or good!

Introduction

I’m going to take you through the features of the current wave of excellent web site designs, dissect the most significant features, explain why each one can be good, and show you how to use them in your own sites.
If I 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

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

When & how to make your designs simple

When?

Always!

How?

There are two important aspects to achieving success with simplicity:

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

“It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away.”
Antoine de Saint-Exupéry,
Terre des hommes, 1939

Whenever you’re designing, take it as a discipline consciously to remove all unnecessary visual elements.
Concentrate particularly on areas of the layout that are less relevant to the purpose of a page, because visual activity in these areas will distract attention from the key content and navigation.
Use visual detail – whether lines, words, shapes, colour – to communicate the relevant information, not just to decorate.
Here’s an example of a design that suffers from not enough simplicity.
Yaxay’s interface uses a lot of pixels, but the vast majority of them are decorative, part of the page background. Relatively few pixels are used to user to find or understand information or interact with the site.

See how much “stuff” there is to look at, and notice how few of the pixels are used to clarify actual navigation, actual content, or actual interactive features.
Edward Tufte is the boss when it comes to the design of information. He uses the terms “data ink” (i.e. detail that enables information transfer) and “non-data ink” (i.e. detail that’s just detail) to describe this phenomenon.
One way Tufte specifically measures the effectiveness of information design (graphs, charts, presentations etc.) is using the ratio of data-ink to non-data-ink. The higher the proportion of data-ink used, the more likely it is that a design is effective.
Taking the Yaxay detail above, there’s a lot of what I call “busyness”, i.e. a lot of edges, tonal changes, colour variations, shapes, lines… a lot of stuff to look at. But, in this detail, the only useful features are:

1. The site logo, and
2. the label on the nav button (which reads “art gallery”)

All the rest of the “busyness”: the shapes in the background, the diagonal lines in the interface panel, the grid, the gradients… all this is noise, it’s all “non-data ink”, because it’s not enabling communication.

I’m not against richness, complexity or beauty in web design

Simplicity means:

Use as many pixels as you need, in whatever way you need, to facilitate the communication that needs to happen.

Of course, often what you’re communicating isn’t hard data, but soft information.

Hard data

means facts, like news, stock prices, train times, or how much money is in your bank account…

Soft information

covers the qualitative aspects of communication, like the first impression about the quality of a company, the sense of how approachable a service provider is, and whether you feel a product will be right for you. It can be just as important!

Whether what you’re communicating is hard or soft, your pixels count, so use them consciously and with care.
Take the example below:

Alex Dukal’s site is rich, interesting and appealing. It uses a range of visual techniques to draw your attention, make you interested and to give you a warm feeling about the quality of Alex’s work.
But it’s also simple, because it uses its pixels/ink/busyness with care and sensitivity. It’s not gratuitous, it’s economical and rich.
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.

 (CONT ON PART 2)

Disclaimer

Not all these design features 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, any more than you can take some eggs, sugar, flour and throw them together and get a cake.
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.