By Danilo Campos (Hackbright Instructor, Frontend iOS Development Course)
Whether you measure it in hours or dollars, writing software can be expensive – especially for mobile.
A great way to keep costs down is to include prototyping in your pre-production process. Interactive prototypes let you test and iterate on your interface quickly and cheaply. By catching weaknesses in your interaction design early, you can save a lot of wasted effort later. You might even discover that you can skip building a feature or two, buying yourself extra time for other important work.
So how do you build a mobile prototype? There are plenty of tools, ranging from markers and paper to fancy software suites.
Storyboards
A powerful option that’s often overlooked is built right into iOS and Xcode – Storyboards.
Anyone can prototype with Storyboards – you won’t need to write any code. If you do know how to develop for iOS, you may find a Storyboard-driven prototype a great starting point for your app’s UI layout.
You can learn this in about 10 minutes.
Go download Xcode first.
After that, download this project.
Open “PrototypeTemplate.xcodeproj” in Xcode.
When Xcode opens the project, you’ll see some files listed along the left side of the window.
Click on “Main.storyboard” (pictured, right).
Storyboards let you visually lay out and connect your iOS application’s views using the following:
If you’ve ever used an iOS app with a back button – and you have – you’re well acquainted with navigation controllers. Nav controllers manage a stack of view controllers, providing convenient animation and a consistent way of moving around iOS apps.
2.) View Controller
Every major view in an iOS app is managed by a view controller. View controllers are responsible for maintaining a view’s state and layout. Whether you’re toggling a spinny Activity Indicator or displaying an image downloaded from the web, your piping is going to pass through a view controller.
3.) Starting Indicator
The arrow on the left points to the object to be displayed by default when the Storyboard is loaded.
4.) Relationship Segue Indicator
This arrow tells the navigation controller which view controller is the one it’s going to display first
There’s a lot more going on behind the scenes than might be suggested by this simple canvas. For the moment, that doesn’t matter. Let’s get moving.
Ensure that Xcode is displaying its “Utilities” drawer by clicking the far right button in your toolbar. You should see this:

How To Add A Button
The ‘Object Library,’ indicated by the cube, contains a pile of useful UI objects.
Scroll through it until you find the entry marked ‘Button.’
Drag that out onto the View Controller:


How To Style The Button
Neat! You’ve got a button. I’ve included a little button outline in the project for you. You can find it via the “Media Library”, indicated by the little clip of film.

Click and drag the button outline onto the button you added earlier. The button will resize according to the new background image you’ve given it.
But wait, this button is ugly!
Let’s make the text color something more usable for our new background.
Make the sure the button is selected, then with the ‘Attributes Inspector’ (indicated by the slider icon), change the “Text Color” property to, say, Dark Gray:

Now, For The Magic!
Let’s add another view controller to our canvas. Switch back to the Object Library.
Click and drag a “View Controller” to the left. You should have a canvas that looks like this:

Almost there…
Hold the control key, click on the button, and drag the resulting blue wire onto the new view controller:

When you let go of the mouse, a menu will pop up. Choose “push” in this menu:

The view controller is now displayed with a navigation bar. It will be pushed onto the navigation controller when you push the button.
Click the big “Play” button at top-left menu bar to launch your new prototype in the simulator – it will look like a forward arrow button.
It might be nice to set titles for your view controllers. Easy enough. Just double-click the center of the navigation bar, then type your title.

Gilding The Lily
That’s it! That’s all you have to do. From here you can add any images or mockups you want to the project – just right click on the file list to the left of the window and choose “Add files to…”

From there, you can drag them from the Media Library onto any view controller or button. Add as many additional buttons and view controllers as you’d like. If you have an iOS Developer Program membership, you can even test your new prototype on a device.
Want more inspiration? Here’s a project with a few examples of what’s possible with this technique. Happy prototyping!
But What If I Want To Code?
We’ve got you covered on that, too. Study up on the basics with Matt Neuburg’s iOS 7 Programming Fundamentals. From there, learn about the hidden gems of the iOS platform from NSHipster.
And finally – apply for my workshop! We’ll learn all about how to build fun and lively touch interfaces for your iPhone. You’ll walk home with a fun project and a nice pile of lab work to supercharge your future iOS efforts.