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
Posted by Philip Fierlinger on 31 July 2008 in design, event, prototypes, workshop | 5 Comments