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
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.
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.
- Icon set by Lucy Gonzales: http://bylucyg.com | Sketch App Resource
- Photography and assets used: Lembas by Lana Rose