Saturday, November 24, 2007

Web 2.0 how-to design style guide

An online style guide with examples ...

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

1Simplicity

"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."    (Continued via Web Design From Scratch)    [Usability Resources]

Web 2.0 Examples - Usability, User Interface Design

Web 2.0 Examples

0 Comments:

Post a Comment

<< Home

<< Home
.