8
Designing stories in modules rather than webpages
By Jean-Marc Gauthier. Design - Experience Design - Client

The collaborative nature of the longform documentary work leaves stories open for change. Journalists and editors can edit the content and create updates that may grow into sub-stories. This is very obvious when a story first breaks in the news.

The initial story may organically break into modules specially if there are some conflicting versions of the initial story. In this case, one of the modules of the story may become the main story.

Website designers use modules of stories that are also modules of code which are reusable and can be dragged and dropped in different places of the layout. This is the concept of a liquid layout where elements of content are curated, edited and reused, according to the angle of the story being told. This is in the process of being automated.

A pioneer.
Ian Coyle says " My process is very non-linear. I tend to jump into a hybrid prototyping and design phase as soon as an idea forms. I typically explore interaction and preliminary ideas in code, to find the boundaries for the design. Then I’ll return to Photoshop in order to create the first visual concepts. Once I find a primary look and feel, I switch back to code and refine the prototype. I’ll find new interaction points and the cycle continues until I have the final product."

Regarding "fieldnotes" by Ian Coyle.
"The first pass at this project was a 25,000,000 square pixel canvas that was more about connections in my work across both client projects and personal endeavors."

"While I loved the beauty in the connections, logistically it didn’t work out as planned. I found I wanted to expound on my work more than the structure allowed so I split my client work into Field Notes and my photography and film into Edits."

Ian Coyle's design reduces the distraction and focuses the attention of the viewer. For example, the navigation can be shown on the page only when needed. Additional text is visible or hidden according to the viewer's scrolling, some vector images coded as SVGs can be generated across images and texts. This is very obvious in Ian Coyle's piece.

    A new viewer/reader's experience.
    Two years after its digital publication, "Snow Fall" by the New York Times remains a great source of inspiration. The content is created by the fusion of several media on the webpage. The use of text and vector graphics overlays on top of digital video background creates a fluid layout where the text surfs on top the video images. It helps to focus the attention of the viewer/reader. The origin of digital overlays may be found in the composition of the frame for games where critical information for the player is displayed on top of the visuals for a scene.


    Other digital longform experiences. "Firestorm", published by the Gardian. "A Game of Shark and Minnow" by the New York Times.

Using full screen videos

The frame is not a regular HD frame for a web video. The full screen image has a cinematographic look and feel with textures, lighting and contrast and a grain that a DSLR camera can provide. A far cry from the desire to stray from the use of large videos, now there is use of full screen videos in backgrounds. Since the videos will be shown full screen and looped, the videographer has new objectives and possibilities of use to keep in mind.

Overlays and layers

The use of overlays is another direction sucessfully explored by digital longform. The origin of digital overlays may be found in the composition of the frame for games where crucial information for the player is displayed on top of the visuals for a scene. In the case of digital longform the overlays are fused with the content of the page. This reduces the distraction and focuses the attention of the viewer. For example, the navigation can be shown on the page only when needed. Additional text is visible or hidden according to the viewer's scrolling, some vector images coded as SVGs can be generated accross images and texts. This is very obvious in Ian Coyle's piece.

Rediscovering layouts and typography

The composition of text on top of a video image offers a new space for storytelling. The words are no longer a block of text or subtitles that mask the bottom of the image. Composition is a new way to print text along a path or trajectory to be discovered accrosss the frame. The writing is not made of 140 tweeted characters; it reintroduces the use of fonts and paragraphs overlaid on top of the visuals. Fonts are created in the browser and according to the device. Since fonts render differently according to platforms, devices or browsers, they become part of the context that is associated to a specific device.