Prototyping Your iOS Design With Storyboards

Feb 26, 2013 • Ryan Keairns

The vast majority of web designers are expected to code their own designs, so when I jumped into my first iOS design project it felt like a blast from the past.

As the role of web design has matured, more emphasis has been placed on coding and less on tools such as Photoshop. What used to be a designer carving up a PSD and reassembling graphics into a web site, has since evolved into a process where the designer (or front-end developer) may skip this step altogether in favor of working directly in the browser.

Most designers I know have learned to enjoy coding their designs as it allows them to maintain control of their precious pixels. In fact, they may even find themselves learning some basic programming as Jonas describes over at Signal vs Noise. We follow a similar approach at CramerDev where our design team also dives into Rails and ‘owns’ the views and assets.

Going Forward and Backward

At some point, likely after an epic battle with WordPress, you will say to yourself “I would really like to design an iOS app some day”. Next thing you know the opportunity arrives! (ok fine, maybe it won’t happen that fast, but nothing is stopping you from experimenting, right?)

“This is going to be fantastic! Where do I… wait, you’re telling me that I will be going back into Photoshop, slicing graphics and handing it all off? But this goes against everything I have learned over the last ten years”!

I faced this exact situation. I have become accustomed to building out my designs using HTML, CSS, Javascript, PHP and Ruby on Rails. So when I was asked to design an iOS app and get it running on an actual phone with minimal developer involvement, I was up for the challenge (right after that initial wave of anxiety wore off).

Storyboard, baby, storyboard

Starting with iOS 5, a designer can place their sliced graphics into an Xcode project and actually build their own screens (known as scenes). What you end up with is a semi-functional native app created using a simple drag-n-drop style GUI.

Without too much hassle, I was able to create the scenes for our KoalaPay iPhone app and link them together with some basic segues (i.e. tapping a button takes you to the next scene). With a little more work, I was able to run the app locally (both on the built-in simulator and my phone) and deploy an installable build via TestFlight.

If I am being totally honest, the storyboarding is relatively painless but provisioning this new app through Apple had me contemplating a switch back to delivering subs. However, once things were in order and our developer was available for the project, he was able to dive right in and begin wiring things up.

Getting Down to Business

Everything you need to get started can be found through this link:

1. Follow the Apple Developer Checklist

It is unlikely you can cover this all in one day (in fact, I chipped away at it off and on for 2-3 days), but in the end you will know enough that you can assemble your own scenes. Better yet, you will have learned a new skill and have an honest-to-goodness app on your hands (think functional prototype)!

Making Progress

Currently, I am wrapping up my second time through this workflow and this time around has been even smoother. As you gain experience you will know which assets you need to slice from your Photoshop document, what can be created using native objects and when you will need to pull in a developer (e.g. when dealing with table views, trust me this can be a time killer).

Its not perfect, but having the ability to maintain a similar workflow between projects, regardless of platform, is a bonus.

Have you done the same? We would be curious to hear any tricks of the trade you have picked up!