Thursday 22 November 2012

Learning from webcomics, motion comics & infinite canvas

Mysterious Path will be a hypercomic and therefore must confront two major design challenges. One will be to figure out how a reader will meaningfully interact with the game narrative, the second will be finding an interesting and appropriate way to present it's comic book format on the screen. This post regards the latter challenge.

Reading comics on digital platforms has been approached in various ways, which solutions will provide design insight for Mysterious Path?

The printed comic book format is not a natural fit for the computer screen. Pages are projected on to a medium they were not originally created for. As digital distribution and consumption of comics increases surely creative solutions and adaptations have been necessary to enhance the screen reading experience?

My research is certainly not exhaustive so please excuse omissions and generalisations (Let me know if you found any interesting stuff, like Marvel Infinite or Visual Novels)

Let's begin...

Webcomics - a new distribution channel

The webcomic has allowed creators to reach a mass audience without the need for formal publishing, essentially providing them with a free distribution channel. Comic creators can broadcast directly to their audience via the ubiquitous web technology. No print costs, no shipping, just straight to screen. Awareness remains the only hurdle for creators to grow their own audience (and social media has the potential to plug that gap).

Despite their name, 'webcomics' seem to have more in common with their print cousins when it comes to format (there are of course notable exceptions e.g. Worm World Saga). The reason for this I believe is two fold. Firstly, traditionally schooled comic creators are primarily concerned with telling their story and are not focused (or interested in) inventing new digital formats. Secondly, their ultimate goal is for their comic to get printed, and therefore the creation of 'ready to go' artwork makes a lot of sense (Help a fund a web to print comic here!). The majority of webcomics therefore fail to seize the creative opportunities the web offers.

Adhering to a print-friendly portrait format is at odds with a monitor's landscape aspect ratio (although handheld devices are now enabling both). Therefore presenting the comic at a legible size means that scrolling is now required to see the page in its entirety. Comic pages are designed to be viewed both as sequences and complete compositions, thus scrolling is not ideal. How can we improve this sub-optimal reading experience?

Guided view™ - a sticky plaster for reading on screen

The comic industry will continue to focus on delivering print comics first. After all, change would disrupt entrenched creative processes and threaten existing revenues. While in a state of transition, from analog to digital, the big players will simply avoid any significant risk.

Enter Comixology and their Guided View technology. This enables print comics to be prepped for the screen with a simple additional process. Pages are 'tagged' which enables the reader to zoom into panels and then simply click to be guided through to the next panel in the sequence. This approach allows the artwork to be displayed at a legible size, even on small screen devices, and any potential disorientation from experiencing a partial view of the page is resolved by the guided navigation which ensures the intended flow of the narrative is preserved.

Problem solved? not quite. Guided View has its critics and certainly feels akin to palliative rather than preventative medicine. It's certainly not a reinvention of the art form.

Motion comics - animating the static page

Others have taken greater steps to enhance the comic experience for screen. The motion comic animates individual panels and automatically plays through action sequences.

At first glance adding animation and sound to digital comics seems like a logical enhancement. Computers are good at this stuff after all.

Unfortunately, like Guided View, the majority of motion comics are created by applying a post-process to existing print artwork. Characters and scenes are animated like paper cut outs, often with incredibly poor results, especially when compared to a genuine animated experience.

Even when skilled animators create original assets for motion comics (e.g  Bottom of the Ninth) something feels wrong. Motion comics fundamentally transform the reading experience from active (the reader decodes and interprets) to passive (the reader sits back and is spoon feed). This is an erosion of one of the core principles of comic, how they depict time.

Maybe I'm judging them harshly but, for me, motion comics feel like a creative wrong turn.

The Infinite Canvas - the page is dead, long live the canvas

Over 10 years ago Scott McCloud deconstructed the comic and proposed a blueprint for their digital future (Watch his TED talk now!).

For me, the most powerful idea was the liberation of individual panels from the constraints of the page. He called it the Infinite Canvas (Meanwhile is a great example of this - even though it did start life as a printed comic)

Today the proliferation of screen sizes and resolutions affects any business that needs to present its content digitally. With this very issue in mind website design has championed solutions such liquid layouts, responsive design principles and small screen first thinking. Good websites (even this blog template!) now render smartly on both mobile screens and monitors by following a set of encoded display rules. Textbooks have also begun the evolution from print to screen, epub files allow text to flow freely to fill any screen size. Words are no longer confined to a specific page. Yet comics still lag behind and the promise of the Infinite Canvas remains largely unfulfilled.

My earlier thinking embraced McCloud's ideas, but my prototyping has revealed both technical and design challenges. To crack this nut creatives and technologists will need to work together.

What does this mean for Mysterious path?

OK, so what have I learned from all this? While not finding an off-the-shelf solution for Mysterious Path I have clarified some key design principles I intend to adhere to:

1. Digital presentation will drive the design process of my hypercomic, it will not be restricted in scope by the limitations of print.

2. The comic will need to flex to accommodate multiple screens sizes (although I may focus on one size/device initially to make prototyping easier).

3. As an interactive/game experience the comic will need to know which panel is in focus in order to trigger related interactive events (e.g to reduce hit points during battle or acknowledge the acquisition of a new item)

4. Users should determine the pace of the reading experience and not be made to 'watch' the action unfold.

Although most of what I've seen can not be directly applied to my project there are guiding lights. Operation Ajax, an iPad app, successfully choreographs the reading experience on screen. The layout morphs to accommodate the arrival of new panels and, when used well, actually helps to reinforce the contents meaning. There is still a loose concept of page and there are occasional motion comic moments but overall it successfully retains the feel of a comic yet is delivers its content in a way that is unique to digital media. This is the sweet spot, and I'm sure there are many more examples out there.

Finally to sum up in words better than my own...

The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page. We should embrace the fact that the web doesn’t have the same constraints, and design for this flexibility. But first, we must “accept the ebb and flow of things.”  
John Allsopp, “A Dao of Web Design


  1. A great summary of the various options open to you; thank you. I really hadn’t given that much thought to the technology, other than swearing when it didn’t work.

    I agree that Guided View isn’t perfect, but it does seem to be the best option for a multi-platform approach. One of my criticisms of Guided View (particularly on an iPhone) is the constant switching of from landscape to portrait in order to see the full frame. I’ve read the Umbrella Academy books (by Gerard Way and Gariel Ba) as iPhone apps and they used something akin to ‘Guided Vew +’ (much like your picture in the final part of your article). Essentially every frame and screen had been optimised to be best viewed in portrait (therefore working on any platform/size), with the progression sometimes taking you from one part of a frame to another, before then going on to the next frame.

    I’m looking to forward to reading more about your project as it goes along.

  2. Umbrella Academy looks interesting, I'll check out the apps (thank's for the heads up).

    For me the small screen is where it really gets interesting as you can't use a traditional comic layout and are forced to think different. Also guessing mobile will be a key device for something like Mysterious Path (although I know tablet market is growing fast)

    Thanks for your interest :-)

  3. good stuff. Have you seen Chris Wares comics? he often incorporates multiple paths, or entirely diagrammatic and time distorting panel arrangements see here and here also. You might find it inspiring.

    1. Thanks Zhu. Will check out Chris Wares in a bit more depth. Feels like his work is designed to work as a large canvas with the overall grid and rhythm being as important as the individual panels. Loving his airplane safety card aesthetic.

      Was toying with a similar idea of using some type of overall view based on the classic dungeon map.

  4. Thank you so much for sharing insight! Different comics follow different style but non of them are decided just like that. The diagrammatic representation in different web comics are based on appeal, ease for user, style and comfort. For instance, the simple fact that when a reader reads a paper, the eye movement is in Z shape. Well this is just a basic, you have given much detail for same :)

  5. Pretty amazing work on the author's part and This blog is a five star work.
    click here

  6. Great article with excellent idea!Thank you for such a valuable article. I really appreciate for this great information...
    Visit us for buying online customized trophy.