Interactive Dribbble Infographic
keyboard shortcuts: ← previous shot → next shot L or F like
Show and tell for designers
What are you working on? Dribbble is a community of designers sharing screenshots of their work, process, and projects.
121,360,201,005 pixels dribbbled
Copyright © 2009–2013 Dribbble LLC. All screenshots © their respective owners. Shipped from Salem, Mass. USA.
25 Responses
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/
almost 3 years ago
Wow. I'm glad someone hooked you up with an invite—the site is fantastic!
almost 3 years ago
WHAT??? SICK!!!
almost 3 years ago
Love it dude, welcome aboard!
almost 3 years ago
WONDERFUL site!!
almost 3 years ago
Amazing. Welcome. I can't believe you weren't on here before.
almost 3 years ago
Amazing stuff. Glad to have you here. Dribbble again very soon.
almost 3 years ago
Very cool!
almost 3 years ago
Looks great and welcome to the team! Now if only you could get Dan to pull the actual data for you or better yet open it up publicly...
almost 3 years ago
Nice work Jamie!
almost 3 years ago
Love the visualization!
almost 3 years ago
Fantastic all around. Great use of CSS on the site as well. Bravo!
almost 3 years ago
Hell of a debut. Love it!
almost 3 years ago
Respect.
almost 3 years ago
Really great job—well done.
almost 3 years ago
I saw the page on the web before I came to Dribbble to see it here. Very cool graphic! I love how the cards flip on rollover - fun! Welcome to Dribbble!
almost 3 years ago
Loving this so far
almost 3 years ago
Soooooo Good!
almost 3 years ago
well played.
almost 3 years ago
Many thanks for all the comments. I’m currently planning another interactive infographic, slightly more complicated regarding the subject material, but it’s a really cool idea – I’m pretty excited about it!
almost 3 years ago
I always loved infographics, nice work.
almost 3 years ago
Welcome!
over 2 years ago
Nice one!!!!
over 1 year ago
Impressive... how did you created the effect of depth, the % are manually or are they for real?... Lovely!
over 1 year ago
Hey @Nidia Carrillo, thanks! If you mean the sliced 3D basketball, this was a custom illustration I made : )
over 1 year ago