Throughout this article I will illustrate the creation of a weblog with the web 2.0 style. From the briefing to the CSS development.

Guidelines

The blog will be created to my brother who had asked me to do that, besides, he gave me some guidelines of some design aspects that he would like to have in his blog:

• Dark background;
• big font sizes;
• some round corners;
• a place to put some logos;

Also he send me some links of site that he thinks are really cool, below there are some of them.

Research

With the guidelines and some references in mind I started my research and found some good links about designing web 2.0 style sites such as this Web 2.0 how-to design style guide, which explains really well the web 2.0 features showing examples of sites, concepts and what not to do.

After reading a lot of site and got some good insights I became the creation of the layout, first the idea of columns, where the navigation will be, the main content, and stuff like that. Talking to my brother, he said that he would like to have a vertical navigation with a sidebar where he could add his favorite links, search, the blog's navigation, flickr photos, delicious bookmarks and etc... so I came up with a pretty simple wire frame.

Wireframe of the blog, liquid layout

Layout creation

With the wire frame done I knew where to put the content, so I had to start adding loren ipsun content there. One thing that I think is really cool on the web 2.0 trend is the gradients, they create a really cool visual effect of difference on planes, elevating some parts and put some in a lower level. Another cool effect that I have already used on a personal project and I thought would be cool is that "emboss effect" in lines that divide content as Bartelme uses in his site. The dark color and the variation of them are a feature to be exploited.

For the header I thought that would be nice to add an illustration or a photo like Veerle does. I start thinking which photo would be cool, looking for the right shot I remember that my brother had taken one pretty cool in Philadelphia in front of that Metropolitan Art Museum where Rocky Balboa always finished his training, as my brother loves Rocky and with the new movie coming to the theaters, I thought that image would fit like a glove.

After all of that and several hours in front of my computer using Macromedia Fireworks I came up with the layout below. Click here to open the real size version in a new window

The layout, round corner in some parts, gradients, pretty much everything

Showing to my brother, he said that he liked it a lot but that there were some issues to be fixed. However he hasn't told me them yet. So the only thing that I can do now is wait, and as soon as he point the issues and we fix them, I will continue this article until the CSS is done.

About the author

My name is Fabio Sasso, I'm a graphic/web designer from Porto Alegre, Brazil and I'm the founder of Abduzeedo. I hope we can share lots of information, tips, and ideas through Abduzeedo. Also you can follow me on Twitter or my personal site at http://fabiosasso.com.

Sponsored Links: