Here’s a fun little project we did recently: creating an interactive needle, dial and slider, to display some important and dense data in an novel way for the Global Footprint Network, a nonprofit organization established to enable a sustainable future.
We were given, on the one hand, a really nice vector design for how this gauge (dial) should work, and on the other hand, an Excel sheet with environmental factors broken down in various numerical ways by year, and we were told: “Make it work!”
Beyond the general need to get it animating properly and smoothly, the biggest hurdle we had on this project was to develop this tool without using Flash, so that readers coming to this site on their mobile devices (specifically ones that do not have Flash support) would still be able to view the gauge and interact with it. We chose jQuery, jQuery UI and jGauge to form the base of the meter and its core functionality. In addition, the “digital LCD” typeface uses Cufon, a tool which lets you use fancier, non-Web standard fonts without needing to make them into rasterized graphics . To wrap it all up in a nice package, some advanced CSS was used to design and customize each element to match the static design collateral.
The lovely little touches (changing colors, smooth rotation) make this one of our favorite small projects lately. Try it out!
Comments