Tools for iPhone UI (user interface) design, mockups, wireframes or just a sketch
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 10th, 2009 at 6:48 pm
[…] to design and mockup applications, here’s a list of solutions for the iPhone (thanks to TechJini blog) that can also apply to […]
October 29th, 2009 at 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 at 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 at 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