Project Two: Building a Framework for Infographics

After wrapping up the redesign of the NewsMag child site, I knew I needed a break from coding. Especially considering the amount of freelance I’m doing in addition to both part-time jobs.

My next project was to help create infographics similar to the ones that my former co-worker, Michelle Pais, created and rework them for the web. The main goal was to make sure that the presentation of the infographic created a framework so that future multimedia elements could easily be implemented across the site.

Challenges:

I knew that I wanted the infographics to give the illusion that they were interactive. The answer would not be a .swf file because it had to be something that was viewable on most mobile devices and compliant with responsive design.

Separating content from presentation:
Most importantly, it had to be easily editable. This is something that not many designers/developers seem to keep in mind when creating infographics for the web. They’ll make a gorgeous infographic that after a year isn’t meaningful. Nothing is worse than designing a gigantor infographic, and then one tiny detail changes and you have to open the Illustrator file up to even edit it, before reuploading it to the site.

Also, I consistently had to ask myself “Does this help the user understand the information or could it be better stated in a paragraph?” If the answer was the latter, then I knew I had to rework the design.


Above is the most recent version on the redesign site. I’ll post the link and finalized version once it’s complete.

Solutions:

In order to streamline the process of adding multimedia components to the site, Charlie created a framework called “elements” to present video, images, etc… using jQuery Cycle. At its most basic core, it’s a slideshow, just reworked to give the illusion of a presentation viewer similar to something you would build in Flash.

After finalizing sketches of the design of the infographic, I began to lay it out in Illustrator. I calculated the numbers and scaled all of the artwork by percentages, so that essentially the design could To make them easily editable, the design was broken into chunks and then placed on separate Illustrator artboards in one file. It’s a lot easier to export one Illustrator artboard than one huge image. The artwork was designed with minimal text so that additional information was added as a caption in WordPress. Once again, this was to keep everything easy-to-update.

After testing the theory of this, we realized that if the viewer revealed a glimpse of the next slide, then it would give the illusion that the viewer is moving through the infographic. This detail helps differentiate it from a static slideshow.

Looking back at some of my sketches, it’s obvious that the design changed quite a bit from the original plan, but for the best.

Now we have a framework to easily add more multimedia components throughout the site.

— Em

Advertisements