Designing Native Prototypes With Xcode

I am a huge fan of doing prototypes natively, especially on iOS. When some designers hear Xcode, they might cringe or be intimidated. Though Xcode does have a bit of a learning curve, it is no different than any other tool you might use. Understand the tools intent, and be empowered by using it. Some benefits of prototyping in Xcode:

  • Native functionality. Buttery scrolling is real in native prototypes
  • It gives the engineer you’re working with your intent. Your approach won’t be practical, but they can see what you are trying to do
  • A great way to visualize navigational flow by using Storyboards (though some people prefer to do it in code, everyone working in Xcode understands the functionality)
  • Uncovers a lot of design problems (such as keyboard states, device classes, and other edge cases that may not be considered in Sketch.

I used my friend Lana’s business Lembas as a prototype use case (You should also check out Lana’s site and buy some of the amazing jewelry she’s making).

Process & Components

My process is simple: work to a state where you have enough to put into the app. This might look like doing some light mockups in Sketch to get the idea of the layout. Once I have an idea I would export all the assets (I use 1x PDF assets) I currently have into the Xcode project. If you stay organized with your naming conventions and layers in Sketch, exporting and replacing assets is simple. I refine assets and screens as I go along to rough out the flow.

With a few components you can build a pretty comprehensive prototype. I basically used:

  • Sketch for asset generation
  • Auto layout to build on every device the right way
  • Stack Views
  • Table Views (all as static cells)
  • Tab Bar and Navigation Controllers

Screenshot 2016-07-05 09.21.59

Fake it till you make it

This prototype was built with all static content and predominantly constructed with stack views, scroll views, and table views. A lot of what you see in iOS apps are actually table views. This lays the groundwork for some more functionality to prototype. I now have the option to iterate on this project or create a new one off of this. Some things I am planning to explore:

  • Camera functionality to give you a preview of what the piece of jewelry would look like on you. (I’ve done this in the past using Form)
  • Parallax scrolling of the table view cells
  • Implement my first authentication
  • Trying collection views
  • Add analytics such as Mixpanel to track events.

Screenshot 2016-07-05 09.33.04

This prototype was built using tools in Xcode and a little bit of Swift. The final result is a native prototype that you can build on devices to get user feedback.

screenshot

Credits: