Sketching and prototyping tools for iPhone apps

Our daily sketching and prototyping work used to focus itself mainly on desktop applications. These days mobile is getting a larger and larger share of our design time. We need to adjust our design tools for this. During the months we’ve been doing this I came across several tools, I’ve listed and reviewed (where possible) them here.

Our daily sketching and prototyping work used to focus itself mainly on desktop applications. These days mobile is getting a larger and larger share of our design time. Not all sketching and prototyping tools for desktop applications work well for mobile apps. Therefore we need to broaden our arsenal of tools so we can more efficiently prototype mobile applications. This time I’m focusing on iphone design tools since most of the mobile applications we design are for iPhone.

Sketching tools for iPhone applications

Sketching is not necessarily done on paper, but most of the tools I found are for paper sketching purposes. I must say most of them work well, for me there’s not much reason to buy sketchbooks and stencils since the free printable stuff is just as good or even better. Go see for yourself which suits you best.

iPhone Application Sketch Template by Oliver Waters
iPhone Sketching Paper
My favourite iPhone sketching paper, because of it’s simplicity. Grid squares are equivalent to 10px, and tick marks indicate the heights of the status bar, nav bar, keyboard, tab bar and toolbar. Oliver put it on Flickr, it’s a downloadable jpg and it’s totally free.
NotePod iPhone sketchbook by Jacky Winter and Inventive Labs
Notepod iPhone sketchbook
A sketchbook which is the size of a real iPhone. While sketching I don’t find these really useful because of it’s size. It’s really hard to get a nice grip on this paper and there’s hardly any space for annotations. It’s size could come in handy when you’re performing a paper prototyping user test since you don’t have to slice all the different screens out of a bigger paper. But for sketching ideas I don’t think it’s really practical. Costs: $17.95 (3 sketchbooks).
iPhone UI Stencil kit stencil by Design Commission
iPhone
This stainless steel stencil and mechanical pencil do come in handy when you want to draw an iPhone shape on blank paper. The stencil is made of stainless steel and is thick enough to draw pretty accurate. I’m sure you won’t use most of the icons and symbols and you’ll be missing quite a lot which you DO want to use. Most of the sketching I do myself is freehand anyway, using the template for icons and symbols slows you down in many occasions. Only when you need to draw something really accurately this tool will help you out. Costs: $17.95 (stainless steel stencil, zebra mechanical pencil and free downloadable templates.
iPhone Sketch Pad sketchbook by Design Commission
iPhone Sketch Pad
This SketchPad goes really well with Design Comission’s iPhone UI Stencil kit. But the templates are downloadable on their website as well, which allows you to print them by yourself. $7.95 (50 sheets, 70 lb paper).
App SketchBook sketchbook by Stephen Martin
App SketchBook
These sketchbooks are pretty simple, and that’s what I like about them. Every page has 3 real-size templates on it, they’re printed double-sided and the book contains 50 pages. Costs: $9,95.
iPhone Mockup online sketching tool by Lukas Mathis
iPhone Mockup
This is quite a nice tool, you can choose to use a sketchy or a solid template to design your iPhone mockups. The engine contains most standard iPhone widgets and you can upload your own. This sounds pretty cool, but uploading is quite a job because you will have to sketch or design your widget in another tool. This tool is only usable when you use standard iPhone widgets and share them online. There is no way (yet, they’re still in Alpha) to export or print images unless you draft your own screenshot. It’s free and it works smoothly. Thanks to Timothy van Sas for spotting this one.

Wireframing tools for iPhone apps

There’s some really neat wireframing tools around for iPhone. Honestly I don’t use these very much since I prefer using digital prototyping tools in which I can create my annotations on-the-fly. I found that a digital prototype is great tool to both test a tool, but also communicate my intentions with it to developers and stakeholders.

Ultimate iPhone Stencil for Omnigraffle by Patrick Crowley
Ultimate iPhone Stencil
A rather high-fidelity stencil for OmniGraffle to wireframe your iPhone applications. Great stuff when you need to present a new app to your client. It’s easy to make the application look visually appealing with only a bit of effort. In Omnigraffle it’s easy to import or create your custom widgets.
iPhone 3G Stencil for Omnigraffle by Theresa Neil
iPhone 3G Stencil
Also a high-fidelity stencil for Omnigraffle. It’s updated up-to iPhone 3GS and iPhone OS 3.0. I’ve used these stencils for a while but I feel I have to start over when I want to make a decent prototype out of it.

Visual design templates for iPhone apps

Apple’s iPhone SDK makes it really easy to play around with all standard iPhone widgets but in order to visualize your interactions and be able to quickly add or remove some custom stuff it really handy to work in Photoshop or Fireworks. Below you find the tools that I found during my short search a while ago.

iPhone GUI PSD 3.0 Photoshop Template by Geoff Teehan
Teehan+Lax iPhone GUI PSD 3.0
This is an awesome PSD when you need to pitch for a client and you want to mockup something really quick which looks slick anyhow. Geoff did a great job on this one. The whole PSD has vectorbased elements which are neatly layered and organized. I’ve used this one for two projects now (including Usabiltyweb’s new iPhone app) and it helped me ot greatly.
iPhone interface PSD file Photoshop template by ThreeTwentyFourEighty
iPhone interface PSD file
I came across this one while writing this post. I’m not sure about the quality of it. Perhaps when Geoff’s PSD isn’t sufficient for your needs you want to check this one out. Let me know what you thought of it.
Fireworks toolkit for creating iPhone mockups Fireworks template by MetaSpark
Fireworks Toolkit iPhone Mockups
I usually design my apps in Photoshop but I decided to check this one out. It’s great tool when you are used to design in Fireworks. All elements are vector based. Later on I’ll talk about a great Fireworks plugin which allows you to create a clickable prototype out of this one.

Digital prototyping tools for iPhone applications

Now that you’ve sketched your ideas and described/visualized your intentions you may want to feel the application or test it with real-life people. The most effective way to this is to test the application with a digital prototype (preferrably on an iPhone). There’s several powerful tools that can help you out.

Prototyping for the iPhone using Fireworks Fireworks plugin by Unitid
iPhone Fireworks Plugin Prototypes
This plugin by Unitid was developed for you to create clickable prototypes out of your Fireworks mockups. I don’t create web and mobile mockups in Fireworks but the demo they show on their website works really well on my iPhone. I’m not sure how much work it is to do the trick but it looks like a great tool to extend MetaSpark’s Fireworks toolkit.
Balsamiq online protoyping tool
Balsamiq iPhone Prototyping
Balsamiq is both available as a desktop or webbased version. The desktop version will cost you $79 dollars, which is great value-for-money when you are on the road a lot. When you work mostly in your own office and have a steady internet connection the webbased version is just fine. Balasamiq recently added simple interactions which makes it possible to test your mockups with real users. The only downside I can come up with is that you can’t draw custom widgets in the application itself.
iPlotz online protoyping tool
iPLotz iPhone Prototyping
My colleague Wopke recently recommended me to use iPlotz as an online prototyping tool. I had never heard of this tool before but it works really well. When you got used to working with Balasamiq or Protoshare already, then there’s no reason to switch, but it’s just a fine app to design you iPhone mockups since it has a whole set of iPhone widgets.

I haven’t tried to be complete here, so you may very well have additions to this. Please don’t hesitate to post the tools you use as a comment below.

8 Replies

  1. Adrienne Szewczyk

    Thanks for posting a list of prototyping resources, Henk!

    You might want to add the iPhone app, Mockup, to your list. It is an iPhone app visual prototyping tool for use on the iPhone. You can find Mockup in the App Store or watch a demo video at http://lextech.com/mockup.

    *Please note, I am a part of Lextech, the organization that created Mockup.

  2. Amir Khella

    Great list, Henk.

    I’ve been using Apple Keynote+Keynotopia to prototype iPad and iPhone apps and I highly recommend it!

  3. Ian

    Check out Fluid UI http://www.fluidui.com. A new iPhone and Android prototyping tool. It’s got iPhone and Android widget sets, image uploads, fully linked prototypes, touch gestures, animated transitions and on-device testing is a click away.

    Cheers,
    Ian

Reply