Motion can be a key element in storytelling. In theater and cinemas, directors pay a lot of attention to the position of actors on the stage and how they move; this planning process is known as blocking and was named after the technique of using wood blocks in a miniature stage that originated in the 19th century. The movement of the actors and, in the case of cinema, the camera helps to communicate emotions to the audience. The way an actor walks in and enters the scene can tell as much as what the actor says.

A storyboard capturing key camera angles, movements, and transitions--note the "FADE TO BLACK" sign--that contribute to telling the story

When building a prototype, you are also telling a story--the story of how your product will help your users--and you can use motion to tell that story better. Interactions are dynamic in nature and trying to describe them with static elements, such as sketches and mock-ups, leaves too much to the audience's imagination. When building a prototype, you can benefit from using tools that provide you a great degree of control of motion and time.

In this chapter, you will learn how to use Tumult Hype, a timeline-based prototyping tool. You will apply the general principles of prototyping from the preceding chapter with a specific tool. In particular, in this chapter, you will deal with the following:

• Understanding the role of motion and how to use motion to design better interactions
• Getting familiar with the basic principles of Hype
• Prototyping simple interactions based on manipulating layers with different gestures
• Supporting complex interactions by composing animations and reacting to the user input

The prototyping techniques that you will learn in this chapter will help you to quickly use Hype and also allow you to become familiar with concepts that are also available in many other prototyping tools you may find.