Synopsis
I was tasked with creating an interactive infographic. I chose to do one on Air Hockey tables and how they work. I decided to create the table in an isometric perspective.
I used Illustrator to create the assets and a program called Hype to make the infographic interactive. You can try it out yourself below.
Time Frame: 1 Month (2017)
Challenges
Working in isometric perspective provided some unique challenges. One of the primary functions was to allow people to hover over each element, have it highlight, and then they could click it to bring up information.
Isometric Assets Prove to be Troublesome
When I created each of the elements of the table in Illustrator, they had a large area of blank space around them because images are rectangular. This was problematic when I positioned them in Hype because they overlapped each other causing viewers to click on the wrong element.
Original Isometric Asset — red area indicates wasted space
Optimized Isometric Asset — rotated to reduce wasted space
Solution — Rotate Assets in Illustrator
My solution was to rotate each element in Illustrator and crop the image so that there would be very little overlap between elements. This worked great. This was only one of many technical challenges I encountered through the project.
What I Learned
Making Animations Interactive
Along with working in a new perspective, I learned how to create interactive animations. Hype allows you to create multiple timelines based on different events that the author defines. For this infographic I needed to create 18 timelines to accomplish my objective. This required a lot of logic to make them all work properly.
