Xcode storyboards

Mobile Prototyping for Designers with Xcode Storyboards

Rapidly build prototype apps without writing code.

We’ve used a number of tools to prototype apps over the years to go from initial concept to interactive prototype. Most of them were decent enough, but they were all lacking in some way which kept us looking for better options. Many do not support scrolling, some have chunky screen transitions, and most have awkward UI that is frustrating to work with. We eventually decided not to spend time learning tools that are limited to prototyping and instead to invest in becoming proficient at using Xcode, the de-facto tool for iOS development. Xcode prototypes are easy to get started on, are as simple or as complex as you need, and are a great stepping stone to building the final product.

Don’t be Scared

Xcode can be a bit intimidating at first because there is a lot going on in the multiple panes and tabs of the interface. Once it’s set-up though, and you get familiar with the structure, you can quickly start building prototypes using Interface Builder and Storyboards. Screens are built by dragging and dropping view controllers and UI elements into the Storyboard. Basic screen transitions like push, slide-up and flip are built into the segues that connect the views. There’s definitely a bit of a learning curve, but not much more than other prototyping tools. Xcode prototypes can be as simple as a couple of sketches hooked together with transparent buttons or they can use final artwork to simulate the finished product.

We prefer to build screens using gray boxes, placeholder text and stock UI. By staying away from colour or any real images it forces you to focus on organizing content and navigation instead of visual design. It helps keep the process fast and fluid without getting caught up in the details. Prototypes with pixel-perfect visual design can look too much like the real thing which can cause confusion as to what is the prototype and what is the finished product.

If you want to achieve more complex interactions that are beyond what is available in Storyboards, you’ll probably need to enlist a developer to help out. Not every designer has this luxury, but if you’re not working with developers that can pull off the custom animation you dreamt up, then it’s probably not going to make it into the final product anyway.

Touch and Feel

Previewing your prototype using Xcode is no problem because you can easily run your app on a device or in the simulator. You can quickly try out different flows and transitions and because you’re using native UI, you can get a real feel of what it would be like to use the app. The big win is that once you’ve shared your prototype around and everyone involved in the project buys in, it can be used as the blueprint for building the real thing. Developers can get a better sense of the app and the intended UX. They can copy and paste rough layouts directly from a prototype into new Storyboards and start hooking up placeholder labels and image views to real data. There is no translation pain sifting through Photoshop files or static wireframes. Storyboards can end up looking like a plate of spaghetti so take what you need, but not the whole thing.

The final app will never end up exactly as it was envisioned in the prototype. Once real data and visual design are added to the equation, changes will inevitably need to be made. Through user testing and iteration, you’ll discover ways to improve upon the initial concepts that were impossible to predict at the beginning of the project. An Xcode prototype will help get you on the right path sooner and allow you to transition from prototype to final product more quickly. As a designer, learning how views are structured in Interface Builder will also give you a better sense of what image assets are needed to create your final artwork more efficiently.

Get Started

It sounds like a great idea, but you’ll have to try it for yourself. The original post has a detailed tutorial and sample project download.