Generic "Web 2.0" Layout...

Web 2.0? Heyyyyyy!
What is Web 2.0? - Well there isn't an definitive definition but there are various interperatations from several websites such as Oreillynet.com or Wikipedia.org.
Personally, "Web 2.0" is a phrase I don't care for very much for and I believe it's nothing more than a buzzword at the moment with a little too much hype behind it. However it should be noted that the sites that do qualify as "Web 2.0"?, such as MySpace, Flickr and Digg are still very impressive and implement avaliable technology, not to mention newer technologies such as AJAX, Ruby on rails etc, in a ton of great ways.
But that's not what this page is about. Instead this is my attempt at creating a clichéd Web 2.0? layout. To design this type of layout there are a few criteria I've noticed that are a must to include into your website to give it that "2.0 look". These are:
- Rounded Shapes - These are very popular these days - boxes, navigation menus, headings etc. They can be pain to implement sometimes, especially with fluid layouts, but overall they look good and can give a website a somewhat user friendly feel about them.
- Gradients - The gradient has become a lynchpin of modern web design - and in some ways, deservedly so.
As a way to spruce up flat colour, the gradient is unparalleled in terms of versatility when designing for the screen. Where flat colour on the printed page takes on the quality of the medium - i.e. glossy paper yields glossy colour - flat colour on the screen has no discernable texture, no variance in lighting. And so, solid colours on the screen can be lifeless and dull. Thus, the gradient has come to the fore to give a gloss to websites everywhere.
The gradient tool if used correctly can be a wonderful tool to add a touch of interest to a design, but unfortunately the gradient has become a crutch to many web designers.
- Diagonal Backgrounds - Diagonal backgrounds, for some reason or another, have surged in popularity amongst designers over the course of the last year or so. Perhaps for the same reasons as the gradient, this particular style of background is being used to lend texture and variance to what could have been an otherwise dull flat colour.
The diagonal background is usually spotted at an angle of exactly 45 degrees, to facilitate easy tiling, and will usually be only a shade lighter or darker than the background colour.
- Pastell - Pastell colours are great for the usually social orientated "Web 2.0" websites we see these days, such as Skype. They evoke calm and peaceful emotions and put you at ease, as opposed to the visual assault on the eyes we had several years ago of bright greens and reds. Definetely one of the good things to come out of the "2.0" culture.
- Oversized Fonts - This was unexpected - The era of tiny 8px Verdana is gone - monitor resolutions have increased, and CSS now gives us finer control over the appearance of text at larger sizes.
Now we're seeing a trend towards larger fonts - much larger. The largest headings are no longer limited to 24pt - the sky's the limit with some designs, and even body copy is seeing a size increase to 14pt (which is what is used here) and beyond. Clarity of message and simplicity seem to have taken presidence over style.
- White Backgrounds The black text on white background arrangement is near universal, a timeless standard that is very rarely questioned. Despite the multitude of colours available to a designer, the background for any given site will usually be white. Why is like this with the web? - Perhaps it was the simple clean style of Google that kicked this off into the web 2.0 trend. Whitespace in a website is important and helps keep the page looking clean and easy on the eye, whilst improving readability.
This isnt a definitive list, there are a few other factors that are quite popular (such as tag clouds), but these are the ones which are most prominant. Onto the mystery that is know as the blog...
Feb
23
Posted by Azeem |
16 comments
The popularity of the blog, or weblog as it was known as, has skyrocketed. Millions of people have turned to "bloging" as a way to express their views, thoughts and musings on pretty much anything and everything. It seems as if everyone is doing it - from angsty teens to pop stars to even Microsoft executives.
I've always felt they had a slight sense of delusional self importance to them. Why anyone else would have a vested interest in the ramblings of another person they may not have even met is beyond me - but who am I to argue. People apparently are.
This is an example of a typical blog that one might use to "express their thoughts".
So that's that. I hope you like the layout. If you decide to use this design or parts of it, I kindly ask you to leave the "Design by AzeemAlim.co.uk" or "Inspired by AzeemAlim.co.uk" link in the footer.
Additional Info
Web 2.0 designs usually are 2 or 3 collumn layouts - various thing can be kept in this collumn such as links, a gallery etc.
This webpage is coded entirely in Valid XHTML 1.1 and CSS. This website is a fixed width - which means it will look the same on any screen resolution. Also no tables were touched in the making of this website. That's a good thing. It's also been tested in IE 6 (I.hate.this.browser), Firefox and Safari.
Here is a cool box complete with rounder corners - its also flexible which means it will increase or decreace in height depending on the amount of text in it.
Web 2.0 Websites
Gallery
Another cool box with rounded corners - only green.
This calander would be used in conjunction with the blog.
| February 2006 |
| Sun |
Mon |
Tue |
Wed |
Thu |
Fri |
Sat |
| |
|
1 |
2 |
3 |
4 |
5 |
| 6 |
7 |
8 |
9 |
10 |
11 |
12 |
| 13 |
14 |
15 |
16 |
17 |
18 |
19 |
| 20 |
21 |
22 |
23 |
24 |
25 |
26 |
| 27 |
28 |
29 |
30 |
31 |
|
|