iOS Dev Notes

iOS Development From The Frontlines

Creating Great iPhone and iPad Mockups

with 5 comments

Building great iOS apps starts with a set of great mockups. For anything but the most trivial of apps, having a good set of blueprints can be enormously helpful, allowing you to refine the user experience before jumping into the code. Too many people either skip this step or don’t know how to do it effectively. Although going through this process requires some investment up front, the dividends often justify it.

In my first post for iOS Dev Notes, I’m going to walk you through the key points of building an iOS application’s wireframes. First, we’ll go through some background info on wireframes and mockups, then we’ll start creating our own.

Workflow

Process to create iPhone/iPad wireframesThe power of wireframes is speed: when you have the right setup and tools, you can often mockup an entire iPhone or iPad app in an afternoon or so. Then you can iterate on your mockups until everyone is satisfied. Adding screens, tweaking graphics and layout, and anything else is trivial compared to building the app.

When building wireframes, my workflow consists of the following steps:

  • Create wireframes, screen by screen, for the entire app using OmniGraffle. Each screen is a canvas, and as I go through I try to tell a story (more on this later).
  • Copy wireframes into Keynote and add annotations.
  • Solicit feedback and refine the wireframes.
  • Create comps

Ultimately the goal is to diagram every step in the app. Almost nothing is too small, including loading screens, alert messages, etc. I may even include a screen showing the iPhone Home screen with the app’s icon.

In my experience I’ve found that even the trivial screens (like alerts or loading screens) can be important to clients who are cognizant of the overall user experience. It’s also a great way to see where you may be overusing certain visual elements, like UIAlertViews.

Telling a Story

Good wireframes tell a story. If you’re thinking like a user – and not a programmer – when creating your wireframes I can promise that you’ll end up with a much better app. The easiest way to do this is to think of the path you’re likely to take through your app as if you were seeing it for the first time.

Let’s take the iPhone’s Mail application as an example. When you first open the app, should you be brought to the list of folders or to your Inbox? Where is the Compose button located? Do you include a button to retrieve messages from the server (if so, and you’re using a Compose button and a UINavigation bar, where are you going to put your refresh button)? Questions like these force you to think of the app’s layout and usability, which is crucial to creating good mockups.

Each wireframe should flow into the next. To accomplish this, I like to include a small icon showing a finger tapping the screen (or some other relevant gesture). See the graphic below:

iOS mockup progression

By the end of this process, you’ll probably have numerous nearly duplicate wireframe screens showing seemingly trivial things, like loading screens. But starting at the first Canvas and flipping through one-by-one, you should be able to tell exactly what the user is doing in the app, tap-for-tap.

Getting Started with OmniGraffle

The first tool we’re going to discuss is OmniGraffle (about $99) for the Mac. There are a number of other tools out there, but I’ve found this one to be the most intuitive while allowing me to create both wireframes and comps. The power of OmniGraffle is really in the speed with which you can create these documents: just drag-and-drop graphical elements onto your canvas to build your screens.

You can get started with OmniGraffle with a free trial at their website.

Before we do anything, we need to get the right stencils for OmniGraffle. Stencils are like graphics libraries with common elements to build your iOS interfaces. There are a number out there, but here are the ones I recommend you get started with:

To install a template, just download it from the link above, uncompress it, and double-click the file. Then, within OmniGraffle, click the Install button (on the right, in the Stencils window).

OmniGraffle canvas settings for iPhone wireframesOnce we’ve installed our templates, we now need to setup OmniGraffle to have the right canvas size. As you’ll see in later steps, I don’t use OmniGraffle to print out wireframes, so I’m going to tweak the canvas size without worrying about fitting it to a printer page.

Open the Inspector to edit the Canvas Size. With the stencils we just installed, I’ve found that a canvas size of 576pt by 764pt seems to work well. If you want to keep everything in one document, rather than using Keynote to add annotations, then you may want to consider setting up Landscape for the orientation and leaving room to the side of your wireframe. One tip: I usually set the Page Margins to 0 when doing my wireframes.

I’ll leave it up to you to decide what flow works best. As you do more of these wireframes, you’ll find a style that works well for you.

Creating a Wireframe

Use OmniGraffle layers for iOS mockupsLet’s get started with the first wireframe. Use the iOS Wireframe iPhone stencil and drag the iPhone stencil to your canvas. Center it on the canvas by dragging it left and right until it snaps to the center.

Next, drag the iPhone status bar (with the time, battery, and carrier) to the canvas and align it to the top of the iPhone’s screen.

In the left pane (called Canvases), click the Lock icon. You’ll notice that you can no longer select or edit elements on this layer. Add a new layer by right-clicking on the canvas image, or click the Add Layer button at the bottom of the Canvases window. You’ll see a new layer is added above Layer 1 (our background). This is where we’ll add most of our screen’s elements.

Next, drag a few elements over. For instance, I added a Navigation Bar to the top, a UITableView Grouped element to the center, and a Tab Bar to the bottom. It’s starting to look like a real wireframe!

An iPhone mockup created in OmniGraffle

Annotations

Now that you’ve got the hang of creating your individual screens, the next step is to put them together into a complete set of mockups. For this, I like to use Keynote (part of iWork on the Mac).

The idea here is to bring each screen into Keynote as it’s own slide. Using a landscape design, I then attach a set of bulleted points for each screen, explaining what the user sees and other important notes (especially things that may be going on behind the scenes and not visible to the user).

Completed iPhone wireframe with annotations

While in Keynote, I’ve found that keeping each screen simple and to-the-point works best. I don’t use any themes or other styling, and my mockups are almost entirely devoid of color. The goal is to force the viewer to use their imagination a bit to picture how this screen is going to look on the iPhone or iPad.

As I said earlier, there’s no requirement to use Keynote for this step. I like using it because I can easily re-order slides (and add title slides and other non-wireframe info) without cluttering up my OmniGraffle document. Find a workflow that works for you.

Iteration

The last step is to put it all together. Create your wireframes, package them into a story that walks a user through every corner of your iPhone or iPad app, and present it to them with usage notes. Let your mockups speak for themselves. I like it when they tell the entire story so I don’t need to say a word for my client to understand exactly how the app will work. If you’re doing client work, your wireframes can also double as a great Statement of Work/Scope supplement.

As you go through the initial diagramming process you’ll no doubt pick up on a number of rough areas that could use some improvement. Refine your wireframes (or at least point out the problem to your client and work with them to refine the experience). Redoing a few screens at this stage shouldn’t take more than a few minutes to an hour, whereas reworking screens once they’ve been coded can take days or longer.

Finally, keep getting feedback. Wireframes tell the user how the app is going to work, while the next step (comps) show the user how the app is going to look. Since you’ll be spending a lot more time building comps than wireframing, I suggest you focus on getting these screens as close to the finished product as reasonably possible.

In a later article, I’ll get into some more advanced wireframing topics, including tips on creating tricky iOS-elements like pager controls and custom cells, along with comps. Hopefully this is enough to get you started.


Looking to add push notifications to your iOS app? Check out PushLayer, a service from the authors of iOSDevNotes.

Bookmark and Share

Subscribe for updates

Fill out the form below to join my newsletter. I'll also send you a bonus copy of my ebook, "5 Steps To Becoming a Better iOS Developer".

Written by rtwomey

March 28th, 2011 at 3:15 pm

Posted in Tutorials,UI

Tagged with , , ,

5 Responses to 'Creating Great iPhone and iPad Mockups'

Subscribe to comments with RSS or TrackBack to 'Creating Great iPhone and iPad Mockups'.

  1. Hi,

    There is also App Cooker that is much more dedicated to make iOS mockup. It is the perfect tool for the task and helps you not only make the mockup but think about your project in a gorgeous interface! Just have a look if you don’t believe me. http://www.appcooker.com

    Bobby

    7 Aug 11 at 3:19 am

  2. I realize it is an old post, but I need to mention thanks for writing this.

    Sites like Fiverr

    28 Dec 11 at 8:57 pm

  3. Have you tried Creatly iPhone mockup tools. It’s web based and have a template library that is very close to the real thing, extremely useful when dealing with clients. Check out some of the features http://creately.com/blog/announcements/iphone-mockup-tool-mockup-templates/

    Nishadha

    26 Jan 12 at 6:12 am

  4. hi guys try pencil for firefox extension you can create really good mockups its free app and also available for mac and windows as stand alone app

    webmasterdubai

    2 Jun 12 at 5:41 pm

  5. You can always get back to pen and paper to get your vision first with my App Sketchpads http://www.appmockuptools.com/collections/types?q=Sketchpad then transfer your vision with my iOS GUI Element Kits http://www.appmockuptools.com/collections/types?q=iOS+GUI+Elements. Fully editable interactive prototyping and wireframing kits. No coding just copy and paste.

Leave a Reply