Put Something Ugly on Your iPhone

Congratulations, you've just built an iPhone app out of paper. Now it's time to shuffle those pages to get your stick figures off the page and onto an actual iPhone. As you learned in the last chapter, it's as important to make the app feel right as it is to make it look good. As soon as possible, before you start sprinkling your magic design dust on your sketches to turn them into a sparkling iPhone app, you should test how your sketches feel on an actual physical device. Don't worry about making it pretty; get an ugly prototype onto an iPhone just to see whether your design will work. This step helps you test that your layout makes sense and the ergonomics seem right before you invest in the careful work of style and color.

This pixel prototype doesn't have to be fancy, and it certainly doesn't have to be a working iPhone app. Since you really just want to see how the layout looks and feels on the phone, keep it low-tech: scan or photograph your sketches and, using a graphics program, size them to the iPhone's 320 × 480 screen. Add these images to your computer's photo collection (iPhoto on the Mac, for example) and sync them to your iPhone, where you can flip through the sketches full screen in the Photos app. Again, nothing fancy here; this just gives you a sense to check that your design's sizes and proportions work.

If you're feeling more ambitious, create a simple dummy iPhone app to try out your bare-bones layout. If you've got an iPhone developer handy—or if you're one yourself—you can build a quick-and-dirty app using standard buttons and controls that match up to your sketched layouts. This prototype shouldn't do much more than flip through screens. Use fake content just to show text placement, and wire up your buttons so you can tap from screen to screen. Or take a hybrid approach: build a working prototype app that uses your screen sketches but adds tappable regions to them that respond like real working buttons to flip to new screens and views. Happily enough, developer Rob Rhyne has developed a nifty iPhone code framework called Briefs that does just that—find out more at www.giveabrief.com.

Once you're satisfied that your rough sketches are moving in the right direction, you can start designing more polished mockups. Several developers have been kind enough to share their personal comping kits, collections of pixel-perfect iPhone elements that you can download and use in your favorite graphics program to assemble realistic layouts. Here are a few:

But now we're getting ahead of ourselves. Before you start working with true-blue iPhone controls, you'll need to know their details. Working with these tools the Apple way is the topic of the next chapter.