Course notes from the rapid prototyping workshop

Last night’s workshop went really well. There was a nice mix of people with design, development and business backgrounds. I’m impressed that everyone wanted to stay around an extra hour and would have stayed even longer if I kept going!

I showed a wide range of examples to demonstrate the variety of different ways to build and share Flash prototypes. Then we jumped into Flash, learning the essential tools (drawing, timeline, layers) and built some simple prototypes on the spot.

Someone asked about a good book for learning Flash and I highly recommend the Flash Visual Quickstart guides by Peachpit. It’s by far the best guide to learning the basics, explained in a really simple but comprehensive way.

I’m sharing my course notes here. This will make most sense to the people who attended, but it could be useful even if you didn’t go.

Why prototyping

  • Fast, cheap way to create, evaluate and improve design solutions
  • Involve and share with clients, investors, users, developers
  • A prototype should speak for itself – be the specs doc
  • Can even use as production-ready design
  • QA reference

Why Flash

  • Paper prototyping
    • Great for sketching ideas
    • Lacks accurate scale and context: on-screen is important for context
    • Not so good for evaluating complex interfaces
    • Terrible for sharing
  • Wireframes (printed docs)
    • Relies on words – words are the worst way to create and explain design solutions
    • Impossible to follow the flow – leaves too many gaps
    • Everyone interprets differently
    • Can’t test with users
  • HTML prototypes
    • Too much effort, too real
    • HTML + CSS needs to be well formed to be functional
    • Less agile. Less opportunity to explore ideas.
    • It feels finished. It’s not supposed to.
    • Too much time & effort invested in the build, so it becomes your code base and design template by default
  • Flash
    • Like paper – Draw it, sketch out ideas very quickly. Lofi, hifi.
    • Like HTML – Code it up. Interact with it. Experience the flow.
    • Can prototype anything: drag-drop, sound, animation, video.
    • Easy to edit. Re-usable objects, timeline, layers.
    • Easy to share. Compatible in all browsers.

Different types of prototypes

  • Lofi, Hifi, Screenflow, Interactive, Semi-functional
  • Start off with: sticky note architecture, white boarding task scenarios, 80/20, ins & outs
  • User testing process: Where are you? What would you do? What do you expect will happen? What just happened?

Using Flash

  • Stage
  • Properties panel
  • Drawing tools
  • Text
  • Paste in place
  • Timeline
  • Layers
  • Frames and keyframes
  • Publishing to HTML
  • Symbols (movie-in-a-movie)
    • Graphic
    • Movieclip
    • Button
  • Library
  • Actionscript
  • Frame labels

Remember

  • Design the ultimate solution, then strip it back to the essential solution
  • If you ever get confused just pay attention to the relationship between objects on the stage, frames in the timeline and layers in the timeline
  • There’s always a better way to do something, but the one that gets the job done quickest is often the best

6 Comments

  1.  Andy | 10 August 2008 @ 9:46 pm

    Thanks Philip, that was a great session. I learnt a lot and will definitely be giving it a go in my next project. Cheers!

  2.  Maak Bow | 22 October 2008 @ 9:47 am

    Hey Philip. Missed Auckland Workshop, see the next is already booked up. Met you at web on the piste last year and would really like to attend the next one workshop..Will there be another in Auckland?

  3.  trist | 22 October 2008 @ 9:50 am

    Hi Phil,

    I see the latest prototyping workshop has filled already! Hope you’ll run another one… Also… how about an AS3 workshop?!

  4.  Mike | 1 November 2008 @ 9:25 am

    Hi Phil,

    That was a great workshop, would thoroughly recommend to any interface designers. Having a meeting today about how to move our entire project over to this method. Also great that now we can get rid of Nick and I will be the new flash guru around the office! ;)

    Cheers
    Mike

  5.  Nick | 4 November 2008 @ 6:16 pm

    Hey Phil,

    Was choice to meet you the other day, and the workshop itself was great. Simple, powerful stuff! You’ll be happy to hear the new Fracture site is being prototyped right now, will send you a link through when it’s done.

    Cheers,
    Nick

  6.  Johnny Holland - It’s all about interaction » Blog Archive » Low-budget Prototyping Techniques | 3 September 2009 @ 1:22 am

    [...] there are many methods around, (for example, Phil Frelinger of Xero champions working with Flash, others have even suggested Powerpoint or Keynote), we found that for static pages, image map [...]