How To Prototype iOS Apps Using Xcode And Storyboards – No Coding Required!

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.


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:

1.) Navigation Controller

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.

What is Data Science and Machine Learning?

Join Hackbright Academy’s new Data Science course focusing on Machine Learning this April 5-6, 2014 in San Francisco.

We talk to Hackbright Academy’s Data Science instructor Dan Wiesenthal:

What is Data Science?

Oh man. There’s so much. At the highest level, it’s trying to look for useful patterns or meaning in data. Which means you have to figure out what data exists, and if it doesn’t exist how you can create or capture it. And then once it exists, there’s almost always a lot of work around cleaning and massaging it (we call this “data munging”) into a format that’s easier to work with. And then once it does exist in a format you can easily work with, you can get to the high level questions of what does this data tell us about the world? Framing those questions can be really hard, because what questions should you really ask? What is useful? What is not useful?

There are a lot of seemingly useful but not actually useful questions. And the way you frame the questions matters a lot. To poach someone else’s example (can’t remember who), you could try to ask what interesting trends can be found in baby formula sales. And after all your data gathering and munging and analysis, you might see there’s a statistically significant increase in baby formula sales. Sweet! Pattern found! Clearly, babies are getting hungrier! …right?

Well, maybe, but what’s been happening to the population? Growing? Shrinking? Staying the same in terms of total, but becoming younger overall (like the reverse of Japan’s aging population)? So framing the question, understanding the data, understanding the domain and knowing where to look for confounding factors is all pretty important.

When you abstract out from all the nuances, Data Science basically means trying to look for meaning in data to help us understand the world. Sometimes that understanding can then lead to solutions to the problems we are facing.

What is Machine Learning?

Machine Learning is a branch of Computer Science that tries to push computers to go beyond their programmers. Rather than require that the programmer anticipate all the directions that a problem might go, tweak all the levers, and optimize everything by hand, this field looks at systems that are aware of their own performance. If they’re aware of their own performance, they can tweak some levers themselves, automatically, and see if performance improves.

By tweaking these levers — and sometimes there are a lot of levers, way more than human programmers could handle by hand — the program can self-optimize. So they are designed to learn over time to be as good as they can. Sometimes it’s a short amount of time, sometimes it’s a very long optimization process.

The really interesting thing for me isn’t even the tweaking of the levers (I mean, that’s cool and all, because there can be these big meta-levers that determine what the littler levers even look like and which directions they go), but the creating the levers themselves. The way you frame some of these problems can lead to really interesting ways of trying to represent the world in a computer-interpretable form — google “feature engineering”— which, at least for me, seems to brush up against the very meaning of reality. It’s pretty cool to think about.

How does Machine Learning fit into Data Science?

Machine learning is one tool in a data scientist’s toolbelt. Some people use that tool a lot more, and some people tend to use it a lot less; some prefer it in production, some only in pre-production or research.

In a production context, it’s a good way to get state-of-the-art performance once you know you need it, and a great way to prototype new features that might make people happy before you’re sure you want to sink a lot of resources into it. It’s pretty easy to prototype a recommender system like Amazon’s or Netflix’s, or something like a quick “Hey, this isn’t what you normally do, is this really you/did you mean to do something else?” which is get into fraud detection and error recovery.

Outside of a production context, it can be really interesting to try and look at what the machine has learned and the way it views the world, or to compare the machine’s performance to other systems—e.g., humans. Sometimes things that we as humans think are really important (or not important) turn out to be pretty different from what the machines “learn” as being important.

There’s this great paper by some Stanford folks — including Dan Jurafsky, who’s one of my favorite profs there — about speed dating that basically shows that machines can learn to be better at detecting flirting than we humans are! Most people, I think, would have intuited that humans would be better at that, since, y’know, flirting is a pretty human thing. Or at least a very squishy-animal thing.

Turns out our intuition fails and what the machines have learned is a way more accurate way to detect flirting.

How is Machine Learning applied in the world?

Fraud detection is probably the most canonical example. Computer vision is another big one. Natural Language Processing uses ML all over the place, from language translation to writing analysis (like how they found out who Fake Steve Jobs was) to handwriting and voice recognition to sentiment analysis.

Then there’s recommender systems, like Netflix and Amazon and Pandora. Social network connection prediction. Stock market analysis and prediction (if you’re lucky!).

Medical diagnosis and treatment recommendations. The list goes on and on.

What’s your advice for an aspiring data scientist?

Read a lot of papers.

Take Andrew Ng’s course on Machine Learning. If you like language, take anything you can find from Dan Jurafsky and Chris Manning, I think they’re doing a Coursera course too. Play around even more than you read, actually do things. Pick toy problems and ask yourself how you can solve them, come up with a simple solution, build it. Then try to find out why it’s not performing perfectly — what’s it getting wrong?

Think about how you can improve it. Sometimes the way you’d need to improve it would require a lot more data or computational resources. That’s okay, you don’t always have to actually build it. But thinking through those next steps is a great learning process. (And then going to find out what people did who actually did take those next steps is always helpful too!)

What are resources for someone interested in getting started in data science?

Andrew Ng’s course on Machine Learning, which is now on Coursera, is kind of amazing. Like, it’s really, really good.

Dan Jurafsky’s NLP course got me into NLP, which is actually how I circuitously got into ML, so if you like playing with language these two courses will be the cat’s meow for you.

I usually use Python when I can, as it’s a great tool and pretty popular. R is also good. I like MongoDB, which mentally maps pretty well to how I think about data and its flexibility regarding schema is nice for playing around with data you’re still not yet sure how to structure. PiCloud is a cool tool for distributed processing, though I’m not sure about the future of the platform. The team, great folks, just joined Dropbox, so we’ll see — I think someone else is taking it over.

Heroku is great for I-don’t-want-to-deal-with-server-shit-but-need-to-deploy-this-to-the-cloud, I use it all the time.

And within Python there are the usual suspects NumPy, SciPy, scikit-learn, Pandas, Matplotlib…

Actually, a lot of these resources are listed in the Open Source Data Science Masters, which is a great collection.

What data science application inspires you?

Pandora single-handedly brought me the biggest joy of any tech company. They have just brought me so much delight thanks to their music recommendations.

What is a common misconceptions about data science?

That you need a PhD in math. I mean, it’ll certainly be helpful if you do have one… But seriously, I think the biggest misconception is about the scope of what it means to be a data scientist.

It’s not just math, it’s not just CS, it’s not just engineering, it’s not just domain expertise… it’s everything.

Usually you’ll have a team of data scientists, some of whom are stronger at the mathematics, some of whom are stronger at the software engineering, some of whom know more about the domain, etc. And sometimes you try to embody all of those people in one, because you’re at an early-stage startup or something like that. But that doesn’t mean you have to be all of those things to attempt to become — or succeed at becoming — a data scientist.

Join Hackbright Academy’s new Data Science course focusing on Machine Learning this April 5-6, 2014 in San Francisco.

Welcome to the Hackbright Blog!

Welcome to the new Hackbright Blog! So far, everything the Hackbright community has been doing has been published in 140 characters or less – or on other wonderful blogs. We figured it was about time we had our own blog!

We will be posting from here moving forward. Feel free to stop by every once in a while (i.e. everyday) to see what’s new in the Hackbright community! Thanks for checking it out, hope you like it :)