Scott McCrindle, Web Designer

The challenge here was to faithfully reproduce in XHTML/CSS a stunning web interface designed and prototyped by Brian Maltby at Shikatani Lacroix. The solution required something I had not before attempted.

The navigation system required coloured bubbles that would overlap one another, grow in size when hovered over, and split apart to allow secondary and tertiary navigation that would accomodate growth. This is relatively easy in a vector tool like Flash – but we needed to use XHTML/CSS.

Enter the PNG image format. The coloured bubbles were drawn in Illustrator, then output as PNG with a transparent background. Simple enough, but I had to set the matte colour to none to avoid any anti-aliasing that would cause ghosting around the edges when the images grew in size over adjacent circles, or did not overlap them at all. This was all possible because current browsers support the PNG format – anti-aliasing is achieved using alpha transparency.

So thanks to Brian’s great design, the PNG image format and some fantastic photography, I was able to engineer a polished interface that emulated the sharp, crisp look of Flash but offered Shikatani Lacroix the power and flexibility of XHTML and CSS.