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

Diving into PHP


For the Mizzou College of Engineering, I was presented with the opportunity to redesign and combine the News + Magazine archives child site, based on the existing WordPress framework Charlie uses for the rest of the site.

Challenges:
I can’t believe I did it. This project was my first time diving into learning PHP. At times it was horribly frustrating and codex.wordpress.org quickly became one of the top visited sites in my browser. Luckily, I had a great framework to reference and mentor to bug which helped me implement my mockups.

The goal of this redesign was to combine the News and Magazine posts into one archive page. Since Mizzou Engineer Magazine is published twice a year, I knew making the page look alive would be challenging.

Another major constraint was accommodating for the lack of visuals per issue. Not every story yields to gorgeous, hi-res images, but I figured that one per issue was a reasonable expectation.

Because of the technical language that coincides with this type of writing, the articles often have lengthy headlines. While wireframing this project, I had to keep this in mind.

As always, I knew making the site easy for the authors and editors to use was key in ensuring site longevity.

Solutions:
This project definitely taught me the value of working quickly and moving forward. If I was stumped on something, I learned the importance of switching tasks, coming back to it later with fresh perspective and giving it another shot. If it still wasn’t working, it was time to consult my resources.

In order for this page to not appear static, I decided the last four issues would be enough to entice the reader without looking dated. Including the magazine covers would solve two problems: it would help add visuals to the site while also providing the user with another way to find a story.

Since news articles are published more frequently than the magazine, the bottom portion of the site pulls in sticky news posts, which give the viewer the illusion that the site is updated more often than not.

To make the new features of the NewsMag archive page easy to use, I created custom post types and meta boxes. This would allow the author/editor to simply input information on the post page and upload the magazine covers into the media editor at the click of a button.

See the live site at www.engineering.missouri.edu/magazine-archives