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:
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:
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?
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.
- Admissions Office (24)
- Alum (96)
- Blog (153)
- Career Services (26)
- Diversity (17)
- Engineering Advice (57)
- Hackbright Field Trips (24)
- Hackbright Mentors (21)
- Hackbright News (105)
- Podcast (2)
- Profiles of Woman Engineers (103)
- Recruiting & Hiring (15)
- Resources (39)
- Student Blogs (24)
- Tech (50)
- Thought Piece (19)
- Uncategorized (2)
- Video (20)