Interactive Dribbble Infographic

This is my debut shot and the thing which got me a Dribbble invite :)

The project was originally going to be a static poster, but it quickly dawned on me that it would be nice to try and make it interactive in some way. This also offered the chance to play around with some CSS3 niceness, so I jumped-in and hammered out the majority of it last weekend (one night I was up until 9am grappling with the code *almost* smashing my late night record!).

It goes without saying that it took ages to put this together, partly because the only thing I had planned was the cut-away basketball, all the other stuff was realised along the way, meaning a fair amount of experimentation.

As all of you will appreciate, these personal projects have a tendency to get out-of-hand fast regarding self-inflicted feature creep and simply not knowing when to stop! An quick example: at one point I tried to work out if I could make all of the rings (within the ball) have a rollover state rather than just the dots, but this led me into massive unknown 'canvas' territory which was clearly just an unrealistic manoeuvre at this time.

In the end, I had to force myself to put a lid on it and get back to pressing client work on Monday. Thankfully I managed to get it all wrapped-up and ready today.

I've learned a ton of stuff doing this and the response on Twitter has blown me away, cheers :)

The site is here: http://lab.4muladesign.com/dribbble/