Apps

Make the iPad your next wireframing tool

Will Kelly reviews three apps for creating wireframes on your iPad.

 

Wireframe on ipad
 

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.

Mocking Pad

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
  • Shapes
  • Graphs
  • Text

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.

Figure A

 

Figure A
 

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

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:

  • Buttons
  • Containers
  • Layout
  • Media
  • Text
  • 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.

Figure B

 

Figure B
 

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.

Figure C

 

Figure C
 

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 and Macs.

Do you create wireframes using an app on your iPad? Share your experience in the discussion thread below.

 

 

About

Will Kelly is a freelance technical writer and analyst currently focusing on enterprise mobility, Bring Your Own Device (BYOD), and the consumerization of IT. He has also written about cloud computing, Big Data, virtualization, project management ap...

1 comments
HHill_The_Music_Man
HHill_The_Music_Man

Have you checked out Pentotype? Although this is not really my field, and I just got it because the guy makes a cool Midi app (and Penotype was free, or at least it's a demo that is - as was the iPhone scanner for it - & that's Penotype's primary function - ie wireframing for iPhone apps), this seems like it might be exactly what you were asking for. It has an automatic backup that all you have to do is subscribe to. http://www.pentotype.com

Editor's Picks