Designing a Web 2.0 look and feel

For the redesign of my tangosite, I wanted the new site to have a distinct Web 2.0 look and feel. Based on a very nice Web 2.0 Design Guide, here are the cool things on my wish list:

• Centered design
• Page background with diagonal stripes from the Stripe generator
• Rounded corners
• Web 2.0 looking logo, inspired on Fontshop
• Horizontal navigation with tabs
• Three panes horizontal grid, much like the Substraction site of Khoi Vinh
• Vertical baseline alignment as explained on
  A list apart: Setting Type on the Web to a Baseline Grid

Going from this

To this

The page background

The logo

The old logo was in an elegant font called Elephant. I decided to use VAG Round instead, the most popular font for Web 2.0 logos:

becomes:

The tabbed navigation

The horizontal navigation is an unordered list of hyperlinks as usual. To create the rounded corners, I used the Sliding doors technique, using these images:

on the list element and on the hyperlink. The CSS:

.nav{list-style:none}
#nav{height:18px;border-bottom:solid 4px #900;padding:7px 0 0 17px}
#nav li{float:left;background:url(/domino/archive/2007-04-29-web20-look-and-feel.html/$file/tab-bg-left.gif) left -20px no-repeat;margin:0 3px;padding-left:3px}
#nav li.on{background-position:0 0}
#nav a{color:#ddd;text-decoration:none;padding:0 8px 0 5px;background:url(/domino/archive/2007-04-29-web20-look-and-feel.html/$file/tab-bg.gif) right -20px;display:block}
#nav li.on a{background-position:right 0}
#nav a:hover,#nav .on a{color:#fff}

The content grid

I use a 95px column with 10px gutter horizontally, leaving an extra 10px whitespace from the left and right page edge. Vertically, I intend to line out all elements to a 18px baseline. To test this, I've made a test background combining the column and baseline markers:

Sample

The rounded top/bottom corners of the page

These are not made by CSS using images but created entirely by JavaScript after the page is loaded. More on this technique in a following post.