Web 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 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
Simple, yet great tips for any web designer. I didn't know about the rounded corners. Thanks!
Posted by Shama Hyder
http://www.AfterTheLaunch.com
Hi Talita,
I like the changes you've made to the blog - the calendar should force us to keep it up to date! Also, there is some great resources in this post in particular.
Posted by Simon
http://www.kintek.com.au