Web Design Brisbane

Get a Quote

How to get the Web 2.0 Look and Feel

Posted in How To's, web design brisbane on November 5th, 2007 by Talita

Across the world and in Brisbane, Website Design 2.0 is all the rage at the moment. Although strictly ‘Web 2.0’ refers to the new wave of community driven websites, it is also increasingly used to describe the fresh and clean design approach they use.

The great thing about Web 2.0 websites is that they are all about the content. Web 2.0 websites are well structured, easy to navigate and easy on the eye. They use clean space lavishly and beautiful design elements sparingly (because you can have too much of a good thing). Generally, it is the simplicity and subtlety of Web 2.0 designs which makes them so visually appealing.

If you want to revamp your website with a web design 2.0 look and feel, here are a few techniques you can play with….

Rounded Corners
Rounded corners can add a nice soft touch and give a smooth and flowing effect.

Wet Floor effect
The use of reflections (aka the ‘Wet Floor’ effect) can add texture and dimension to a logo or button.

Gradients
Gradients can really bring a web page to life and add a sleek and professional look and feel.

Big Buttons
Draw attention to important elements of your site with big, bold buttons that incorporate a characteristically Web 2.0 gradient, glossy effect.

Space
Not necessarily white space, but space all the same – regardless of colour scheme. Web 2.0 websites are uncluttered and feel spacious.

Sunbursts
Another element often seen in Web 2.0 header designs – this one is simple and effective

Simple Layout
Simple layouts work best – you don’t want to confuse your visitors with unnecessary complexities. You want them to instinctively understand your content structure and navigation the moment they arrive.

Simple navigation
Paramount to a positive user experience, your global navigation system should be obvious, consistant and easy to read. Make sure visitors always know where they are and where to go to next.

Big Text
Web 2.0 websites utlise clean and readable fonts that are typically larger than in previous trends of web design. Slightly larger fonts with high contrasts make for more useable websites. Increasing the line-height can also go a long way towards making your text more readable. You can also afford to make headings significantly larger than the main body of text to really draw attention to them. Sometimes a different font for headings can work well too. Currently I’m a big fan of Georgia as a heading font.

Examples and inspiration
For inspiration and countless examples of the above techniques check out some css web galleries, a few of which I’ve listed below:

CSS Drive
http://www.cssdrive.com

CSS Based
http://www.cssbased.com

CSS Mania
http://www.cssmania.com

CSS Heaven
http://www.cssheaven.com

CSS Beauty
http://www.cssbeauty.com

Screenalicious
http://www.screenalicious.com

Related posts:

Fixed vs Liquid Layouts
Ecommerce case study: Haggus & Stookles
Bookmarklet to Inject Yahoo Reset CSS into any P...
Site Management System Promotion Video

One Comment

  1. Shama Hyder says:

    Simple, yet great tips for any web designer. I didn’t know about the rounded corners. Thanks!

Leave a Reply