December 8th, 2009

Here is an interesting description of a protocasting technique brought to you by Theresa Neil (which she credits to Todd Zaki Warfel’s book on Prototyping). Basically a bunch of screens are first exported into PDF, then turned into a clickable prototype, and eventually a happy path is recorded as video and annotated with audio. I think it’s great to see an approach to prototype walk throughs which alleviates the pressure on the viewers to discover the interaction by themselves (a problem present in many prototyping tools these days). Instead, the viewer is guided through time and the designer covers the intended flow as a presentation. If prototyping is partially about leading the viewer to believe that the fake product is a real one, then Theresa’s protocasting approach achieves this perfectly.

Credits: Theresa Neil

Need UI Inspiration?

Hi I'm Jakub and I wanted to share with you some of my better UI sketches to inspire your line of work. I've been sketching user interfaces with paper/electronically for over a decade. Subscribe today, and I'll share 5 of my better sketches with you over the next 5 days. How is that? :)

I will send you 5 pieces of inspiration over the next 5 days. You can unubscribe whenever you like. Powered by ConvertKit

6 Responses to “Protocasting”

  1. Shaun Says:

    What program was used to make the clickable buttons?

  2. fritz desir Says:

    Great run-through Theresa, kudos! For those who may not there's a good step by step overview of Protocasting (from over 2 yrs ago) as a design deliverable from Robert Hoekman here:

    @Shaun I believe it was Balsamiq (, unless you mean the visual design in which case it could be Photoshop or Fireworks or Illustrator (all Adobe)

  3. fritz desir Says:

    (meant… for those who may not *know*… in the above post)

  4. Jakub Linowski Says:

    Thanks Fritz for the article!

  5. Kim Dziedzic Says:

    Thanks for posting this. I see some strengths with this approach. The challenge with this technigue is the linear nature of video. For someone building this app who may need to look up the details of a specific interaction, how do they get what they need without having to watch the whole thing? Also what if there are revisions?