SW engineering, engineering management and the business of software

subscribe for more
stuff like this:

@amattn on iOS Prototyping

If you reside in a place where an app prototyping tool famine ravages the landscape, then you don’t live on my planet. Here on Earth, you have at least four mighty options:

  • Pen & Paper
  • Keynotopia
  • Briefs
  • Storyboards


Pen & Paper Prototyping

Prerequisites: Pen, paper, preschool education.

Draw your wireframe. Maybe cutout some views to simulate transitions. Go to storytime then take a nap. Not much to say here except that almost every app should start here.

If you are doing a larger project, consider some of the great stencils and sketchpads from UI Stencils. Once you are past brainstorming and into wireframes, they become drift from the land of helpful into the rainbow tinted realm of compelling.

One interesting observation after some paper based UI sessions is an average pen is pretty good at approximating easy click targets for the average human finger. If you can’t write it, it may not fit.

Keynotopia

Prerequisites: Keynote, Keynotopia templates, Half a brain

Keynotopia rings the correct bells and blows the proper whistles. I’ve seen people raise Angel rounds in Silicon Valley based off of demos done with this tool. The whiz bang part is when you open the file on your phone after emailing it to yourself. Instant Device Demo.

You could use PowerPoint, but Keynote is twenty yuu ess dees and overall a less stressful tool when it comes to prototyping. Oddly, the template bundles are now more expensive than Keynote itself…

Briefs

Prerequisites: Some scripting knowledge, Sympathetic soul

Briefs is a nice tool that made the rounds on the interverse for getting rejected by the black hole of the approval process. It’s still a good tool and has been open sourced by the developer after getting jerked around by Apple for so long.

If I were on an elevator, I would describe it as turning images into clickable apps. It’s based on a simple language with the adorable acronym BS. BS is very close to CSS. I’ll wait while you fill this space with the obvious joke. Hahaha nice one!

Like Keynotopia, it’s great for making clickable but ultimately non-functional demos.

Xcode Storyboards

Prerequisites: Xcode 4.2, Objective-C, UIKit familiarity, Tolerance

When Storyboards were announced at WWDC, I was initially skeptical about their benefits over traditional nib files. I’ve since been converted like an indigenous population. I’ve found that in practice, the diminished about of boilerplate is a net win.

Xcode Storyboards really shine however, when doing prototyping work. You can use the built in segues to implement quick, no-code transitions between different screens. It’s a super quick way to stub out the flow of your app.

People scrolling down for the conclusion, START READING HERE!

In practice, you will likely only need one or two of the above tools.

Your own technical expertise may be a limiting factor. The more dev chops you boast, the more options you have.

The other concern is how far into the design process you are.

Paper Prototyping is typically a brainstorming kind of tool. Briefs is aimed at making a quick demo from your brainstormed images, while Kenotopia is something in between. If you have a fairly solid feel for the flow of the app, Xcode Storyboards are great choice, especially given how easily they can be converted to a production project.

Some quick notes on other options:

  • Photoshop Templates: Tendency to go for pixel perfect, doesn’t feel “rapid” enough.
  • OmniGraffle: Keynotopia has better support for transitions and easier to get running on the device.
  • Basalmiq: It’s a nice tool, but you have to chose the web app or the Adobe Air App. Would you like to poke yourself with a fork or a spoon?


in lieu of comments, you should follow me on twitter at twitter/amattn and on twitch.tv at twitch.tv/amattn. I'm happy to chat about content here anytime.


the fine print:
aboutarchivemastodontwittertwitchconsulting or speaking inquiries
© matt nunogawa 2010 - 2023 / all rights reserved