The Snow Fall
http://www.nytimes.com/projects/2012/snow-fall/?mcubz=0#/?part=tunnel-creek
Last updated
Was this helpful?
http://www.nytimes.com/projects/2012/snow-fall/?mcubz=0#/?part=tunnel-creek
Last updated
Was this helpful?
The snowfall project created by NyTimes raise a lot of following discussion for future webpage presentation and storytelling of online news
多媒體的整合 Multimedia-integrated
Rendering 3D model to animation (A 3D model itself speaks nothing at all－> storytelling)
影片與圖示路徑的結合
瀏覽的步調、使用者為中心的瀏覽。Pace, user-controlled (scrolling), and animation
要直接播放？或者用滑鼠控制？
Prototyping
integrating graphics, text, and multimedia
presentation on different device
About the skills
Q. On the tech side, what are the ingredients of Snow Fall? What libraries and tools did you use to build the final project?
Design thinking
Q. What was your biggest or most interesting tech (or design) problem?
Andrew Kueneman, Deputy Director, Digital Design: Managing the path we wanted the reader to follow. We have several visual/media elements that sit within or closely alongside of the narrative. Using scale, positioning, animation, and other design variables to control how much these elements interrupted or crept into the story was critical. We wanted the reader to experience these supporting bits of the story without feeling overwhelmed or removed from the narrative and pace that John had established in the text.
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?
Graham Roberts, Graphics Editor: With the visuals, especially ones that would actually interrupt the reading, we wanted it to feel like a natural continuation. This required choosing appropriate color palettes, and the right kind of fluid movements. The reader would hopefully feel that they were reading into the graphic, and not see it as a distraction. Content wise, these elements needed to occur in passages that were challenging to express with words alone, like the layout of the terrain, and the shape, speed and duration of the avalanche itself. Or something that was very hard to follow without a visual aid, like the trajectory and timing of each skier’s path down the mountain.
Q. How did you find the right pace for the animations? How do you work out the rhythms for something like that?
Roberts: The pacing of the animations was driven by many factors. The small airbag animation needed to be quick—a little thing to give the reader an understanding of what an airbag was without making too much of a fuss. The pacing of the avalanche simulation was driven by data. It is a real-time experience of the avalanche as it occurred. The rendering of the paths down the mountain was driven by the user’s scrolling motion, connected directly to the pace that they read through the story. The Cascades flyover, in the beginning was given a nice slow movement.Readers were just becoming familiar with the story at that point, and it allowed them to absorb the topography of the setting.
Testing and debugging
Q. How long did you all work on it? Roughly speaking, how did the project’s phases break out?
September and started thinking about the initial design for the project. Pretty soon after that, we went into the prototyping phase and collaborated on how best to integrate the graphics and video into the narrative experience. There was a lot of trial and error and experimenting. For example, Xaquín González Veira or Graham Roberts, two of the graphics editors on the project would throw out an idea, and after roughly coding it up, the two of us or the bigger group would look at the interaction and decide whether it was worth pursuing.
Q. How much cross-platform testing did your team have to do?
Myint: We tried to be thorough about testing on all the major browsers. As I mentioned, Josh Williams was focusing on iPad/iPhone/touch while Jon Huang was simplifying the experience for IE8. Alan McLean did a lot of testing and debugging on major browsers as well as pinpointing where the code could be optimized.
Myint: We used a number of custom components that we’ve used in other projects in the past like the modal slideshows. But some tools/libraries include jQuery, underscore, jPlayer, HTML5 video, jQuery Reel, and jQuery address. In triggering scroll-based events, I took inspiration from Remy Sharp’s .
Further down, a flyover animation transports the reader to the mountains and ski areas where the story takes place. Graphics Editor gathered and satellite imagery for the terrain, created a virtual model and then generated the animation
