In this post, I’ll show how you can easily create user interface prototypes with Tumult Hype. As a fun exercise, I’ll bring the new Android L design prototype to life. Creating quick mockups with animations, transitions, and real content should be a pleasant experience, and it is with this basic workflow in Tumult Hype:

1. Create elements and drag images into Tumult Hype.
2. Animate elements using the record button.
3. Setup tap targets for interactivity.
4. Preview directly on an iOS device using Hype Reflect.
5. Iterate! Hype Reflect’s Live Preview feature eliminates all the friction from quickly refining your mockup.

Compare this to a common workflow for producing visual mockups:

1. Build interfaces in After Effects or by hand with HTML, CSS, and JavaScript.
2. Animate elements using code.
3. Export a video or publish a web page.
4. Share and upload video on your iOS device, sans-interactivity, or manually enter the address to the web page you published.
5. Iterate. Changing even a small part of your mockup means starting over from step #1.

Tumult Hype 2 and Hype Reflect speed up the design and iteration process. Together, they make designing, adjusting, and testing your designs a very ‘live’ experience. Since you’re generating pure HTML5 on the fly, your documents preview quickly, and they also respond to touch and swipe gestures.

Bringing the Android L Interface to Life

Last June, Google unveiled a revamp of their mobile design guidelines called Android L. Their preview included interface transitions and animations that I’ll replicate in this post using Tumult Hype.

Step 1: Create the Basic UI

Let’s start by opening Android L screenshots in Photoshop to generate the control buttons at the bottom of the screen and the top notification bar. To retain transparency, either export assets as PNGs with transparency, or copy and paste images into Tumult Hype from Photoshop. All images added to your document are tracked in the document’s Resource Library and can be renamed as you wish. If you use Sketch, check out this interface kit for Android L.

Using screenshots as a reference, we then lay the foundation of a basic interface using shapes and colors.
The default Android font is Roboto, which we can use by clicking Add More Fonts… button in Hype’s Text inspector then selecting the appropriate font from Google Fonts’ free web fonts library:

Step 2: Add Animations and Transitions

Now that we have the main interface in place, let’s get to the fun part: animating! I particularly liked the example animations in the Android L’s Music app, so let’s recreate those.

To create an animation like this, start by creating a second animation timeline to represent the intro animation. This is the animation where, on app launch, album artwork fades in one album at a time.

Next, create a third timeline to replicate the animation that shows the music playback controls when you tap on an album. Tapping the Kodaline album demonstrates this animation.

To trigger timeline playback, simply add actions to elements. For example, to play the timeline which reveals music playback controls, select an album and then add an On Mouse Click (Tap) action which plays the appropriate timeline.

Here’s how this looks within our browser preview once all of the animations have been created and each timeline is set to play back in response to the appropriate actions: View the resulting document. (This document works perfectly both on mobile devices and within desktop browsers!)

3. Previewing

Using Tumult Hype, you can preview the result in any installed browser with the click of a button. (Hype will even preview in Mobile Safari in any installed iOS simulators.) Even better, you can send your preview directly from Hype to the free  iOS app. Hype Reflect is perfect for testing tap targets, animations, and to preview designs without needing to ever export anything. Furthermore, Hype Reflect has a Live Preview mode, which mirrors your Hype document on your iOS device so you can instantly see how your document looks on any iOS device.

View the exported project, or download the source Hype file.

4. Conclusion

We hope the Tumult Hype ↔ Hype Reflect workflow helps save you time and empowers you to quickly create prototypes for your apps and interfaces. All said, this project took about 30 minutes to setup from screenshots, and another 15 minutes to animate and add interactivity. If you’re working with prototypes share your tips and tricks: @hypeapp.

For tips on iOS-specific prototyping, read our blog post, or peruse our Touch & Mobile documentation chapter.