344 Design

344 Design

The website you’re currently visiting is the third incarnation of 344’s online presence, and the fourth version of my online portfolio if you count “Bucher’s Brainbox,” which my Wieden + Kennedy colleague Darrel Dingerson programmed for me in 1997. The site keeps evolving to suit the work and to make use of technology as it becomes available. But that doesn’t mean I stopped loving the previous versions.

When I graduated from Art Center in the fall of 1996 most students didn’t have portfolio websites. I certainly didn’t. At the end of my final semester I had just exchanged my very first e-mails—setting up an interview at Wieden + Kennedy in Portland, Oregon. The idea of an online portfolio was far from my mind.

That changed rapidly after I was fired from my shiny ad agency job less than a year later. By then it seemed absolutely essential that I have a website. Was it really? I’m sure I would’ve done fine without one—all my subsequent job interviews involved a portfolio case and laminated work samples—but I needed a place to focus my anxiety. Websites are excellent emotional heat sinks.

Look inside the BrainBox. (Yes, I used Impact as the typeface. I was young.)

My W+K colleague Russell Davies, later of the Open Intelligence Agency, had registered the URL brainbox.com. He thought it would make a great name for my first site, and gave it to me as a gift. Darrell Dingerson, another art director on the Microsoft account very kindly volunteered his time to program the site for me. It looks so plain and simple now, but between the opening Shockwave animation and the frames… I’m not saying it was the greatest thing in the history of ever, but it wasn’t as quaint then as it looks now. Take the archived version for a spin in a new window.

With the official beginning of 344 Design, I kept Darrell’s structure for the portfolio, switched the background to a sort of olive color, and swapped the Brain Box for a more respectable looking 344 seal. Big companies try to look small, small companies try to look big. You can still check out the archived version, or take a quick video tour with me here:

The Seal Also Rises, and Helvetica is ascendant.

Simple as it was, that website served me exceptionally well from 1998 through 2003, when my friend Terry told me that it might be time to step up my game. Luckily, she knew just the person to help me.

Daniel Holmes was then a recent graduate of CalArts—the California Institute of the Arts in Valencia—and a gifted Flash artist. I still do the great majority of my work alone, but back then the idea of letting anybody help me with anything creative was very uncomfortable for me. But Terry sang Daniel’s praises, and what was the harm in trying? I told him that I wanted to have a menu that was based on the bubbles I had started using in my illustration work. He asked me to draw a few dozen, so he’d have something to play with.

Next thing I knew, he came back with a beautifully animated interface of living bubbles. His dedication to detail floored me. As you passed over the bubbles with your cursor, each bubble spun up from its original pink or red state into a big white whirling dervish state. It was perfect. It felt exactly right. Which is a reaction I almost never have. It took me a full year to realize that the effect came in part from the fact that each bubble would grow into a different white dervish each time. It was randomly assigned. Genius! Of course, this is the version of the site featured in the video at the top of this page, but you can also play with the archived version here.

Each bubble was assigned a link to a portfolio page. I could change those links through a simple text document placed on the server, so I wouldn’t have to come crying for help each time I needed to add or subtract a project. Once a bubble was selected, it would shrink and jump to the top of the menu, creating a string of bubbles representing the pages you’d already seen. That way you had a non-linear option of going back. Each bubble would also trigger a small subtitle giving you the name of its linked project.

I put together a little opening animation of bubbles percolating out of the 344 seal, which was accompanied by a custom chime created by David Norland, formerly of Solar Twins. My initial plan had been to have ambient music playing throughout the site, as was the fashion at the time, and David came up with a wonderful soundscape, which you can hear below:

The previously unreleased 344 Theme, intended for infinite looping.

In the end, I felt that the static images couldn’t quite stand up to the music. Even with animation it’s tricky to find a cool, surprising track won’t overpower the images. In other words, I chickened out and kept the site silent.

As for the project pages, I built each one from scratch, based on photos I’d taken myself—except in the instances where I got the great Jason Ware to shoot the images. Each page was different from the next. There was no grid. There were no rules to keep things consistent beyond the use of Helvetica. I did all the type in Photoshop, so I could properly distort it into perspective that matched a particularly adventurous shot. It was a ton of fun designing the site that way, but also made it a major undertaking to add new projects.

Another problem surfaced over time. Daniel had made the menu from 23 Bubbles, allowing for a total of 46 projects on the site. This seemed like a lot at the time, but soon became a bottleneck. In the end, the site became more and more out of date, because I was forever behind in adding my more recent work. Still, that site was my calling card from 2003 until the launch of this site in 2013. Ten years! I still love that site, but with the arrival of the iPad—the Flash-incompatible iPad—it was no longer functional for a significant number of devices. And it was time for something new anyway.

Which led to three years of fiddling away on the current site with my friend and colleague Simon Zirkunow, who built me a sharp looking content management system that could happily expand to hold all my projects. And here we are!