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

Doing a Volume of Work

Ira Glass on Storytelling from David Shiyang Liu on Vimeo.

For me, the hardest part of figuring out what I wanted to do later than the majority of my peers is feeling like I’m at the tail end of the career rat race. Of course it’s irritating to see less qualified peers land amazing jobs and move up in the world. But that doesn’t bother me as much anymore.

I’ve found that the most frustrating part of being new in the creative industry is the disappointment I feel with my work when it’s complete. I set very high standards for my projects and want to be proud of them. It’s discouraging to see the work of designers I respect and want so badly to reflect their caliber of design.

When I start to get overwhelmed by the thought of this, I force myself to watch a video I found on Vimeo (which, admittedly, is about every 2–3 weeks). There are a few things that bother me about the presentation but kudos to the guy who created this because kinetic type + After Effects = extremely difficult.

The video is reassuring for a couple of reasons:
1. Knowing Ira Glass (whom I respect greatly) struggled with this feeling speaks volumes to my confidence level.

2. The only way to move forward is to immerse myself in design — everyday — and keep pushing myself in my work.

Looking back at my projects from even January, I can see an enormous amount of progress. This is because between freelance, working at Stephens and working for Engineering, I’m designing or developing around 16 hours a day. If I’m not working, then I’m reading articles, blogs, books, watching videos, etc… that are design-related.

If you’re feeling stuck, or need a little inspiration, I recommend watching it, too.

– Em