It’s hard to believe that it’s been close to a year since Paravel had the opportunity to be a part of the Lost World’s Fairs project for the launch of IE 9. But what’s not hard to believe is that we were downright giddy when Nishant Kothary, our friend over at Microsoft’s Mix Online, approached us this spring with a new challenge: design a responsive site for the 2011 10k Apart contest.



Brainstorming

If you know Paravel well enough, you can probably take a few easy guesses at what kind of direction we had in mind. It’s no secret that we’re all big fans of the vintage automobile vibe.

image

Whether it’s a 1967 Mustang, a parts box for an old distributor or an owner’s manual for a 1965 Cadillac, we’re all over it. For inspiration, I headed to the old car manual project and flickr. 



Mood Boarding

With the vintage auto vibe in mind, I felt that putting together a mood board would be a great way to kick things off and was immediately drawn to an old 1960 Ford Owner’s manual. The simplicity of the yellow and black color scheme was really inspiring.

image

But I wanted the look to be a little less like an owner’s manual and a little more like an instruction manual. I was stuck on the idea that this would be a “Responsive Toolbox” of sorts… like if responsive web design existed in 1970 and there was a Motor Instruction Manual you could buy at your local Sears.

image

I found additional inspiration from old oil cans, labels and parts packaging.

image

Branding

With the mood boards approved, I sketched out 4 or 5 iterations of the 10k responsive logo.

image

In framing the logo, I tried everything from a hexagon to a square to a circle. At first, I settled on the hexagon. Dave kindly reminded me that I had never watched Lost so I went with a rectangle instead.

image

Web Fonts

I had used Futura a bit in the past for Mustang Mania, and was excited about the opportunity to use it again. The only problem was it didn’t have a great web font offering. ..yet. I think we were actually in the process of presenting mood boards when Typekit announced that ParaType’s Futura PT was available, manually hinted and looks great on Windows. Everything else was proudly set in Proxima Nova (another office favorite).

image

Color

Color schemes were the next challenge. I tried a variety of colors inspired by vintage automobiles, but they all seemed too formal and forced.

image

The site needed to look like it had been photocopied and handled with greasy hands rather than something handed out in a showroom. So I arrived back at the yellow from the 1960’s Ford, grunged it up and went with a white background. After a few iterations, I arrived at this.

image

Tweaks, Tweaks and more Tweaks!

With the logo, type and color scheme pinned down, we were moving right along with a traditional banner. Headline and copy to the left, product shot and call to action to the right. We decided to get together for a Paravel work day to wrap up the remaining details.

image

But you know what we decided? The traditional banner was boring as shit. It needed a tri-force punch in the face. This site was supposed to be “responsive with a Paravel twist” yet we hadn’t:

a) shown off responsive in the banner or

b) utilized illustration to make it unique

So we spent all afternoon getting frustrated and tearing off page after page of graph paper. For us, that’s how every great site is born. If we don’t get worked up while staring at a wall all afternoon, we’re doing it wrong.



Finally, A Solution

Trent suggested I spend the next few days drawing a bunch of devices. We wanted it to look like a parts catalog with all kinds of diagrams and labels. That went through a few iterations as well.

image

We are super happy with how it finally ended up (and it’s responsive!). Thanks to Dave, it’s even swipe-able on your iPhone. A true team solution.

image

As Trent said in a previous post, “The only downside to our project is that we’re finished.” It’s not every day that a client puts the amount of faith in our team that MIX did. We were honored to put our own personal stamp on the latest 10k contest and I know I speak for Trent and Dave when I say we hope you have as much fun with it as we did. Be sure and check out the other posts about the project:

Trent

Dave 

Nishant (Rainypixels)

Mix Online