Using Hype 3 for Interactive Prototyping

Interactive prototyping is one of the tenets of both User Interface Design and User Experience Design. Throughout the recent years that User Interface and User Experience Design have been flourishing in the design industry, there have been many products and tools released to try and satisfy the need for interactive prototyping in order to test, revise, and overall improve the product experience that one is designing for. These prototyping tools range range from cloud-based tools, such as inVision and Proto.io, to more traditional, software-based tools, such as Adobe’s new Experience Design or Tumult’s Hype 3.

I feel that Tumult’s Hype 3 is a prototyping tool that has a lot of untapped potential behind it. Why is this? Well, for starters, Hype 3 is a primarily a tool for creating beautiful HTML5 animations and interactive web content. It works with and exports primarily HTML content, which allows for its exports to be wonderfully lightweight — but more importantly, it allows the content exported within Hype 3 to be web-based.

Hype 3’s powerful animation toolkit allow you, the designer, to create awesome, completely customized animations that are all triggered based on the user’s interactions with your prototype. This great control over your product’s animation allows you to create a prototype that gives your developers a much better idea of how you want the finished product to look. Not only that, but it also leads to an overall more interactive, immersive, and refined experience for the users that you are testing with.

So how do you go about using Hype 3 to turbocharge your prototyping workflow? Well, I by no means claim to be an expert on the right way to go about it, but I’ll share with you how I went about it when tasked with creating a simple UI prototype in my Digital Effects course at Utah Valley University.

First, I began by designing the above screen in Sketch 3 — which is a powerful screen design tool in its own right. The app screens above depict an app that acts as a simple dashboard for the popular Sonic The Hedgehog game, Sonic Adventure 2. I made sure that every component that I designed within each individual screen was organized and grouped in a way that would make sense for easy export into Hype 3.

For example, above is my folder structure for the first screen — the login screen. Every major component of the screen, from the logo, interactive fields, and buttons, was all placed within its respective group, all with their own name that makes semantic sense.

After creating all of the screens that were necessary, I then imported the individual groups that I created within the screen designs into Hype 3 and began creating my own custom animations using its intuitive animation toolset.

But how exactly did I place each element in the exact spot that matched the screens mockups created in Sketch? Well, it’s quite simple, really. I simply used the smart guides in Sketch to get the distance from the top/bottom and sides and then matched it up using Hype 3’s Placement options, which come in quite handy for projects like this.

While working on the animation for the screens, I made sure that each screen had its own scene, which are almost the equivalent of artboards in Sketch. Giving each screen its own scene rather than just animating each screen on one scene allowed me to give great attention to detail on each individual scene without worrying about animating every transition smoothly on just one scene. That would create a bit of a hefty timeline and unnecessary confusion in the animation process — at least, that’s how I personally feel.

After I got done animating the screens with the transitions and interactions that I wanted, I simply had to export the Hype 3 document as an HTML folder that would contain everything that I had animated in clean, wonderful, web-friendly HTML.

And there you have it. A dive into the process that I undertook in order to create a fully functional, simple, interactive prototype using the power of Hype 3 — and a bit of Sketch, too. This project was definitely a fun one as animating it was a blast, and creating the visual design for the simple app was also a great time.

John Toral is a student in the Digital Media program at Utah Valley University, Orem Utah, studying Interaction & Design. The following article relates to (User Interface Prototype) in the (DGM 2280 Course) and is representative of the skills learned.