Tag Archives: tophome

Firestorm – Guardian’s latest multimedia project


After the Snowfall, now a Firestorm. The Guardian produced a multimedia narrative about bushfires in Tasmania, in a multichapter immersive narrative. It’s well built, it leads towards a more linear narrative, but then again, they have an ebook as an end product.

Best features: the background audio provides an effective sensorial experience, and the large images under the minimalistic text have a huge impact, behaving both as background and illustration. If you want to know more about the production process, this post at Journalism.co.uk has some great insights from the team that built Firestorm:

At the same time, Jonathan Richards, the Guardian’s interactive editor, was evaluating what would be needed to create “rich article pages” incorporating all the available media at their disposal.

“There was, I guess, an appetite to see how you might integrate those media, ie the visual and audio media, in a much more tightly integrated way,” said Richards. “So rather than doing things that would simply supplement a text page, how could they perform a more compelling and stronger function in the interactive and I guess that was the challenge that we set ourselves.”

As such, the media was conceived differently right from the start, said Richards. So instead of talking heads and general views of the area, they needed something to cater more specifically to the project’s needs: images and footage that would complement and supplement the traditional storytelling forms.

A must see story.

FIRESTORM, The Guardian

Interactive Radial Calendar – SVG / HTML5 / CSS3 / Javascript

SVG/HTML5/CSS3 project – Acacia longifolia Interactive Phenological Radial Calendar from Alex Gamela on Vimeo.

I’ve experimented recently with ways to create interactive visualizations using HTML5 and CSS3. Starting with a SVG based design, I used HTML/CSS to animate and create transitions for specific items of the visualization. SVG is quite useful, because we can have more control over the design, while establishing classes and id’s for elements that can become alive with CSS3 magic.

check the interactive calendar in English or in Portuguese – works better in Firefox

Here we have the phenological cycle for the Acacia longifolia, one of the most problematic invasive plant species in Portugal. How do I know that? It’s my current job. And like most scientific subjects, data and good visual elements are aplenty. This information and the images were provided by my colleague Cristina Morais, that included this calendar in her PhD thesis presentation.

I love a well designed calendar or any other time related object (I have deadline issues…)because, in spite of time’s linear, progressive motion, it’s also cyclical (…and hamster syndrome as well).  I found some creative, stunning, stylish layouts and the radial stuck with me, since we’re conveying the idea of a cycle, after all. This  here and this one too cleared any doubts.

I had already tried this concept, but this time I wanted to take it a step further. I’m not a designer so I tried my best to make it look not really ugly, and adapted the code from this great tutorial from Codrops, which is one of the best interactive design websites ever. Follow them.

The popup images are activated through a pressbox .js script, placed in the index.html file. Neat and simple.

Even so, my coding skills weren’t enough to create all the actions I wanted, and I failed to make it cross-browser compatible: it only works 100% on Firefox. Chrome and IE do not render the calendar as seen on the video above.

For this project I used Adobe CS6’s Photoshop and Illustrator (which could have been replaced by Inkscape and GIMP, both free powerful alternatives to the Adobe products), and edited a lot of code on Notepad++.

It was an interesting project, and I’m planning to do a few more. If you have any suggestions or ideas send them to me.

How they made Snow Fall


I had been waiting for this for some time now: the step by step explanation of the development of NY Times most successful and attention grabbing multimedia narrative Snow Fall.  I wrote about the resources that were applied to this (in Portuguese), and how they may seem excessive both in the number of people involved and production time, assets newsrooms don’t have.

Though I believe there is a risk this type of narratives will only happen sporadically, and created only in digital minded newsrooms with huge resources – smaller teams need to learn how to produce consistently multimedia interactive stories, using their own scarce resources (when they turn to this mindset, I mean) – this is  a great walk-through into Oz, i.e., the process of creating Snow Fall at the NY Times newsroom, from which we can draw our own conclusions about what modern news reporting is all about. Or should be.

Q. There’s a ton of audio and moving-image work in Snow Fall, and you used a lot of techniques from filmmaking, but within a very reading-centric experience. What kind of challenges did those elements present?

Catherine Spangler, Video Journalist: The challenges of crafting multimedia to complement a text-based story were the same challenges faced in any storytelling endeavor. We focused on the pacing, narrative tension and story arc—all while ensuring that each element gave the user a different experience of the story. The moving images provided a much-needed pause at critical moments in the text, adding a subtle atmospheric quality. The team often asked whether a video or piece of audio was adding value to the project, and we edited elements out that felt duplicative. Having a tight edit that slowly built the tension of the narrative was the overall goal.

How we made Snow Fall, Source

Worth checking this Storify page to get an insight on this project