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

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

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

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

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

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

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

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

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

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

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

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

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 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

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.

Masters and dynamic panels don’t cooperate

Unfortunately masters and dynamic panels don’t always work very well together. For instance, it’s not possible to put an interaction in a master in order to change the status of a dynamic panel which is outside that master. You’ll either have to place the dynamic panel inside the master, or put the interaction in another seperate element.

I think I found a way to be able to use masters inside a widget and at least make it seem like the elements within the master affect the status of the dynamic panel.

Why would we want this?

• You can now easily maintain the hyperlinks in one place;
• change the content of the unselected tabs in one place;
• you only need to change the selected tab content manually in each layer.

Create a tab master

Begin a new master and place all the desired tabs inside it. Make sure all the tabs are in an unselected state, don’t put actions on the elements. Put a solid line on top of all the tabs. You can then close the tabs master.

Create a dynamic panel

Start a new dynamic panel and make it the size you’ll ultimately want it to be. Add as many layers to the panel as you have tabs to click on. Fill every layer with the tabs master and add the content you wish every tab to contain. Finally add an extra tab to each layer with it’s selected state (probably white). Again, don’t add any actions to those tabs. Okay, we’re done here.

• Create a master for the tabs
• Make a dynamic panel for tab content
• Add dynamic panel to a new master

Add the dynamic panel to a new master

Close all layers of the dynamic panel and start a new master. Drag the dynamic panel into this new master. Now add a box object to the master. Change it’s background color to transparent and remove the border. Put one of these transparent objects on top of each tab. Now change the onClick status of every transparent object to make the dynamic panel change to it’s corresponding tab content.

Now our dynamic tab widget is finished.