UNENDED - _blog

  • Home
  • About
  • Books
  • Notes
  • Marks
Post 253

Storyboarding Interactive Experiences

  • Archive

    • March 2010
    • December 2009
    • July 2009
    • June 2009
    • April 2009
    • March 2009
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • May 2007
  • Filed Under: Interactive
  • Tags: Storytelling
  • Publish Date: 21 March 2009
  • Share this post
    • Twitter
    • Facebook
    • Buzz

A few months ago I attended a local AIGA Salon where we discussed the topic of storyboarding for dynamic and interactive media. The discussion was insightful and meaningful – covering the new challenges that we face as designers and artists when it comes to creating interactive experiences.

What Constitutes a Storyboard?

The term “storyboard” can be used to define a variety of processes used to flesh out a final interactive piece. These can range from simple sketches on a napkin to flowcharts and functional prototypes. The purpose is to provide your project team members with a sense of how the final experience will work. The key to storyboarding is not in any single scene, but how each scene fits within the context of the overall deliverable.

My Dot Grid and Moleskine Notebook

The common challenge mentioned in the salon was how to comfortably fit storyboards into the design process, and most importantly how to identify what should be represented in your storyboards. At my company, storyboards play a vital role in the design and development process. Ignoring this step leaves a chance that the experience will feel incomplete and disconnected.

Elements of Interactive Storyboarding

I find that my storyboards tend to have two always have two common traits: (1) my boards incorporate techniques used in the film industry, and (2) they focus on the specific features of the final interactive project.

Interactive Design is so closely related to the film industry that for me it just makes sense to pull from a lot of their visual cues. Techniques that represent pan-and-scans, camera shots, scene changes and movement all lend themselves very well to this industry. For anyone interested, there is a great book that I would recommend titled From Word to Image: Storyboarding and the Filmmaking Processes hone your storyboarding skills.

If I tried to storyboard an entire interactive project at a high-level I wouldn’t know where to begin. The whole thing would seem overwhelming. So what I do is break down my project into a bunch of predetermined linear flows. From here I can focus on creating boards that illustrate details each of these features.

Even a smaller microsite is made up of many predetermined linear elements. For example, a viral site with only a few pages and an emailing functionality might include:

  • Site preloader
  • Section preloader
  • Emailing entry, validation and confirmation funnel
  • Navigation interactivity and transitions
  • Scene transitions

Breaking these out allows you to put detail into those elements in a way that raises the experience to a more meaningful level.

I originally came from an illustration background so when I start my storyboards I like to go straight to paper to sketch out initial ideas. It’s fast for me because I know I can bounce the ideas off of other in a matter of minutes. From here we know whether or not to continue to explore an idea or scrap it all together and move in another direction.

The important this to note here though is that you don’t need to be a great artist or draftsman to create storyboards. The key to storyboards is to share ideas quickly. Not to create masterpieces. It might take some time at first if you aren’t used to creating them, but once storyboards becomes a natural part of your process, you’ll really begin to see the pay off.

Add the First Comment

Add to the Discussion X

Your email is never published nor shared. Required fields are marked *

You may use these HTML tags and attributes:<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

  • Recent Posts

    1. SXSWi 2010 – Content Strategy
      SXSWi 2010 – Content Strategy

      14 March 2010 Interactive

    2. ABC URL Game
      ABC URL Game

      6 March 2010 Miscellaneous

    3. Fatal Error: Allowed Memory Size Fix for ExpressionEngine 2.0 PB
      Fatal Error: Allowed Memory Size Fix for ExpressionEngine 2.0 PB

      2 December 2009 Programming

    4. "No input file specified." ExpressionEngine Issue Resolved
      "No input file specified." ExpressionEngine Issue Resolved

      28 July 2009 Programming

    5. Exporting Dynamic SWF Art to Illustrator
      Exporting Dynamic SWF Art to Illustrator

      4 June 2009 Flash

    6. AIGA and the Design Industry in 2015
      AIGA and the Design Industry in 2015

      6 April 2009 Design

    7. Storyboarding Interactive Experiences
      Storyboarding Interactive Experiences

      21 March 2009 Interactive

    8. Understanding the Interactive Audience: Audience Types
      Understanding the Interactive Audience: Audience Types

      18 October 2008 Interactive

  • © Patrick Ashamalla.
  • RSS 1.0
  • RSS 2.0