Guide to Marvel

Use Marvel with WytePad introduction image

After a healthy dose of visual brainstorming on WytePads you end up with a lot of crisp sketches that you want to turn into a prototype. And in comes the Marvel app. This is a very brief guide for using the Marvel app to turn your WytePad sketches into an interactive prototype running on your phone (note that all screenshots are from an Android Nexus 5X and may look differently on your device).

Step 1

The first step is of course to install the Marvel app on your smartphone. The app can be found here:

Step 2

Create a new project in your Marvel app. Start by giving it a name that reflects your project and then select the device to use in your prototype. If you are using the Android WytePad phones then you should select Nexus 5, if using the iOS WytePad iPhones then you should select iPhone 6.

Step 1 Step 2 Step 2

Step 3

Now take pictures of all the WytePad sketches that you have made so they can be used in the prototype. Try to keep the phone as perpendicular to the WytePad as possible as this will make it easier to crop the image in the right size.

Step 3 Step 3 Step 3

Step 4

Now to make your prototype interactive we need to add touch areas and actions to the sketches. Click on one of the sketches in the overview and then add hotspots for each button you want to be interactive. Then select the target image as well as the transition it should use. We recommend using very simple transitions to avoid distracting people trying out your prototype.

Step 4 Step 4 Step 4

Final step

You are now all done, just press play! And there you have it - an interactive prototype made from your WytePad sketches.

Bonus step

To share your prototype with others you must sign up to Marvel using either Dropbox or creating an account. After having signed up and logged in to the app you can share the project with others, letting them see and use your prototype as well - or even embed it on a website as we did just above.