Building your very own web2.0 layout

So you wanna look web2.0? You’ve come to the right place. In this short feature I’ll guide you through creating your very own webdesign template ready to be applied to your web2.0 application or blog or startup or what else you see fit. You’ll go from web1.0 to web2.0 in 10 minutes.

Starting out

Simplicity, doing less, semantics and standards are all keywords being flung around the web-two-o-sphere. We’ll start out with a sample, simple XHTML template. Toss in a bit of semantic structure and so-called content. In your real design you’ll obviously get the content from some webservice API. However this is just a template, so we cheat and type it by hand.

We’re almost done!

styling2.0

White for the background is the obvious choice.

For body text we’ll go with everybodys favorite, Arial, set in gray. Headlines need to be huge with a slight kerning. We’ll leave body text at the default size (relying on the users preferences - or lack thereof).

In XHTML/CSS-terms we have this: Looks like a pro!

Adding a bit more oomph

The navigation stuff must be horizontal. Enter list-a-matic giving us a nice, simple, horizontal list. While we’re at it, we’ll add some background-color to it. Getting down with Fitts, we increase the hitbox area of the links with some padding.

The links need a little love too. I like green, so we’ll make them green. The hover style needs to highlight the full link, so we create an inverted style for that. Websafe colors all the way.

Now we’re cooking!

Finishing touches

The tagline/description stuff at the top looks too bland, we’ll increase the size a tad. In addition we need to add highlights in selected places.

An all-important thing we’ve forgotten about until now is our only graphical element; the required gradient. Can’t really be web2.0 without it.

The footer needs a link to the Creative Commons license, showing that we really do care about the community. We refrain from adding “Look!! This is validating XHTML” buttons, those are so web1.0. These days it goes without saying, or you excuse yourself with a “I am doing the simplest thing that works”.

Oops, that license means I added a new graphical element there, contrary to me stating that I wouldn’t only a paragraph earlier. Who cares, in web2.0 we make decisions just in time and aren’t afraid to change existing practices.

We now have this template.

Done yet?

Nuh uh, we can’t possible claim to be web2.0 without having a tag cloud, can we? So be it, and it’ll gives a great excuse to link to a bunch of popular applications - namedropping2.0 - really showing that we’re one of the cool kids.

Awesome, we’ve got it all now.: Tag clouds, gradient, big typefaces, standards, you name it. Could it look anymore web2.0? Feel free to snatch it, remix it, mash it up, digest it and spit it back out. It’s yours2.0.