Learn Javascript Tutorials, CSS Tutorials, HTML Tutorials and jQuery Tutorials

Learn CSS, HTML, JavaScript, jQuery and Ajax step by step from beginning to advance with examples and references. Apart from that, beginners can learn tricks and tips.more>>

Saturday, October 27, 2007

Introduction to Web 2.0

I'm using the term "Web 2.0 design" to describe the prevailing style of web design I introduce in my current style article.

Many people use the term "Web 2.0" to describe:
¤ a resurgence in the web economy
¤ a new level of technological interactivity between web sites and services
¤ or social phenomena deriving from new types of online communities and social networks

Many others also use the term in reference to a recent school of web design

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

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

Simplicity
Web design is simpler than ever, and that's a good thing.

2.0 design means focused, clean and simple.

"Use as few features as are necessary to achieve what you need to achieve"

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.

No comments: