UNENDED - Blog

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

    • March 2011
    • October 2010
    • March 2010
    • December 2009
    • July 2009
    • June 2009
    • April 2009
    • March 2009
    • October 2008
    • September 2008
    • August 2008
    • July 2008
    • May 2007

Storyboarding Interactive Experiences

  • 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="" highlight="">

  • Recent Posts

    1. Project Concept Sketch
      Debriefing Room Concept Sketch

      16 March 2011 Illustration

    2. Day 4 Notes, Page 2
      SXSWi Notes: Day 4

      14 March 2011 Interactive

    3. Day 3 Notes, Page 1
      SXSWi Notes: Day 3

      13 March 2011 Interactive

    4. Day 2 Notes, Page 2
      SXSWi Notes: Day 2

      12 March 2011 Interactive

    5. Day 1 Notes, Page 2
      SXSWi Notes: Day 1

      11 March 2011 Interactive

    6. Concept Sketch
      Concept Sketch

      11 October 2010 Illustration

    7. SXSWi 2010 – Content Strategy
      SXSWi 2010 – Content Strategy

      14 March 2010 Interactive

    8. ABC URL Game
      ABC URL Game

      6 March 2010 Miscellaneous

  • © Patrick Ashamalla.
  • RSS 1.0
  • RSS 2.0
  • Twitter
  • Facebook
  • LinkedIn
  • Forrst