Mobile Prototyping for iOS in Tumult Hype 2

Tumult Hype 2 is a powerful tool for rapid prototyping. This post lays out techniques for preparing a template, working with assets, and previewing your designs on a real device as you work using Hype Reflect. With these tips, you’ll quickly get your prototype as close to the real deal as possible. For an example of an iPhone app prototype, please see Linkility by Alexis Doreau. (This file can be downloaded here.)

Choose a Device Size

Screen Shot 2014-08-25 at 2.48.42 PMTo prepare your Tumult Hype document, use one of the preset iOS device screen sizes in the Document inspector. ‘iPhone 5 Full Portrait’ is a great starting point for us, since we’re building a full screen application for the iPhone 5. If you’re developing for other devices, you can manually enter their resolution.

To get a sense of how your elements appear on a device, you can optionally add the outside edge of a device to your scene. Anything outside of the scene area will be clipped, but it can be helpful as you work on your Mac to keep a sense of scale.

Setup a grid: Tumult Hype’s grid system is easy to use. Select Arrange > Guides and create guides distributed by pixels, or distributed across columns/rows. This can be helpful for a variety of grid and list views.

demothing

Get Friendly with UI Templates (and animate them)

PSD templates for mobile UI elements are easy to find online — these graphics can help you focus on your application and free you from reinventing the wheel.  Teehan + lax has produced the most comprehensive template, but for in my example I’ll be using this smaller kit from Media Loot. Some of these templates can be huge, so you’ll want to export a minimal set into your project. A quick way way to export individual portions of a .psd template is to crop down to the area of UI element you want, and then select Scripts > Export Layers to Files. You can optionally export only the visible area.

Keep in mind that you don’t need to be full-fidelity for your prototype — you can a also create a document with more of a wireframes format:

Wireframes via CSS Author

Wireframes via CSS Author

 

Once you have the individual portions of a UI element, you can set them up to respond to touch actions like touchstart, touchend, tap, and drag. For tips on setting up your document for optimal support on mobile devices, check out the Mobile & Touch documentation chapter. The iOS7 slider and toggle below each exist on their own timeline, and they work in any browser:

Preview as you Build

Once your document size and working area has been setup, preview your document on iOS using Hype Reflect. If you haven’t used Hype Reflect yet, it’s essentially a second screen for Hype on the Mac, but the screen is a real, touchable/swipeable WebKit-powered view of your Tumult Hype document.  When you launch Hype Reflect on the same WiFi network as your Mac, you instantly have a functional prototype. Since it’s a webview, you’ll get accurate color, a pixel-perfect representation of your document, and full support for touch and swipe actions that you can hold in your hand.

To turn Hype Reflect into your best friend, review these quick tips:

  • Preview the scene you’re working on by pressing option + command + enter
  • Add console.log(); to your JavaScript and use the built in log viewer to inspect your scripts
  • Easily switch into Safari to monitor its performance. Open up Mobile Safari developer tools for more info
  • Simulate a full screen app (or Web App) by entering Full Screen Mode (shown below)

fullscreen4

Mirror mode is a powerful way to keep track as you make any change on your Mac. You’ll see every adjustment on your current scene live on your device. Multiple iOS devices can mirror your document at one time. There’s no limit.

Mirror Mode is great for testing the physical movements (fingers!) required to use your prototype. This graphic by Doug Gapinski is a great way to visualize tappable comforts:

ow-tappable-zones

If you’re not familiar with how Hype Reflect works, watch this quick video; mirror mode is demoed 40 seconds in:

Import Images, Media, and Retina Friendly Assets

I won’t pretend to know your workflow — how you build and test  prototypes depends on what fidelity you’re working with. Make use of Tumult Hype’s shapes and text elements for sharp rendering and accurate font sizes. Make sure you use double resolution images (or SVG icons when possible).

If you’re transitioning from a graphics program to Tumult Hype, you can recreate nearly every shape using the rectangle, rounded rectangle, and ellipse. Make use of the color picker to extract colors from any designs you import.

Colors_and_Resource_Library_and_Actions_and_iOS7UITemplate.hype__UI_Elements_

iOS’s System Fonts

iOS7 makes liberal use of of Helvetica Neue throughout iOS7. To use variants like Light and Ultralight, add that font’s font-family name as CSS within a box. Select a box, then Edit > Inner HTML. For Helvetica Neue Ultra Light, you would use the following code:

<span style="font-family:'HelveticaNeue-UltraLight', 'Helvetica Neue UltraLight', 'Helvetica Neue', Arial, Helvetica, sans-serif; font-weight: 100;">Helvetica Neue Ultra Light</span>

The above code sets the font and font weight of the enclosed text, but you can continue to use the Text Inspector to set color, size, and any other text property like Line Height, Letter spacing, or Word Spacing. Keep in mind you can also load a huge number of other fonts and variants from your iOS device. iOSFonts.com has a list of appropriate font-family names.

Reusing Elements and Animations

label-maker

Prototypes typically share a grid, header elements, and text styles across the entire project. Starting with a layout that you can reuse will make it extremely easy to rapidly build out a prototype. Once you have a scene, animation, or element, here are quick ways to reuse them:

  • Group elements: Grouped elements are easy to copy and paste into other scenes, and can be quickly locked into place by clicking the Lock icon in the element list. This is useful for background images and shared elements across scenes.
  • Copy and Paste with Animations: Select the animated elements, and choose Edit > Copy. Next, choose Edit > Paste with Animations.
  • Copy Scenes: To copy a scene, select it in the scene area, and press Command-C, then Command-V. This will copy your scene and all timelines. If you have created any internal links to other scenes, they will be retained.
  • Lock Background Elements: Lock static headers, tabs, and images that you want to keep from accidentally moving around.

Sharing your Prototype

To quickly share your prototype with others in your office, have them open their copy of Hype Reflect (it’s free, BTW). Send your preview straight to their device using the Sharing toolbar dropdown.

preview

To share your design more widely, send it to your Dropbox public folder straight from Hype’s File > Export to HTML5 > Dropbox… menu. This generates a public link that your coworkers or clients can load directly on their device.  Of course, you could also export to your computer, and then place it on a webserver.

To see an example document exported directly from Tumult Hype, please visit this document on an iPhone. This is simply a webpage that loads a Tumult Hype animation, but it has a few options set in the document inspector that makes it perform well as a demo.

Download the iOS7 Template File, or view it in a browser.

For more on this topic, read “The magic of animations (prototyping today’s user experiences)” by Christian Giordano.

, , , ,

Made for you in San Francisco.