How To Prototype In Xcode Using Storyboard | Meng To - UI/UX Designer

The purpose of prototyping in Xcode is to be able to create a super high fidelity flow using the exact same software that builds iOS Apps. In Xcode, there is no limit. You can embed beautiful interactions, transitions, animations and sounds to produce a true native experience. In this tutorial, I will focus on the Storyboard feature, a powerful tool in Xcode that allows you to build an App without a single line of code. You will be able to create a functional prototype in a matter of hours.

The end goal is to eventually be able to implement your own designs for iOS. Just like learning CSS for the Web, this will immensely help developers overcome their struggle with UI work and push the collaborative work between designers and developers. Design is how it works, Steve Jobs said. Designing static images is not enough, you need to bring them to life.

Get Xcode

Head to the App Store and download Xcode.

Start A New Project

• 1) Open Xcode, then “Create a new Xcode Project”.
• 2) Select “Single View Application”.
• 3) Set up project name and company name.

Setup Up App

• 1) Only enable Portrait orientation.
• 2) Drag and drop your app icons.
• 3) Drag and drop your launch images. It’s the image that shows up when your app first loads.

The Xcode UI

The user interface is overwhelming at first, so let’s focus on the crucial parts that apply to Storyboard.

Add Images

Have your App screens ready without the status bar. To add them, create a “Group”, then “Add Files To…”. You can also drag and drop images to that folder.

Make sure you have “Copy items into destination group’s folder” and “Add to targets” enabled.

First Screen

Now that we have the basic setup done and the images added, we can finally start Storyboarding. Go to Storyboard and drag and drop a Button from the Object library.

Why a button? Because it allows you to link to a second screen. It acts as a clickable image. Resize the button to fit the entire dimension of the screen.

When you select the button, you should see properties appearing in the Attributes inspector. The properties we’re interested in are Type, Title and Image. Set Type to Custom, Title to nothing and Image to your first screen (type the name of your image and it will autocomplete).

Second Screen

Screens are called “Controllers” in Xcode. To create a second screen, simply drag and drop a View Controller, then repeat the previous step.

Connecting Screens

Xcode connects screens by a link they call “segue”. To create a segue, hold the “Control” key on your keyboard with your mouse pointer on the first screen and drag and drop on the second screen. Select “modal”. This will create a transition that slides the second screen from the bottom.

You can customize the transition by clicking on the segue (circle symbol between the two screens) and set the Transition to Cover Vertical, Flip Horizontal, Cross Dissolve or Partial Curl. Or, you can uncheck “Animate” if you don’t want any animation.

The Push Segue

The Push segue doesn’t work without a Navigation Controller. To create one, select the first screen’s View Controller and go to Editor > Embed In > Navigation Controller. A header bar will appear on every screen connected.

To remove that bar, select the Navigation Controller, then set the Top Bar property to None.

Now, you can use the Push segue and it will do a horizontal sliding transition.

Testing Your App

Xcode comes with an iOS Simulator that allows you to preview your App. To do that, select iPhone 6.1 Simulator and click on the Run button in the far top left. An iPhone will appear and you will be able to interact with the App you’ve just built.

Clicking on the first screen will lead to the second screen. It’s not much, but it’s a major step in understanding how Storyboard works.

Header And Content

This is where it gets a lot more interactive. Inside a View Controller, you can have all kinds of Objects from the Object Library. A typical screen has a sticky header, multiple buttons and a scrollable content.

First, you must separate your header and content assets in Photoshop or Sketch. Let’s remove the button we created earlier and drag in an Image Object for the header. In Attributes, set the image name. For the dimensions, go to the Size tab and set the height according to your header image.

Note that Xcode uses pt and not px units (1pt = 2px). Make sure that you use pair numbers in your assets.

On top of the header, you can drag in Button and Label objects.

Scrollable Content

To create a scrollable content, drag in a Table View and set the dimension to fill the rest of the screen. Inside that Table view, drag in a button and set the size according to your image’s dimension. From that button, you can create a segue to the second screen. Make sure that you have the button selected when you do the hold Ctrl + drag and drop trick.

You will need to make sure that the Table View layer has less priority than the header. Xcode works in reverse order where the layers below take priority.

The Back Button

I’m including this function because it’s really useful. I will explain it more in a future tutorial, but for now, create a Group and drag and drop these Objective-C category files. Make sure to check “Add to Targets” during import.

Once imported, you should be able to link your back button to the Exit green icon and an option called backButton will appear. Click on it.

Views and Objects

Here’s a schema of how Views and Objects can be structured:

Once you understand how Views and Objects work, you will be able to customize your Controllers the way you want.

Previewing On Your Phone

Xcode allows you to preview your App on your iPhone. Unfortunately, it’s a complicated process and requires an iOS developer account. Once you have an account, you must follow their instructions on how to create a Certificate and a Provisioning Profile on your Mac so that your device has permission to install the App.

Download The Template

This template should help you get started:

Simply replace the images with your own, tweak the Inspector settings, add new View Controllers and connect them using segues.

Resources

Just like in Sketch, experimenting with other people’s Xcode projects is crucial part to learning. Here are some resources you may find useful:

• Cocoa Controls– You’ll find great open source controls to play with.
• Search on Github for Xcode projects.
• More to come…

Final Thought

As a designer, I would never have thought that I’d be writing a tutorial about Xcode. It’s traditionally an application that appeals to developers as the barrier to entry is huge because of its complex UI and Objective-C knowledge requirement. But since Xcode 4, the addition of Storyboard allows designers to overcome their fear of writing codes and directly use an intuitive interface to produce meaningful interactions.

This tutorial wouldn’t have been possible without the help of Max Tagher, our iOS developer at Heyzap who helped me through countless road blocks. If you have someone knowledgeable about iOS development, I suggest that you start getting friendly with that person and ask for help whenever you run into a problem.

This is the first tutorial of a series. In the next tutorial, I will include custom fonts, more complex flows, animations and sounds. Finding good Xcode resources is a massive endeavor, so if you have any, please do share.