How To Use Stop Motion Animation to Make Low-fi Prototypes for Mobile Design
Stop Animation product design with sketching and sharpies.
Low fidelity prototyping is about getting the point across quickly and efficiently while reducing the overhead in the design process. According to usability.gov, sketches are one of the quickest methods to receive early feedback and understand the design flow in an early iteration. The added benefit of sketching is that you can produce various concepts and layouts quickly.
Often times when I’m thinking through some interactions or animations for mobile, I find that I want to move from sketches into something more animated, but I don’t want to use a desktop tool or software to achieve this. I want to stay in the iterative sketching stage. In order to do this, I use stop motion animation.
Using the stop motion animation method allows me to think about the sketching and animation simultaneously, and I can easily string together all the photos to simulate the interaction and flow with no editing. I simply keep the iPhone stationed in the same location with a tripod, and snap pictures as I move the transparency film around to simulate the animation.
In this example, I’ve simulated creating an app “My Pals”, to show some of the interactions that are fairly standard on iOS. I wanted to show how fast and easy it is to reproduce modal overlays, off canvas navigation, and other simple animations to show how an app might work. I created this concept from start to finish in 20 minutes.
My sketches are rough, and a little messy, but that’s the point. This process is about producing concepts that are unrefined to get feedback early and see how the flow might feel.
The additional benefit of this method, is that once the stop motion video is created, you can share this with your team and get high quality feedback on the animations.
There is minimal time required to go from sketch to concept flow and interaction, and requires the following materials to create a sketch based stop animation prototype:
- Mobile phone camera or any digital camera
- Cut out of a phone frame
- Stop motion app for your phone
- Tripod or gorilla pod (something to mount the camera on)
- Sharpies, pens/pencils
- Paper or Transparency film
Give this method a try, and see if it fits into your arsenal of tools for prototyping. If you do try it, let me know, I’d love to see the finished product.
I have a Lynda course on this topic, you can find here: https://www.lynda.com/Flinto-tutorials/Hands-UX-Mobile-Prototyping/452520-2.html
