Sketch x Marvel : Prototyping for Mobile

For all the bobas out there

I wanted to learn how to take wireframes and turn them into an interactive experience. Since mobile technology contains a good amount of interactions I went for iOS-based screens.

Steps Taken:

1. On Sketch (v.53.2), I created a splash screen, landing screen and sub-page using the iOS 11 GUI for iPhone X kit and a Google Maps UI kit.
2. With Sketch’s built-in Prototyping feature, I based screen changes on user taps.

Sketch’s Prototype feature

1. Using Marvel’s (marvelapp.com) Sketch plugin, I was able to sync my Sketch screens up to Marvel.

Syncing with the Marvel plugin within Sketch

1. This automatically generated the prototype for viewing on my Mac via QuickTime as well as Marvel’s mobile app.

Marvel’s mobile app