The iPad continues to evolve as a creative tool as new
and innovative iPad apps launch. There are even wireframing apps for the iPad
that allow you to mockup your team’s next great application without having to
fire up Microsoft Visio or OmniGraffle. I’ve been creating wireframes using an
app on my iPad for more than a year now.
During that time, I’ve tried Mocking Pad, SketchyPad, and
iMockups with varying degrees of success. Each of these apps gives you full control over where you
place the element using only touchscreen gestures when creating wireframes. Some business users might argue that Visio and OmniGraffle give
you a bit more fine-tuned control, but once you create a few wireframes using an
iPad and the right app, you’ll see that it’s a bit friendlier and quicker than using those other full applications.
The Mocking Pad app costs $9.99 (USD), and it has wireframe stencils that are device agnostic, which
could be good for users who develop more than iOS and web apps. The app includes Retina
display support, and the developer recently redesigned the app for iOS 7.
Mocking Pad has some typical wireframe stencils, including:
- Media elements
- Mobile elements
Out of the three wireframing apps for the iPad I tested,
Mocking Pad requires the most patience to get wireframe elements laid out in
the app. For example, the Grouping and template options get lost in the app’s
minimal user interface. I also had a more difficult time resizing
a keyboard stencil in Mocking Pad than I did in the other apps, because the
steps weren’t very intuitive. In addition, many of the wireframe elements have a marker-drawn feel to them. Figure A shows the start of a
tablet app wireframe.
Tablet app wireframe using Mocking Pad.
There is also a “Pass the Pad” mode for locking down
wireframes when sharing them with clients and colleagues. This is a nice touch
and a feature that could push the purchase decision for iPad users who do lots
of client work.
You can get wireframes you create in Mocking Pad off of your
iPad via Dropbox or email. If you aren’t too familiar with graphics apps on the
iPad, I recommend practicing before you send the wireframe to your boss
or a client, because the app lets you include the native, HTML, SVG, and PDF versions of your wireframe.
SketchyPad costs $4.99 (USD), but it hasn’t been updated since August 17, 2010, so its skeumorphic “freak” flag still waves proudly. This app has over 60 stencils, including:
- iOS (elements)
In the left column, tap on the interface element you want to
add to your wireframe. Drag it over to your wireframe, and move it into the
position where you want it to appear. Figure B shows an example of a wireframe under development for
an iPad app.
Wireframe for an iPad app.
Your only options to get wireframes out of SketchyPad are to
save it to Camera roll, send the sketch via email, or export it to Balsamiq.
iMockups for iPad
My favorite of the wireframing apps I reviewed is iMockups for iPad. This app costs $6.99 (USD), and I found it to be a fast, responsive, and unpretentious. It includes wireframe components for web, iPhone/iPad, and markup. The
markup elements separate this app from the others, because you can use electronic
sticky notes, shapes, and other markup techniques to get reviewers to comment on
wireframes, or use the markup to draw attention to certain decisions made while
creating the wireframe.
Figure C shows the start of an iPhone app wireframe I put
together while writing this post.
Start of an iPhone app wireframe in iMockups.
To get wireframes out of iMockups and off your iPad, you have to save the wireframe you create to the photo library or email it in PNG,
PDF, or Balsamiq Mockups Markup Language (BMML) formats.
Create wireframes on your iPad
Visio and OmniGraffle are powerful tools in their own right.
I use both applications frequently on client projects. However, in today’s
increasingly Agile world, both carry with them real and/or implied complexities
and time drains. Creating a wireframe on an iPad using one of the apps I highlighted in this
post is fast and can be done anytime from anywhere.
My only real concern for any of these wireframing apps is
the lack on ongoing file backups. What if a designer’s iPad is lost, damaged, or
stolen? Of the three, only Mocking Pad has cloud support. While the lack
of a backup tool may not be a deal breaker for some, that it even enters the
discussion shows that the iPad continues to infiltrate tasks formerly owned by PCs
Do you create wireframes using an app on your iPad? Share
your experience in the discussion thread below.