Design Guide Web 2.0

Web 2.0 Design is art as well as science in designing rich surfaces with clean layout, bigger text, cute icons, smooth gradients and reflections. Greater the website visibility, higher the brand credibility.

The main purpose of web 2.0 design is to create user friendly controls, slick user interface, aesthetically appealing layout that altogether keep visitors hooked with web sites. A Web 2.0 sites are helpful to interact with end users, it helps them to scan a page until they find something of interesting.

Features and Benefits of web 2.0


It’s the designer’s job to help users to find what they want.

Keeping the website simple is the key to its success. By keeping navigation, layout and content simple with adequate white spaces offers ease to its visitors in finding the information with minimal clicks, which ensures lowered bounce rate and increased usability of the website.

• 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 minimize noise. That means we need to find a solution that’s does its stuff with as little as possible. That’s economy, or simplicity.

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.

See example here
Bigger text

Making things bigger makes them more noticeable than lesser elements.

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!

• Compared to older-style sites Lots of “2.0″ web sites have big text.
• Big text makes most pages more usable for more people, so it’s a good thing.
Bold text introductions

Leading on from the big text theme, many sites lead with strong all-text headline descriptions.
What many sites do is they include strong all-text headline descriptions on top of the intro. They tend to be graphical rather than regular text. This is usually set out as the site’s USP, main message or elevator pitch.

When and how to use a bold text introduction
Only use one if you have got something bold to say. If you don’t have something bold to say, then maybe it’s worth having a think about the purpose of your site and coming up with something worth saying boldly.

If you have a simple message that you want your visitors to see first, then go ahead and headline it. Make it clear by putting it against a relatively plain background.
Bold Logo

If a site is not memorable, people will never come back.

An unambiguous, bold, strong brand – integrating attitude, first impression and tone of voice – is facilitated by a bold logo. Bold and strong logos imply “This is us” in such a way that people tend to believe in it

Some of the essential points which you should remember about your logo are that

1. Be recognizable and distinctive
2. Represent your brand’s personality and qualities on first viewing
3. Work visually in its main context, and any other uses in which it may be used (like flyers or t-shirts?)
Strong Navigation

Navigation should be clearly distinguishable from non-navigation.

Nothing goes wrong if a website has simple, easy-to-use navigation system. You always like to visit a site that has simple three tabs on the top, each pointing to the major sections of the site instead of browsing a site that has endless number of links present at the side bar of the page. Therefore, a site with simple navigation is certainly a good idea.
Permanent navigation – your global site nave 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.
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

Bellow the principle of navigation, and general reduction of noise, the best ways to clarify navigation are:
• Positioning permanent navigation links apart from content
• Differentiating navigation using color, tone and shape
• Making navigation items large and bold
• Using clear text to make the purpose of each link unambiguous

Inline hyperlinks should also stand out sufficiently from the text around them.
Strong & Flat Colors, Gradients

Risk with strong color is that it draws the eye, so it can take attention away from other relevant screen elements.

Some Web 2.0 sites make strong use of flat colors, while others use gradients and gloss in excessive amount. The gradient and plastic effects in a website, if not overused, can look astonishingly good.
Bright, strong colors draw the eye. Use them to divide the page into clear sections, and to highlight important elements.
• Navigation
• Background / canvas
• Main content area
• Other stuff
• Callous / cross-links
It’s possible to design a web page so that these areas are immediately distinct from their neighbors.
But white space can be just as effective.
The risk with strong color 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.
Rich surfaces

Almost all 2.0-style sites make use of subtle 3D effects, in moderation, to improve the qualitative feel of the design.

Everyone knows that these little touches feels good but no one knows the reason for this.
Realistic surface affects such as drop-shadows, reflections and gradients facilitate in making a visual interface look more factual, solid and “finished”.

These may also remind us of some tactile or visual qualities of real-world items, like water droplets, marble floors and shiny plastic buttons.

Simpler, more spacious designs demand less attention and allow for a richer icon.

To make website elements more noticeable, use relevant icons near them.
Icons can be useful when they’re easily recognizable and carry a clear meaning. In lots of other cases, a simple word is more effective.
Icons play an important role in Web 2.0 design. Today we use fewer, better icons that carry more meaning.
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 richer icons.


Anil Giri is the guy who can develop UI/UX with html, css and javascript and also able to create attractive and catchy UI for print media as well as for web with latest pattern and for all the major browsers and devices. I also loves blogging on web design, development and blogging.

Leave a Reply

Your email address will not be published. Required fields are marked *