RSS Feeds 
Feed Comment
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.
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:
Remove unnecessary components, without sacrificing effectiveness.
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.”
2 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).
3 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.
4 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.
2 of these top-sections contain just branding (Protolize, Mediconmedia), 1 has just navigation (Cross Connector), and the remaining 3 have both.
The weakness of Cross Connector, in my view, is that the logo comes after the nav. I prefer the nav to be high-up, and clear (like e.g. Simple Bits).
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.
5 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.
6 Simple nav
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 nav simple
Simply remember the key: navigation should be clearly distinguishable from non-navigation.
Inline hyperlinks should also stand out sufficiently from the text around them.
Check out these snippets. In each case, you’re in do doubt what’s a link. (Personally, I prefer using blue text (non-underlined) which turns to underlined red on hover…)
7 Bold logos
A clear, bold, strong brand – incorporating attitude, tone of voice, and first impression – is helped by a bold logo.
Here are some (100% scale). Notice that logos are tending to be quite large, in line with the general 2.0 principles.
Why?
Strong, bold logos say “This is who we are.” in a way that we can believe.
Your logo should:
- work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)
- be recognisable and distinctive
- represent your brand’s personality and qualities on first viewing
8 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.
9 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.
10 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.
11 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.
12 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’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.
13 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.
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.
14 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.
Some examples, demonstrating various attributes.
15 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.
Source: http://webdesignfromscratch.com/
Thanks u r information