Prototyping With Motion Tools

Occasionally, designers need to communicate complex ideas that go beyond wireframes and simple animations. Light-weight prototyping tools are usually not equipped with the advanced motion capabilities needed to get these concepts across. By using programs like After Effects, Flash, or Keynote, designers can create prototypes that present their ideas in motion. HTML5/CSS3 has also evolved as an immensely important approach to motion prototyping. These methods are best suited for creating prototypes that explain complex features, which are difficult to build quickly, and abstract interactive concepts that rely on context or space.

After Effects

After Effects is a powerful compositing program that is primarily used for post-production visual effects in film and animating motion graphics. Adobe is adding more 3D capabilities with each new release, but it should not be considered a full-fledged 3D animation program. It is a convenient tool for showing digital experiences that rely on the context of physical space to be understood. Design assets can be composited onto devices or environments to create convincing videos that tell the story of a project.

Although After Effects provides no interactivity, interaction points are often implied by using visual cues to indicate user actions and gestures. The program also provides a great deal of control: it is fully integrated with most Adobe programs and file types, animations can be precisely tweaked, and parenting allows users to create useful relationships between objects. Saving common gestures or creating device templates for later use can help designers build a resource library for future projects. The final output is a video that should be saved in multiple popular file types to avoid accessibility issues for clients and test users.

After Effects can be used for:

  • Projects that involve compositing multiple forms of media
  • Concepts that rely on environments and spatial interaction
  • Concepts that rely on motion, context, and storytelling
  • High-polish pitch ideas

Flash

Adobe Flash is an animation program that is capable of producing multimedia content aimed for the web. Despite its lack of support on several mobile platforms, it still serves as a robust tool for building prototypes. If you have a project that does not live on popular devices, Flash is an option. It can be viewed on the web by virtually anyone that has a desktop or laptop with the plugin installed. However, if you create a prototype in Flash that was meant to be used on an iPhone or iPad, the prototype may not be useful since it cannot be used on its intended device(s).

Flash offers a great deal of control over the timeline, animations, media input, and real interactivity. It can export projects as a SWF or movie file, and the latter causes them to lose all click-through features. It is an interactive alternative to After Effects that focuses on creating web-based content.

Flash can be used for:

  • Testing interactive features, complex UIs, and user flows
  • Concepts that rely on motion, context, and storytelling

Keynote

Mainly used as a presentation tool, Keynote actually offers some sophisticated motion options. It lacks a timeline, but users can control the scale, position, opacity, and rotation of objects. It has a variety of transitions to choose from, as well. Users can achieve limited interactivity through linking slides and controlling how actions play out in the build order. Out of the tools discussed, Keynote is the least complex program. It does not offer the level of control seen in After Effects or Flash.

Despite its ability to mimic native iOS app behaviors like transitions, the iOS version of Keynote does not currently allow users to view presentations in portrait mode. To view an app prototype properly on the iPhone version of Keynote, users must build the prototype in landscape mode, which can be a laborious process. Also, copying and pasting vector graphics from Illustrator is no longer easy. Instead, users need to link every instance of an image file to its source. If this is not done, reopening a file shows several pasted visual assets in the wrong locations. Keynote can get the job done, but it was not designed with prototyping in mind. Keynotopia offers templates and guides that can help designers ease into using Keynote as a prototyping tool.

Keynote can be used for:

  • Testing limited interactive features (tapping hotspots, linking)
  • Concepts that rely on motion or context
  • Mimicking iPhone and iPad apps

Prototyping with Code

Designers that are comfortable with HTML and CSS should consider the benefits of web prototyping. HTML5, CSS3, and Javascript make it easy to swiftly animate elements and create complex interactive prototypes. These can be viewed on any device with a browser and internet connection, which means you can mock up mobile apps and view them in their intended context. Initial code can be built upon, so this is one of the least wasteful methods of prototyping. However, if the concept requires advanced compositing, code prototyping may not be the right option.

HTML, CSS, and Javascript can be written in most basic text editors. Sublime Text is a favorite at Substantial. There are a variety of tools available to help designers experiment with code and view the immediate output within their browsers, such as CodePen, JSFiddle, and CSSDeck. Designers who are interested in learning to code HTML/CSS can find a plethora of resources on the web. W3 Schools is a good starting point for beginners.

Web prototyping can be used for:

  • Testing interactive features, complex UIs, and user flows
  • Concepts that should be tested on their intended devices
  • Concepts that rely on motion, context, and storytelling
  • Prototypes that need to be accessed easily

Drawbacks

There are limitations on the prototypes built in the programs mentioned. Flash and Keynote provide interactivity, but both are held back by the devices on which they are used. Flash is not widely supported by most mobile devices, and Keynote files can only be viewed if the user’s device has the program installed. Movie files can be exported from Keynote, but this negates the interactivity. Interactive prototypes made in Keynote should also be kept small, otherwise the file can become chaotic very quickly. Although After Effects is a powerful program, it can only produce static video files that are not interactive. The output is what you want to share, and if it cannot easily be accessed by your client or test users, it is probably not worth the trouble to make it with that tool.

The Prototyping Spectrum

These programs offer the ability to create high-fidelity prototypes, whereas some projects may require faster and simpler methods where polish or advanced motion are not a concern. For those types of projects, designers can use multiple apps that translate sketches to touch-prototypes quickly, such as POP. There are also programs like Omnigraffle, Axure RP, and many others. Some designers depend on Fireworks as a reliable prototyping tool that can be paired with TAP, which allows for some motion and gestural capabilities. Even InDesign can be used to make interactive prototypes. Framer, which integrates with Photoshop and outputs as a web prototype, and Origami for Quartz Composer offer sophisticated motion and interaction capabilities for desktop and mobile prototypes.

For high-fidelity features that rely heavily on motion and context, programs like After Effects, Flash, and Keynote are options you might consider. Web prototyping has also gained momentum since more designers have embraced coding. It serves as one of the best ways to prototype because the output is easily accessible. It can also set a solid foundation for what will be built. Finding the right tool for the right situation can be difficult. By understanding the capabilities of the tools at their disposal, designers can create prototypes that effectively communicate value to clients and users.