I was asked to create an interactive infographic on the basic timeline, and aftermath of the Fukushima nuclear power plant disaster in Japan on March 11th, 2011. I had free reign to stylize it however I wanted, but including the hard facts of the event.
Being able to condense a long list of facts and make it interesting and informative enough is a task in an of itself (not mentioning the visual stuff yet). It’s very important to get the point across in writing as the visuals just reinforces what is written.
It’s fairly common to sketch ideas out on paper before designing digitally. But since I come from an animation background, I find it super important to start off with pen and paper. In terms of getting an idea across, it's the fastest and purest form. This stage also lets me find the potential of concepts as well as the limitations of the interactive parts. I'm not a technical guy so it's a good point to set boundaries on what I can achieve realistically for the schedule.
Again, really rough stuff here but I find it’s a lot easier to hone in on what the main ideas are. I also like to sketch random things that has nothing to do with anything because it loosens up the mind a bit.
A timeline is a point in time where an event starts, and some time later, it ends. I wanted to incorporate color as a mechanism for time change. I learned this technique in my animation program where movies would use seasons to emphasize big change within the story. Colour, same thing.
In the example to the left, the infographic starts with a scarlet red; ends off with a subtle white. The red represents anger, and confusion when the plant exploded. As the red deflates into less alarming tones and finally into a white, the reader is ‘enlightened’ by this terrible disaster with some positive, hopefully reassuring facts about the aftermath.
I sketched ideas, embedded color samples to layouts. This is the time where I’m most comfortable with. Having the crucial facts, I can now have some fun jigging and re-jigging to make the almost perfect layout that I want. This step also lets me change up wording a bit for emphasis and really play with colors and tone. I grabbed a couple palettes from COLOURlovers to get a sense of mood for the infographic.
I pulled these colors directly out of my completed infographic. But exclusively through color, you can see what is meant here. Each slide is a stage in the story. I wanted to indirectly put the reader in that space in hopes they subconsciously experience that moment in time. Even though there isn’t 7.1 surround sound or hyper realistic high-res 3D stuff going on, I can still try to make an impact using simple shapes and colors right?
As the method was 'telling a story' for the infographic, the visual style was 'organic'. I chose a variety of semi-japanese-inspired patterns and edited each to tone them down a bit. Almost every image has some sort of texture on it since I'm a big fan of subtle textures. I grabbed a few from Subtle Patterns and slapped them right on there, and right away, my images popped. Cool.
Keeping with the organic style, I knew straight lines aren't going to work out for the composition, so I kept them at a minimal. Even rotating a single line a couple degrees can really offset an entire composition. I tried skewing straight lines a lot near the beginning of the infographic just to enforce the chaos of what was happening during the accident, and gradually, sparingly near the end just to create the illusion of 'order' where things are starting to get sorted out after the disaster.
Everything I do (or think of) derives from a place of humanity. Illustrator is my daily driver for most design-oriented things. But as we all know, no machine can replace the hand. (No sexual innuendos here!) I wanted to create something organic, that felt real, or as real as I can get it to be. But I also didn't want to make something fake, que in skeumorphism. Ah, I had to say it.
So I had a delicate situation here. I decided to simplify the cutouts but not making it look TOO real. Sharpening corners, adding texture where they ought to be and adding drop shadows when necessary without over-doing it which was a delicate process because each drop shadow I added, really made me think of Target's new redesign... Yeah...
This is the part where NOBODY should look at my code but just continue reading...
So the visual design is done but I was on a time crunch. I had certain ideas of how some of the interactive parts would work. Some were too ambitious for my schedule, some were too technical. I wanted to add a part where users can interact with it, where the user has choice.
I scanned around ye olde internet to find jquery plugins to do exactly what I wanted. I’m a very visual guy so before looking at the underlying code and what the potentials were, I skipped it. BIG MISTAKE. After spending almost a day trying to find the exact code that I wanted, I realized the jquery plugin, Super-Scrollorama has almost, if not, everything I needed. Had I spent the time to look through the code and try to understand it a little more, I wouldn’t of spent the day looking for what I needed exactly. But to understand something we’re not comfortable with takes time, patience and effort. Jquery plugins are out of my comfort zone for now, however I do learn a lot while I’m tinkering with them.
The faux index.html obviously worked on my browser I was coding in. But what about other browsers, what about older ones? Updated ones? Screen sizes? Mobile? What about Os’s; Windows? Mac?
It’s a pretty long list of requirements at first thought. But I decided to just focus on Chrome to work with PC or Mac, at 1280px screens or higher. Why Chrome? I don’t know, it just worked out at that time...