Sketching interfaces on the iPad with iMockups

An application called iMockups came recently to my attention as I was going over the drawing and diagramming tools available for the iPad.  This is an interesting application that is designed to let you quickly create sketches of interfaces for Web, iPhone and iPad applications.

While I hadn’t really considered it before, the iPad does seem like a good option for conducting a one on one session for doing an early application sketch along with an application user.  In fact Endloop Systems, the creators of iMockups position it exactly as a tool for quickly creating the first rough sketches of an application’s interface.  From my initial experiences with the application I would say that it does meet that goal.

My first experiments with iMockups were in creating a pair of sketches for web interfaces.  One based on the layout of a website and the other putting more emphasis on a web-application like interface.  I was able to put both together fairly quickly even though I had never used the application before.  While I wasn’t able to get the sketch to look “exactly” like I imagined it, I didn’t really expect to.  The sketch I got is sufficiently close to how I would draw it on paper, that any differences were irrelevant.

Doing it on the iPad instead of paper gave me the freedom to move things around a bit and try other layouts, without having to start all over again.  I know that this is a pretty obvious advantage of drawing something on a computer, but sometimes people forget to consider the obvious.

It is quite easy to create mockups of iPhone and iPad apps with iMockups.  Doing so for iPhone applications is particularly interesting as you can have several different mockups on the same “page” in the application.   In my testes I created a two page project with one dedicated to an iPad mockup and the other with an iPhone sketch.

Above you can see my first iPad application mockup and below my first iPhone application sketch.  While I wasn’t really trying to define how a new application works, I was trying to create something that roughly matched most of the applications I use on these devices.

Once you get the interface elements into the drawing, by either dragging or taping them, you can adjust their appearance by selecting them and taping the “info” button.  This button brings up popup with configuration options of that specific interface elements.  This can help you to change important properties such as the orientation of a scroll area.  Through this popup you can set the objects size and position as well it z-order.

Setting the z-order of an element lets you specify if it should shown behind or in front of other elements.

The general concept of iMockups is quite easy to understand and you get used to how it works fairly quickly.  Most of the time that you using iMockups for iPad you will be holding your iPad in landscape mode as the application has two side panels which takes up some screen space to both sides of the drawing canvas. Holding the device in landscape mode adds just enough space for you to see your canvas and the side panel with elements you can choose to add to the diagram.

This application has seen a steady stream of updated since it was released, with a score of new features added and a good deal of bug fixes too.  To me this is a very good sign that the developers are continuing to work on improving it.  From going over their release notes I was able to tell that several new interface elements have been added and the panel from which you choose the element you want to add to your sketch was reorganized into categories such as Web, iPhone/iPad and Markup.

The Markup elements aren’t intended as interface elements but as items you  can add with notes and indications of ares in which you think something could or should be fixed.

iMockups is a good application that does the job it sets out to do, to my satisfaction.  It will be interesting to see how it evolves and what other features get added to the application over time.

If you liked this article, please take a moment to follow iPadWatcher on Twitter.

Related Posts:

2 Responses to “ “Sketching interfaces on the iPad with iMockups”

  1. Mikel says:

    mail or pDF.
    It has the option to email or export to PDF the designs?
    Thanks.
    Mikel.

  2. Mauricio Longo says:

    iMockups has the option of exporting as a PNG image file. This file can be emailed directly or saved to the iPad’s photo library. It also has the option of email a file in its own format so that you send a project back and forth between two iPads.

Trackbacks/Pingbacks

  1. The iPad is about to steamroll into the Enterprise | iPad Watcher - [...]  a few of the better known examples. I’ve run across several other interesting apps such as iMockup for iPad…

Leave a Reply

Your email address will not be published. Required fields are marked *