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.
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.
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!
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.
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.
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.
Fantastic! Your ideas intrigue me and I wish to subscribe to your newsletter!
Classic.
Hey Jakob. Emily from eHub here. Nice post! If I ever decide to use green, I'm coming to steal your CSS. Cheers.
Are you talking about Internet 2? Or am I just making a really bad joke ;)?
Hey, This is awesome. Kicks ass. I loved the transformation that happened over the links and was going "Oh yeah, Thats so web2.0" Thanks!
Sunder
Mad props. You should sell this to wannabe web 2.0 startups, they're rolling in VC funds that they need to spend.
So you want to create a hot new Web 2.0 website, but you don't have time for all that tedious, time-consuming...
I absolutely love digg's series of Web 2.0 design posts. Besides the fun that has been made over these...
Hoe maak je een web2.0 pagina in 10 minuten? Met deze - voor webdesigners welhaast hilarische - instructies heb je binnen no-time alle clich�s onder de knie. Building your very own web2.0 layout...
Geo-greeting : Innovation in action. Forget fonts, just use real life structures to print your own name....wicked
Read the rest on Sashidhar Kokku's remote corner on the web...