Imagination Hardware: A Website in Three Days, Mostly.

Imagination Hardware Website

My good pal Dave of David Cole Creative started a new venture last year called Imagination Hardware. He basically makes kits and games designed to educate and entertain people of all sizes by encouraging them to make stuff. His first product was a DC motor kit that you build yourself. It’s a DIY puzzle of sorts, and when all is said and done you have a working motor and and better understanding of why it actually works in the first place.

Soon enough, Dave was selling a good amount of the kits and he didn’t really have the proper bandwidth available to put together a real website. I didn’t really have any bandwidth either, but for some reason I decided to turn the whole project into a challenge: build a working website from sketchpad to launch in just three days. It almost worked too. I’d say when all was said and done we were getting pretty close to the fifth day.

My favorite part of this experiment was that I spent most of my creative time in the sketchpad down at the corner coffee shop, and this step has now become a key part of my workflow. With no computer at my disposal, I was forced to sketch and think and write. I’ve always done a lot of sketching on projects, but getting out of the office does something different. It makes your sketching deliberate and focused but it also taps into a different level of thought that isn’t available to you when you are surrounded by easy answers. (Google, book shelves, etc.)

Rough sketches from the coffee shop.

And when it came time to execute, I jumped right into the HTML/CSS and skipped over my typical Photoshop phase. I used Photoshop of course, but there was never a fully-formed Photoshop composite of the site available before I started writing code. I basically jumped back and forth between the sketchpad and the text-editor and then created Photoshop graphics “on demand” as I moved along. And it worked great.

All of this was made possible because Dave trusted me of course. He knew going into it that he wasn’t going to get to see much before it took shape in the browser—and he was perfectly okay with that. This approach probably wouldn’t work in every situation, but it sure was fun to just go and not spend a whole lot of time nudging pixels around.

The other great part of this assignment was the copywriting. Dave created the Imagination Hardware brand himself: the logo, the packaging, the visual vocabulary—everything about it was already in place. So I got to bring some new ideas to the table via the copy. This resulted in a tagline of sorts: We make stuff for people who like to make stuff. This came about during the coffee shop sketch phase and I really like this point at which design meets content. Quite often on the web, designers work around copy and treat web design as a way of building content containers that will (hopefully) get filled up with magic words at a later date. When really, content and design should always work together to inform each other. “Headline Goes Here” is usually the beginning of a mediocre website.

Anyway, this project was mostly a self-imposed challenge, but more importantly a fun way to help out my pal. (He returned the favor with some illustration work a few months later.) In the end, I learned a new way to tackle web design projects (skip Photoshop, mostly) and the site just got nominated for a 2011 Seattle Weekly Web Award.

Check out Imagination Hardware and pick up a Monster Kit. Tell them Geoff sent you.


  1. Dave says:

    I think the lessons you learned in this process are priceless and they just happen to align with some recent discoveries of my own. As an illustrator, I’ve found that just putting pen to paper as quickly as possible gets the best results. If I think too much the results are awkward and contrived. When I just start scribbling, and let the forms evolve, in real time, on the paper. That’s the good stuff. The same is true for many parallel exercises. Don’t think, just do make!

    Thanks for your work on the site. I continue to get direct orders and I continue to be proud of the both the site and the way in which it came to be.

  2. Hi! I know this is kinda off topic but I was wondering if you knew where I could locate a captcha plugin
    for my comment form? I’m using the same blog platform as
    yours and I’m having problems finding one? Thanks a lot!

    My web blog montre GPS, http://www.associatedchinoteachers.com,

Leave Your Comment