Sooner or later, anyone serious about creating an iPhone app of reasonable complexity will want to do mockups of the various screenshots. For a very simple app, it might be possible to do without mockups (or wireframes, as they are also called), since you might have only a single screen with one or a few simple data fields to fill. In that case, it would make sense to go ahead and program in your buttons and windows without doing mockups of the window. Most of the time, however, mockups will be an essential part of planning the look of a new app. It’s too time-consuming and expensive to code in a bunch of buttons and commands only to have to change them because the look wasn’t consistent with other screens, features weren’t needed (or needed to be added) after focus group testing, or your boss just didn’t like their placement. It’s far easier to make mockups of each screen and test them against your focus groups (and your boss) before coding.
How to create the mockups? Pencil and paper are a traditional method, of course, and still a good one. They have the right look of impermanence to them; that is, they look like a work in progress. That look of impermanence is an advantage. Nobody can be surprised to find that the final coded iPhone screen will look different than the pencil drawing, so your team or your boss won’t feel bad about making changes to the design. Lack of drawing skill is no problem either, since stencils are available to trace a lot of the basic shapes that a routine app iPhone or iPad uses. But suppose you want to make a lot of changes to the design… and then change back to the original.. or only change some of the design back to the original… That’s an awful lot of erasing and redrawing. Wouldn’t it be nice if there was an easier way?
Well, there is an easier way: Balsamiq’s aptly titled software product, Mockups. This application is designed for creating wireframes of web sites, software windows, and, of course, iPhone and iPad screens. I’ve tried it out and it’s incredibly easy to use. It gives you a palette of objects that might typically be used in a web page or iPhone screen, and all you have to do is drag them into place and resize them as needed. You can add text to your visual objects, change colors, and reposition items as needed. The best thing about it is that the mockups you create have a wonderfully impermanent look, so that you don’t have that this-design-was-so-much-work-to-create-I’m-stuck-with-it feeling. Balsamiq describes the look as “intentionally rough and low-fidelity”. At some point, you would want to go to a more refined look as you finalize your screen appearance, but there are other tools for that, like OmniGraffle. Mockups is specifically designed for that early stage of of development.
Here’s an example of a wireframe that took me about five minutes to create while first trying out the software:
As you can see, the image is not refined, yet it’s still a complete picture of a potential iPhone screen (though not a very useful one in this case). Nobody would mistake it for the final view, but it still gets the point across. You could also add a street map to the view, cover flow views, iTunes Playback controls, progress bars, etc, the list goes on, and it’s all faster and easier to add or delete than it would be on paper. Need to collaborate with someone off-site? You can do near-real-time editing over the net through Dropbox. Are there elements or images you would like to use that don’t come in the standard palette? Go to the Mockups To Go website, where they have an active community of people creating new design elements and posting them for free download.
The company has some great plans in the works, including developing an online version of the software which will allow for commenting, versioning, and access control. Even without those features, though, it’s a great product made by a great company. Not only that, but the Mockups Help menu includes an item titled “What should I make for dinner?” and when you click on it, one of the cookbooks they feature is the version of the Betty Crocker cookbook my mother had when I was a kid. How cool is that?
If you have any interest in wireframing, check it out. Also take a look at the company blogs, everybody in the company writes one.