The infographic has long been a staple of print media and recently it's grabbed the opportunities presented by digital and run full pelt with them. Every day there's a new data visualization or innovative method of presenting information appearing on our online timelines. HTML5 has been instrumental in this, allowing the best infographics to not only have beautiful designs but also to become fully interactive, easy to digest, and highly sharable.
Now digital agency Forward3D has developed this Star Trek-based infographic for MusicMagpie.com, and the team is so convinced they've invented something new, they've given it a new name - a navigraphic.
Tim Hawes of Forward3D explains: "Rather than sitting the user down in front of all the information we were offering, we designed the piece for engagement. Exploring where science fact and science fiction meet and diverge, we created a piece that users could freely explore using the inbuilt controls, or simply their mouse cursor."
"From the off we wanted to create an authentic Star Trek aesthetic," continues Hawes. "With collaboration from Paramount we used visuals from movie screen grabs, prop and reference photos from the Star Trek archives. Alluding to the different series, we designed separate control schemes to reflect each generation, a subtle point that wasn’t strictly necessary but was something we though fans would appreciate.
"We utilised HTML5 and jQuery to enable navigation around the various scenes, allowing the audience to explore at will. The retro-style doors were a particular favourite, while the animated stars and classic warp speed visualisation give a consistent movement to the graphic. Steering away from Flash was a must, to enable the graphic to be appreciated in the widest array of browsers."
Try out the Star Trek navigraphic here.
Liked this? Read these!
- Pro tips for creating interactive infographics
- Try these free tools for creating infographics
- 10 top movie infographics
Have you seen an inspiring infographic lately? Tell us about it in the comments below!