The Importance of Storyboarding Your iPhone App

Before you build, diagram your app's flow of screens, like a movie director preparing storyboard sketches for every scene of a shoot. Make sure that you have clean, untangled lines through your hierarchy of pages. Every path through your app should unfold like a quick story, following a logical chain of events to an expected conclusion. Along the way, each screen should tackle just one plot element at a time, focusing on a single task or content element—one list, one detail view, one article, one photo, or one contact. Don't try to make your screens do too much. Instead, create a deliberate pace where every screen has a clear, unambiguous role.

Everyone's got their own creative process, but it's almost always best to begin with paper sketches before you start slinging pixels in Photoshop or Illustrator. It's certainly better—slow down now—than jumping straight into coding your app. Once you start designing onscreen, you fret over colors, button sizes, and pixel-perfect spacing—stuff you shouldn't worry about until you've settled your app's larger concerns. Sketching on old-fashioned wood pulp encourages a free-form mindset that keeps you from descending into overly fussy details while you do the important work of storyboarding your app.

Mapping your flow of screens helps confirm that you've chosen the right navigation model to accommodate all the pages of your site. If you can crisply visualize the whole thing on paper, your audience will likely find it easy to understand on the screen. The goal in these early stages is to rough out your app's primary screens, figuring out the way people will flow through your app to accomplish primary tasks. At this point, don't worry over the specifics of which controls to use—you'll explore the standard iPhone controls in the next chapter. For now, your sketches should simply address the broad strokes: the screens you'll need, the actions to take on each one, and the general visual proportions of the tools and content to include. You're organizing your screens and prioritizing tasks at this stage—sketching, not designing.

If you're working in a team, this is a good stage to get all the decision makers involved. Sharing sketches, or drawing them together on a whiteboard instead of paper, is a cozy way to make sure everyone has the same basic vision of the app and its goals. When your group works with sketches—basic wireframe storyboards—you're able to talk about the bones of the app without getting distracted (or lulled) by considerations of style, color, and personality. Now's the time to make the big decisions about how the app interface should work. Changes that you make at this stage are easy—grab the eraser—but they become harder and harder as the design and development process proceeds. Don't wait to get sign-off until after you've already started applying your gorgeous graphics. Work it out on paper first.

The design team behind the Things to-do app created a paper prototype of every screen before starting to code, sketching the flow through every screen of the app. (Sketches by Cultured Code designer Christian Krämer.)


Even though you're just thrashing through rough concepts at this stage, it's useful to make sure you're working in consistent proportions and a realistic size. Sketching iPhone-sized screens on graph paper is a perfectly good homegrown approach that helps keep your screens in balance with one another. As your sketches become more refined and you start to zero in on the precise layout you plan to use, the graph paper will help to size specific elements in the right neighborhood (think 44 pixels).

If you're doing lots of these screen sketches, you might consider splashing out with a more formal iPhone sketchpad. App Sketchbook sells spiral-bound notebooks with three life-sized iPhone templates per page, each with 20-pixel rules and title bar markings. Notepod sells a pad of iPhone shaped pages, with correctly sized blank screens that let you sketch and tear off screens as quick as you please. There are also several download-and-print templates that fill the same role, like this PDF from the excellent "First & 20" website.