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

NYLON Magazine Digital Edition (Web)

I’ll let you in on a secret- NYLON Magazine’s website offers a “sneak peak” look at all of their issues in the past 5 years. That “sneak peak” happens to be the entire magazine. So if you click “The Magazine” on the navigation bar and then on any of the covers you can read the issue via zinio.

Although, it sometimes lags (most likely due to my computer/internet connection) zinio did an awesome job creating this viewer. The interface design is beautiful and it gives you numerous options on how to view the content. Not only is it available in full screen mode, but it also allows you to embed any page/issue by providing you with the code.

I absolutely love that NYLON has a digital free access version of their magazine. I’m able to take screenshots for posts instead of tediously scan the print copy. The only thing that confuses me is why do they call it a “sneak peak” if it’s the whole magazine? As a print subscriber, it leaves me wondering why I should pay if other people can just read it online for free. Also, why in the world would they charge for the iPad version of the magazine if they don’t for the web version?

Obviously, there are many pros to being a print subscriber and having the actual magazine in your hands to read. And on the iPad, I can’t access the digital website viewer because it uses Flash. Part of me is wondering whether the full digital magazine is only supposed to be viewable if you’re logged in and you’re a print subscriber. This would make more sense. However, to clarify: I think it’s great that the digital version is free, just confused as to why.

Below I tried to embed the NYLON November 2011 zinio viewer, but WordPress ain’t havin’ it. It limits the number of times you can zoom, so I’d just look at it on NYLON’s site. I included the embed link, though!

http://www.zinio.com/widget.jsp?is=416196386&pg=1&type=lgNylon-Nov-11

Embedding multimedia to better convey stories

If you read a review about glow-in-the-dark makeup, you’d definitely want to see it demonstrated, right?

I was happy to see NYLON taking advantage of the power of multimedia in their article “Glow Up.” While they could’ve called it a day with photos of the product and a 200-word blurb, they embedded a video showcasing the product. Although they didn’t produce the video themselves, it was relevant content and furthered my understanding of the makeup.

It would’ve been the icing on the cake if they’d tested the makeup on their staff and posted a short video of it. Nothing too fancy, just something to let its readers know that the staff is actually testing the products they review.

It amazes me how few sites link related, external content to their site (guilty, I know). As long as you’re not claiming it as your own, then I’m not sure why you wouldn’t. The benefits are obvious. Embedding content or including hyperlinks serves as a great cross-promotional method for directing traffic to both sites. If a viewer reads the article on Nylonmag.com and watches the YouTube video of “Fluo Night” then both platforms win.

The key is that the linked content has to be specifically related to the article. It’s pointless to practice this if it’s not enhancing the audience’s experience. A simple tactic for increasing site traffic that more sites should be implementing.