Okay, so I've updated my Virb page with a customized layout, a unique look & feel entirely. Unlike, y'know, the little change to my own site I made last week ;-)

First, I'll discuss the things that went well.

The design creation itself.
Almost right away when I started thinking about what I wanted to for my Virb layout, I came up with the idea of using the photo of myself taken in the mirror with my camera. Unfortunately, the photo I had in mind didn't lend itself for a layout much, so I created a new one where more of me was visible (in particular, the shoulder and arm).

I ended up with a photo that was so perfectly suited for the layout I had in mind, I hardly had to tweak anything at all about it. It even gave me the horizontally-repeating vertical gradient that I wanted! No photoshopping required.

As soon as I had the photo in my layout comp, the rest flowed naturally somehow. I started with a 60%/40% column width, but eventually (once in the browser stage) changed that to 76%/24% to match up with the actual content distribution.

In & Out of Virb's customization module
What I did to customize the layout was first arrange the content modules the way I wanted them. I then saved the source to a local file to edit in. Whenever I made HTML changes, I reflected those in my Virb layout (which caused the old design to break down partially, but not too badly). I left the CSS out of Virb until I was fully done with it, though.

Overall, the whole Virb module layout customization was a bliss. They thought it through pretty well, leaving a very clean, plug-and-play system for people like me to play with. Good job, there.

The CSS
After the very first step, I realized that I had to break away from my usual methods because they simply wouldn't work in this layout. The horizontal expansion all the way to the edge of the browser on the left, but not on the right, is a kind of layout I hadn't ever done before. This "tri-state" layout (or rotated T-shape, if you will) could have posed difficulties in terms of cross-browser support, but it turned out to work very well in IE6 and IE7.

I didn't really encounter any difficulties with the layout in terms of CSS'ing, save for a few niggles I'll write about next. The whole CSS'ing stage went surprisingly smooth and quick, though — I guess it's just not really all that much work with what is essentially a very light-weight page.

Okay, so on to the things that went not-so-well:

Virb's limited markup freedom
Since you can't change the output of Virb's built-in modules, I had to put a few things hardcoded in the layout section itself. What mostly irked me was their use of tables in places it really wasn't necessary (or semantic, but that was nearly a given). This forced me to use some serious absolute positioning just to get the various elements in the right places.

Also a pain is little markup sillies such as putting links straight in the source in consecutive order, without a class or containing (semantic) element. Or in the comments section, things like using comments_box and comments_box_alt instead of simply using an additional class ("alt") for the alternative rows, saving a whole bunch of redundant CSS rules from being required all the time. Or how about using a) an element around the person's Virb image and b) giving the containing element a class, rather than the img element?

Little illogical things like that were a bit of a pain to work around, but it wasn't too big a deal.

Uhm…
Well I guess this proves that the page really IS quite a simple design, because other than some issues with Virb's output and control, I can't come up with anything that didn't go smoothly.

In any case, I'm just glad I finally got this thing done. It was a good design exercise for me, a good experience in exploring Virb's power and features and probably a good CSS experience, too. Now for some dinner and rest!