Web 2.0 how-to design style guide

Popularity Report

Total Popularity Score: 0

Rank

URL Tag Cloud

Related Lists

Bookmark History

Saved by 464 people (-164 private), first by anonymouse user on 2006-12-21

G0m33z on 2009-12-14 - Tags no_tag
Marcora on 2009-11-18 - Tags webdesign , gmarks
Eatingbuttons on 2009-09-03 - Tags web2.0 , webdesign , design , css , howto , web , tip , tutorial , ajax , accessibility , color
Hotelbudget on 2009-07-05 - Tags Bookmarks , graphics , programming , web2.0
Jmbiraben on 2009-06-29 - Tags Web , Webdesign , design , web , 2.0

Public Comment

on 2006-12-25 by suscreative

A very helpful guide to design CSS based layouts with ease.

on 2006-12-26 by suscreative

A very helpful guide to design CSS based layouts with ease.

on 2007-01-08 by edgincvg

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

on 2008-06-13 by akochan

We have to be careful not to continue trying to "manage" someone's learning with the concept like "human capital." IT is a two-sided sword that you can direct it in either way.

Public Sticky notes

A good design solution is one that balances those (often opposing) forces.

Highlighted by allendog

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

Highlighted by allendog

One way of interpreting it is: Given any two possible solutions to a problem, the simpler one is better.

Highlighted by allendog

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.

Highlighted by allendog

"It seems that perfection is reached not when there is nothing left to add, but when there is nothing left to take away."

Highlighted by allendog

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

Highlighted by allendog

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!

Highlighted by allendog

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.

Highlighted by allendog

This "2.0" style is simple, bold and honest.

Highlighted by allendog

This means making the top of the screen (the main branding & nav area) distinct from the rest (the main content).

Highlighted by allendog

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

Highlighted by allendog

Web sites have goals and all web pages have purposes.

Highlighted by om19bao

Remove unnecessary components

Highlighted by om19bao

lines, words, shapes, colour

Highlighted by om19bao

data ink

Highlighted by om19bao

non-data ink"

Highlighted by om19bao

Hard data

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

Soft information

Highlighted by om19bao

This "2.0" style is simple, bold and honest. Sites that sit straight front & center feel more simple, bold and honest.

Highlighted by om19bao

Separate top sections

Highlighted by om19bao

Here are 2 examples where the top section is separated with a solid line, rather than being solid colour itself.

Highlighted by om19bao

The strongest way to do this is using colour.

Highlighted by om19bao

Lots of "2.0" web sites have big text, compared to older-style sites.

Highlighted by om19bao

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

Highlighted by jedatu

Web 2.0

Highlighted by johnmore73

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.

Highlighted by marcel

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. It follows on from my Current Style article, and analyses in greater depth the design features of the current "Web 2.0" design style.

Highlighted by jbruck

usable

Highlighted by om19bao

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

Highlighted by irisdd

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.

Highlighted by schn107

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

Highlighted by sotoole2008

"Web 2.0" design style.

Highlighted by soneil

“Save the Pixel is the best book on web design and usability I've ever read, and one of the best books on internet marketing in general. If you're sending traffic to your web site via Google AdWords and you haven't discovered the strategies and tactics in Save the Pixel, I guarantee you're throwing away money.

Highlighted by irisdd

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!

Highlighted by tsullivan

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!

I've already addressed some of these factors in my introductory Current Style article.