Here I take a look at the web design trend known as "Web 2.0". Although Web 2.0 design is really about content distribution and generation, there is a certain look and feel that has come along with it.
This may as come as a surprise to many people and in fact it did to me that there is actually a name given to the current form of web design that everyone seems to be clambering for. That name is "Web 2.0". There are more than a few articles online about this style and there are some links at the bottom where further reading is available. I've also used many of the example sites highlighted by some of these other articles.
Although I'd been aware of this burgeoning style for some time, I had never actually taken on board any of the principles - I've never been one to follow a trend! But the more this style sprung up, the more it grew on me and the more it's been influencing much of my own work. Now this style won't always be applicable to your website, as many clients will have already settled on an idea or by the nature of the project, the "Web 2.0" aesthetics will not lend themselves well.
So what is Web 2.0 exactly?
It's a naff term to be honest and we here in the office, always say it with a wry smile. Now really, the term refers to the way in which content is generated and distributed across the web but it goes without saying that almost every site which incorporates these new processes also possess a distinct visual style. Aesthetically then, it refers to the composition, usability and overall feel of a website. A lush, fresh and crisp look that is as practical as it is pleasing to the eye. Bold text, bright graphics, smooth gradients, reflections, white space, drop shadows, subtle backgrounds and complimentary elements all go into the design.
So where did this style come from?
This is a matter that's always up for debate and there are many views and theories, my own personal one is that it's most likely source is a combination of burgeoning web usability and the ever-increasing functionality and eye candy of the operating system you're using right now, so yes, Apple have a lot to answer for! However, whether it's Windows, Mac OS or Linux you can be sure that there is an awful lot of emphasis on aesthetics and usability. Apple are usually the ones credited with the whole style revival in computing and for the most part, that's very true. From the very early days of computing, it was Apple who pioneered the graphical user interface and made PCs easier to use and nicer to look at - a legacy that, arguably, continues to this day. With Microsoft and Linux developers following hot on the heels with operating systems like Microsoft Vista, Linux distros like Ubuntu and 3rd party Linux applications like Beryl, your operating system is suddenly a lot more fun and a far cry from the early days of Windows, let alone DOS. So, over the last few years, with customers expecting the same level of quality online as they do offline, it was inevitable that web design had to move forward with style, content and functionality if it was to remain cutting edge and appealing to the users of these new technologies.
So, seeing as though Apple are of interest here, let's take a look at their website over the years...
(examples shown from April or May of each of year - unless stated)
Back in 1998, Apple's website didn't exactly reflect the excitement of then exploding popularity of the "Information Superhighway".
However, it's important to remember that broadband was not around and the majority of home users were limited to dial-up connections. So the available bandwidth available to the average user set the parameters and guidelines for web design. Making 'practical' websites that were graphically intensive very counter-productive.
In 1999, the Apple website hadn't changed that much at all.
2000 though saw the first hint of a future web style that would eventually become known as "Web 2.0"
This is focused in the menu system that also closely reflected their current OS version at the time. Look closely at the tabs which are rounded and glass tinted - an element that's become very popular today in "Web 2.0" link design. The highlighted news section is still the same as the 1999 version.
By 2001, the menu system had become slightly more subtle and the highlighted news section has changed to something that better blends in with the changing aesthetic.
Apart from the removal of the date above the highlighted news, not much change in 2002
This was obviously a successful design as one year on in 2003, it still remains the same.
Although 2004 is still essentially the same, we see another "Web 2.0" element surface - the rounded coloured glass button.
In the 2005, another "Web 2.0" element made an appearance - washed out reflections. It's important to note, it was a feature that made Apple's forthcoming OS so swish!
In 2006, the reflections have secured a firm place. Also, black is introduced as a complimentary colour in the highlighted news and it's no surprise to note the colour of the forthcoming iPhone.
In 2007, the website is still making use of the black theme, riding on the run-away popularity of the iPhone. Despite the iPhone connection, black does work exceptionally well as a complimentary colour. Let's face it, black and white never go out of fashion.
October 2007 and it's all change to accommodate the release of the new Mac OS - Leopard. The menu system has changed, not only in style but sub options have now been removed. The site is the most minimalist it has ever been - reflecting the trend in Apple gadgets and user expectations for swish, intuitive design.
The Apple site is just one example of how "Web 2.0" aesthetics have come to dominate the look and feel of a website. But subtle tones, reflections and gradients are only just the tip of the iceberg and aren't even the most prevalent features of this trend. "Web 2.0" style has many more attributes that the Apple site does not possess. The Apple site just has a good lineage and is a good example of how some long-standing sites have evolved in their look and feel.
So, before I go into the ins and outs of this style, let's take a look at a few "Web 2.0" examples...
http://www.skype.com
http://www.wayfaring.com
http://
www.springdoo.com
http://www.esnips.com
http://www.pando.com
http://technorati.com
http://www.zopa.com
How to implement Web 2.0
So here for all is a breakdown of the the most typical visual elements that are prevalent in these designs (and many more like them) and also a brief explanation behind their significance.
Rounded edges for those stand out graphic elements
Let's face it, rounded corners are informal, friendly and approachable. There are some new CSS techniques that can be implemented to achieve this rounded corner look (more on that in a later post) and these are being used more and more frequently. However, most graphics packages have the tools needed to create the same look.
Fun, rounded fonts
Whether it's a logo or stand out text for
your Web 2.0 site, nice round fonts are a definite feature. Smooth, rounded fonts lend oodles of fun and playfulness to a company's web presence and its overall identity. People like fun (most of them!) so there's nothing to be lost in making them feel happy about using your website - and there is everything to gain.
Bigger is better.. some of the time
Following on from 'Fun rounded fonts', big text is one feature you'll see a lot of in "Web 2.0" design. Large text is of course much easier on the eye and with the aid of some clever copy writing, information can be delivered to your visitors quicker and easier. Big text though must be used in moderation, reliance on it - in my opinion - can have a negative effect if there is too much. Too much large text means that important elements are easy to miss.
If it's free - let people know about it
Another very important feature is something that's been borrowed from classic graphic design, if you're offering something free or have some kind of promotion or special offer, make it a feature and make sure people's eyes are drawn to it.
Allowing your website to breathe
White space, increased leading in your copy text, and good composition gives your website room to breathe. Websites that are cluttered look messy, text that is compressed can be hard to read and bad layout is bad for navigation - all factors that turn visitors away.
Snazzy graphics
As has already been covered in the Apple website review above, there are other features of "Web 2.0" design... elements like reflections, gradients, glass buttons and star bursts.
Rounding up
As I pointed before, this style isn't always necessary and such aesthetics won't even be considered if a client has something already in mind.
As a design framework, it really is quite nice and is well worth considering for your future projects. I'm sure that in time, other styles will surface (like so many fashions and fads) but for the time being, it looks like the visual style of "Web 2.0" is here to stay and and we won't see the back of this trend any time soon.
Further Reading...
Wikipedia Entry on Web 2.0
http://en.wikipedia.org/wiki/Web_2
What is Web 2.0 - Design Patterns and Business Models for the Next Generation of Software
www.oreilly.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html
Web 2.0 how-to style design guide
www.webdesignfromscratch.com/web-2.0-design-style-guide.cfm
The visual design of Web 2.0
http://f6design.com/journal/2006/10/21/the-visual-design-of-web-20
Last update : 02-11-2007 12:22
|
|
|
(0 vote)