Presenting an HTML5 Interactive Infographic

I recently launched an experimental interactive infographic featuring the popular design community Dribbble. The site makes use of HTML5 markup and some advanced CSS3 effects.

What is Dribbble?

For those not familiar with Dribbble, it is a new design community created and provided by Dan Cederholm and Rich Thornett. The site is home to a very high standard of graphic designers, ui designers, web designers, illustrators, artists, and other creatives.

The name Dribbble stems from the use of a basketball metaphor. Here’s a quick overview: Drafted members (Players) can upload small screenshots (Shots) of what they are currently working on. Much like Twitter, players can follow each other and also comment, like, and share shots. Additionally, players can offer shots out as Rebounds – which is a really interesting and unique dynamic.

Concept

Dribbble invites are highly sought-after. As with any designer, I really needed a piece of the action! – so I had this idea for a poster to try and attract an invite from someone. The initial idea was to present a cut-away basketball, showing inner-layers, a bit like a diagram of the inner layers of the Earth.

While I was piecing the vectors together, it dawned on me that this would be much nicer if it was interactive in some way, so I spent a few (very) late nights thrashing out the code, experimenting and broadening the project scope along the way.

Features

The page is split into three distinct areas, headed using simple questions.

What’s It Used For?

The basketball layers are exposed to represent the core values and uses for the Dribbble community. The rings and dot markers animate either-way round.

Who’s Using It?

Another basketball graphic, but this time resembling a pie-chart to describe the types of professionals using the site. The segments semi-fade to reveal related icons.

What’s With All The Lingo?

This section features 6 flipcards to detail some of the clever terminology used throughout the Dribbble site. This section currently only works in Safari.

Technology Used

The site makes use of some standard CSS3 stuff, such as border-radius for rounded corners & circle shapes, and rgba for transparency. I played around with some simple animation using -webkit-transition and -webkit-transform. Lastly I used  some 3D transforms which are only currently supported by Safari browsers.

There is a smattering of Javascript and jQuery used for a couple of things. Firstly to sniff the Safari browser in order to apply some specific classes. Secondly to add an active class for various hover events used to trigger the animations.

Feedback

The response I have received from the project has been very positive, especially on Dribbble itself. It’s inspired me to explore this type of style further.

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!

Watch this space for updates.

Take a look…

http://lab.4muladesign.com/dribbble/

Please feel free to leave some feedback in the comments below. For updates, you can subscribe to the RSS feed and follow me on Twitter