Devon Latzen
Senior Digital Product Designer • San Francisco • Boston
demo_thumbnail.gif

Native Mobile Prototyping

Native Mobile Prototyping

 
 
I create native prototypes, using Swift and Xcode.

Mobile Prototyping: A Brief State of the Union

Mobile prototyping has been a weakness in our industry for years, and it is just now being adequately solved for. Thankfully we have a spectrum of solutions. On the simple side we have click-throughs like Invision or Marvel. Keynote fills animation gaps above that. Then you get into more exotic and powerful solutions like Quartz and Origami (deprecated).

I had some fun times during the golden years when Pixate existed. But I'm totally okay though its not like I held a memorial for it or anything, that would be silly...

Farewell, my friend.

Breaking the sound barrier and venturing into code, Framer is currently the most powerful cross-platform prototyping tool. The only way to get more power is with React Native. Finally you arrive at truly native prototypes, written in Swift or Java. You sacrifice cross-platform functionality, but gain unlimited potential.

An example from my Framer days, before I began prototyping in Swift.

Writing prototypes in Swift or Java...you sacrifice cross-platform functionality, but gain unlimited potential.

Going Native

In 2016 I graduated from a program at Codepath called “iOS for Designers”, where I learned how to create prototypes in Xcode and Swift. I had been getting up to speed in Framer, which was rewarding, but I switched gears and focused on Swift for the class.

For 8 weeks, a few nights a week, I shuffled off to class after work and plowed my brain with Swift. They delivered on their promise. Here is some of what I created as a result. (Brace yourself for the gif-storm, things obviously need to be moving.)

For 8 weeks, a few nights a week, I shuffled off to class after work and plowed my brain with Swift. Here is some of what I created as a result.
 An upgrade prompt experiment

An upgrade prompt experiment

 

 

A demo transition experiment (using this tutorial) for the mobile Homework Help feature

 

 

An advanced filtering technique for the mobile Homework Help feature

 

 

A prototype for the mobile version of Recommended Cards

Prototyping Philosophy

Prototypes come in a range of fidelity, from low to high. They are all useful in the right phases of the process. It is useful to get designs in front of users as quickly and often as possible, necessitating speed. But hi-fidelity prototypes yield high-fidelity feedback, which exposes a lot of weaknesses while they are cheap to correct. So the right balance depends on the size of the project.

Prototype workshop for the mobile Recommended Cards feature

final Thoughts on Native prototypes

I choose to write natively because (for the most part) prototypes do not need to function on multiple platforms. A prototype’s only purpose is to communicate, not to ship at production level. To that end, writing Swift has served me well, giving me access to convenient out-of-the-box transitions and more sophisticated control over custom animations. Had the class been "Java for Designers" the result would have been identical. As it is, I have used Xcode-generated prototypes to communicate with both Android and iOS engineering teams, and it has helped our workflow tremendously.