Funnelbox: a design agency website to emulate

Words: Jenn Lukas

Award-winning, Oregon-based design production studio Funnelbox has a snazzy new site, and it's a masterclass in how to present video in an engaging and effective manner.

The website employs prominent large imagery and a dark, sophisticated colour scheme that's wonderfully easy on the eye. On top of all that, the rather beautiful opening slide show comes with some neat CSS effects when hovering over the image.

Hover over the opening slideshow and you'll some subtle but neat visual effects

CSS effects

Using additional divs as masks, hovering transitions the opacity and width of these divs to produce a very usable interface and a nifty effect to boot.

"Motion was used to enhance the experience where appropriate, but it wasn’t overused," discloses developer Neal Mckinney. As you delve deeper into the site, you will find these animations and transforms scattered throughout it in appropriate locations; one example is on the
Our Work page.

The agency puts as much effort into blogging about others' work as it does its own

Circular shapes

Elsewhere on this same page, you’ll see CSS used to create the circular shapes of some links. "I try to keep my CSS as simple as possible for browser compatibility," Mckinney adds enthusiastically, "so for the circle-cropped images I simply applied a large border-radius, and used CSS3 PIE for older versions of IE."

animations and transforms scattered throughout the site in appropriate locations

This showcase was originally published in .net magazine issue 233.

Now read these!