RSS

My Blog

Design Guide Web 2.0

Web 2.0 Design is both an art and science in designing rich surfaces with clean layout, cute icons, bigger text, smooth gradients and reflections. Greater the website visibility, higher the brand credibility. Now with proven, time-tested and hands-on Web 2.0 Design Training from IMRI experts, you can enhance your core skill sets and competencies.

The basic characters of web 2.0 design include user friendly controls, slick user interface, aesthetically appeasing, and appealing layout that altogether keep visitors hooked. A Web 2.0 site allows users to interact and collaborate with each other in a social media dialogue as creators of user-generated content in a virtual community, in contrast to websites where users (consumers) are limited to the passive viewing of content that was created for them
Features and Benefits of web 2.0

Simplicity

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.

Icon

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.

16 Responses to “Design Guide Web 2.0”

  1. wordpress theme free Says:

    Immediately after study several of the blog posts with your website at this point, and I definitely like your means of blogging. When i bookmarked it to my bookmark web site list and will be checking again soon. Pls check out this web site too and inform me what you think.

  2. games for kids Says:

    I am not new to blogging and really value your blog. There is much prime subject that peaks my interest. I am going to bookmark your blog and keep checking you out. Wish you good luck.

  3. Crown Deals Says:

    I would like to say thanks for the efforts you have made compiling this article. You have been an inspiration for me. I’ve forwarded this to a friend of mine.

  4. website design florida Says:

    Good read, very much appreciated.

  5. Website Design Says:

    Hi, Amazing Blog article! I have just re tweeted this post to my readers.

  6. Kristi Malik Says:

    Once again, you have managed to captivate my brain with another great article. I find it all very exciting. Please keep up with more of the terrific articles I look forward to your next one.

  7. illegal brazilian porn Says:

    thanks for posting. Great article.

  8. web design Says:

    Thank you for sharing this! Just what I’ve been searching for. Great info for my latest website project. Will advice my client to come and check it also.Thank you again!

  9. Kym Zipse Says:

    I have been exploring for a bit for any high quality articles or blog posts on this kind of space . Exploring in Yahoo I finally stumbled upon this website. Studying this info So i’m satisfied to express that I have an incredibly good uncanny feeling I discovered just what I needed. I most surely will make sure to don’t omit this web site and provides it a glance on a constant basis.

  10. Catrina Willims Says:

    I need to say, youve got 1 with the ideal blogs Ive seen in a lengthy time. What I wouldnt give to be able to develop a weblog thats as fascinating as this. I guess Ill just have to keep reading yours and hope that one day I can write on a topic with as substantially expertise as youve got on this 1!

  11. w3c Says:

    Somebody necessarily help to make significantly posts I would state. This is the very first time I frequented your web page and to this point? I amazed with the analysis you made to make this actual submit amazing. Magnificent process!

  12. Shad Rivers Says:

    I build dozens of websites a week for clients. I like what you got goin on here. Keep up the good work.

  13. bizzibiz Says:

    you have brought up a very great details , appreciate it for the post.

  14. jason Says:

    An impressive share, I simply given this onto a colleague who was doing a bit of analysis on this. And he in reality purchased me breakfast as a result of I found it for him.. smile. So let me reword that: Thnx for the treat! But yeah Thnkx for spending the time to discuss this, I feel strongly about it and love reading extra on this topic. If possible, as you turn out to be experience, would you thoughts updating your blog with extra particulars? It’s highly helpful for me. Massive thumb up for this weblog publish!

  15. baby crib bedding sets Says:

    Hi thanks a lot for a discerning post, I really found your blog by mistake while searching on Google for something else closely related, in any case before i ramble on too much i would just like to say how much I loved your post, I have bookmarked your site and also taken your RSS feed, Once More thank you very much for the blog post keep up the good work.

  16. Bobbye Altobell Says:

    Hmm it appears like your site ate my first comment (it was extremely long) so I guess I’ll just sum it up what I submitted and say, I’m thoroughly enjoying your blog. I too am an aspiring blog writer but I’m still new to the whole thing. Do you have any points for newbie blog writers? I’d really appreciate it.

Leave a Reply