We tried several tools and methods for user interface designing of iPhone applications. We now use a combination of these tools and our choice depends on what best suits the product as well as the customer. The key point is communicating the design clearly to both the customer and developers.
Before going into details, let me just list the iPhone design and mockup (wireframe) tools/methods in no particular order:
- Use Interface Builder (Mac only)
- Use Balsamiq mockup tool (Mac, windows, linux) – http://www.balsamiq.com (http://www.balsamiq.com/blog/2009/03/01/iphone-controls-new-icons-and-much-more/)
- Use Omnigraffle (Mac only) and import an iPhone stencil – (http://www.omnigroup.com/applications/omnigraffle/download/ and http://www.graffletopia.com/search/iphone)
- Use paper and a stencil- http://www.designcommission.com/shop/iphone-stencil-kit/
- Use a pre-printed sketch paper – http://labs.boulevart.be/index.php/2008/06/05/sketch-paper-for-the-mobile-designer/
- Use photoshop and the iPhone PSD – http://www.teehanlax.com/blog/?p=1628
- Use Adobe Fireworks – http://blogs.adobe.com/fireworks/2008/08/iphone_gui_as_adobe_fireworks.html and http://www.building43.com/videos/2009/06/23/mockup-iphone-app-adobe-fireworks/
- Although not there yet, you can try http://iphonemockup.lkmc.ch/
- Use the stencil kit from Yahoo! which is available in a variety of formats – http://developer.yahoo.com/ypatterns/wireframes/
- Use the sketchbook available at http://www.mobilesketchbook.com/
Some bonus stuff
- For some great tips on designing iPhone apps, you can read http://www.mobileorchard.com/7-iphone-ui-user-interface-design-resources/
- A PSD for creating iPhone line icons http://www.keepthewebweird.com/iphone-icon-psd-template/
- Icons for tabbar and toolbar http://www.glyphish.com/ and http://eddit.com/shop/iphone_ui_icon_set/
Lazy as I am, I decided to write details about each iPhone UI design tool later, so till then please use the list above and explore them.
If I missed your favorite tool, please let me know in comments and I will gladly add it here.
October 29th, 2009 on 7:50 AM
One more: Mockapp templates for Keynote and Powerpoint.
Probably the largest iPhone UI library available and also the most accessible software: everyone knows Keynote or Powerpoint. Free download at http://mockapp.com/download
February 12th, 2010 on 9:50 PM
Hey, don’t forget the humble Moleskine sketchbook as a great tool for sketching ideas down quickly. And if you own an iPhone UI Stencil it fits really well within the gridded sketchbook. Check out my blog post on the subject : http://blog.lyraspace.com/2010/02/12/using-your-moleskine-for-iphone-ui-design/
February 20th, 2010 on 4:29 PM
[StencilsApp][1] is an iPhone app for creating mockups. You can even create transitions and triggers between screens using gestures and actions in a multi screen mockup. Its got all iPhone UI elements, a large icon library and great 2D drawing tools. Its free to download.
[1]: http://www.stencilsapp.com
April 19th, 2010 on 11:18 AM
WireframeSketcher is a wireframe/mockup tool that comes with an iPhone stencil: http://mockupsgallery.com/iphone-stencil-17
December 30th, 2010 on 7:41 AM
“Blueprint” is an UI Design app for iPad. It is really awesome.
March 21st, 2011 on 11:06 AM
Another one to add to the list is http://www.lucidchart.com where I’ve done a couple quick mockups. Amazing how much easier it is now than a couple years ago!
September 3rd, 2011 on 11:07 PM
Blueprint – try it – it’s simply the best one out there.
November 5th, 2011 on 6:00 AM
Just started reading your blog a few days ago; and I’m loving your newest series. Looking forward to the next installments.
December 9th, 2011 on 8:35 PM
Your blog is really cool to me and your topics are very relevant. I was browsing around and came across something you might find interesting. I was guilty of 3 of them with my sites. “99% of site managers are guilty of these 5 mistakes”. http://bit.ly/tBfFqz You will be suprised how fast they are to fix.
December 30th, 2011 on 8:03 PM
I?ll right away grasp your rss as I can not find your e-mail subscription hyperlink or e-newsletter service. Do you have any? Please permit me know so that I may subscribe. Thanks.
January 25th, 2012 on 8:28 PM
We have recently launched our iPhone mockup toolkit. It has some really cool features including easy editing, fully customizable objects, self styling and much more. It has some very comprehensive tools to make it as realistic as possible. Check out our blog post about the iPhone Mockup Toolkit. If you like what you see please consider adding us to the list.