What are the best tools to create mock-ups of an iPhone app application storyboard, which describes the app flow and the desired user interaction?
We often recommend and assist our customers to build “wireframes” of an App idea that describes all the screens and the expected user interaction, together with the main features of the project. Creating wireframes for such a storyboard of the iPhone Native App views and screens is also a great way to brainstorm and verify the application flow.
Application prototyping is an important part of the software design process. It’s the first stop in which you layout a rough user interface and define the basics of user interaction you expect from your iPhone app. The Apple iPhone and iPod Touch are all about user experience. For this reason we often spend a little additional time to get high quality wireframing before we get to the actual design and development process.
A detailed storyboard of an iPhone app also allows our designers and developers to create much more detailed and accurate estimates of the involved effort to deliver the app to the iTunes App Store.
Creating an iPhone user interface from scratch can be tricky. There are several official Apple human interface guidelines to be taken in account and a few rules you cannot break in order to get the app approved by Apple. These are all things our engineers will verify before building the app, however following a couple principles will help prevent most of the common mistakes.
First: native is better.
There is no need to add bells and whistles at this stage. What is really needed is a straightforward interface that uses as many standard controls as possible. A “standard control” is an interface element that is available as a native item in the Apple’s Interface Builder library. Interface Builer is an Apple app which is used to build the necessary resources for iPhone and Mac OS X apps to work through a standard GUI and is part of the Apple’s iPhone SDK.
The native interface items include but are not limited to:
- status bar
- navigation bar
- tab bars
- table views (often referenced to as lists), with or without “borders” (the rounded corners like in the Settings app)
- pre-defined buttons and segmented controls
- sliders, switches, spinning wheels
- paging indicators
Second: Size matters
It’s not just how you use a standard control, it’s also about how big it is. The minimum recommended size for an active element (a button or a “hot”, tap-able area) on the iPhone screen is 44×44 pixels. Apple is the first one to break this rule when it makes sense, so it’s not mandatory. Just use your common sense here and, while prototyping, a bigger interface element is a better choice then shrinking everything to make them fit the screen. So if all the controls you want to put in one screen won’t fit, there are probably too many of them.
All right, enough noise now, what should I use to get the job done?
There are a handful of applications you can use to make an iPhone App storyboard.
The fast answer: Adobe Photoshop.
The technical answer: Interface Builder.
The alternative… for the rest of us: OmniGraffle, Keynote… and Powerpoint
- take screenshots of the Interface Builder screens and paste them into Keynote;
- drop any image file to the slide (even OmniGraffle Stencil library items)
What if I don’t have a Mac?
Libraries and resources
The following libraries and resources can be used with OmniGraffle, Keynote, PowerPoint and more apps:
Yahoo! Design Pattern Library – Design Stencils
UI Vector elements by Mercury Intermedia (download link)
iPhone GUI PSD by Teehan + Lax (download link)
Ultimate iPhone Stencil by Patrick Crowley (download link)
iPhone Design Elements by Creative Tech Tips (download link)
iPhone Wire Frames by Theresa Neil (download link)
iPhone 3G by 2Shi (download link)
SMS Chat Bubbles by Alexandergre (download link)
Blank iPhone Buttons by memedbaykal (download link)
iPhone Interface Elements by 320480 (download link)
iPhone Icon Style Kit by Keep the Web Weird (download link)