Videos

The following videos provide examples about sketching and sketching methods as related to interaction design. Note that many are from other sources, so we cannot guarantee that all links are alive (although they were when we put this site together)

Talking over a screen-captured slide show

Adding narration to your sketch can help make it self-explanatory. One simple way to do this is to take a series of screenshots (or mocked up screenshots) showing an interactive sequence, and assemble them in a slide show. Then use a screen capture program to capture the slide show, your mouse position, and your voice as a video. A narrator can talk about each screen (pointing with the cursor), then click to the next screen. As Jonas Lowgren explains: the resulting video communicates the temporal qualities of the design much better than the static screenshots would, and it didn’t take many minutes to produce.

  • c3demo by Jonas Lowgren, 2007. An example explorative work in interactive visualization of semi-structured data.

Video Enactments Explaining Complex Ideas

  • Twitter in Plain English. Wonderful use of paper cut-outs and simple video animation tricks to explain Twitter via sketches
  • Google Docs in Plain English is a great example of mixing sketches, concepts, use scenarios, and even interface walkthroughs in an engaging video sketch.
  • Nokia Morph Concept is a high-end animation illustration future possibilities for mobile devices. Includes animated cartoons, split scenes, title slates, photos, and annotations.

Videos as Thin Fiction

The idea of ‘thin fiction’ is to illustrate a video sketch via a scenario showing it in use

  • Designing with Moving ImagesJonas Löwgren collects various thin fiction video sketches. A subset is listed below
    • Tip-Toe illustrates floor buttons used to unlock a door. Editing confined to adding button-press beeps and cutting unnecessary sequences.
    • News Media, a news-on-demand service, tells a-day-in-life story with detailed interface animations composited into the live action.
    • Posthoc WorkNotes a rich media content management system, shot in live-action video, into which detailed interface designs are composited
    • Our News and Sports also uses detailed interface designs composited into live-action footage
    • Sitep uses cutout animation to tell the story.