Rapid Prototyping Tools for iPhone and iPad UI Design
I have recently been hard at work developing my first user interface design for a universal iPhone and iPad application. With a background in graphic design and web development, I thought this would be an easy transition into the world of mobile apps. I couldn’t have been more wrong. This is honestly one of the biggest challenges of my career and the learning curve is steep. Designing and coding for a touchscreen device with limited memory and screen size requires a whole new approach and understanding of software engineering. After working through a couple of iPhone programming books, I have a new found respect for anyone who has created an app that has been deemed worthy of App Store approval.
Apple stresses the importance of app design strategies in the iOS HIG ( Human Interface Guidelines ) and makes it clear that the prototypes and iterations are an important part of the app development lifecycle. Although end users might not be aware of human interface design principles, such and touch gestures and button consistency, they can tell when apps follow them and when they don’t.
Along the way, I have found a few tools that have made it much easier for me to create rapid prototypes of the interface. These tools allow my team to conduct usability tests and make many key decisions before they are committed in code.
Here is a short list of tools that I have found to be very helpful throughout my UI design process:
Keynotopia
Keynotopia provides Apple Keynote and Microsoft Powerpoint templates that turns your presentation software into a rapid prototyping tool. It only takes a few minutes to create interactive wireframes for mobile, web, Mac and Windows. They also provide prototyping templates for Android, Blackberry, Windows Mobile, and Facebook interfaces.
Keynote Kung Fu
Keynote Kung Fu also provides wireframing tools for Keynote, but they are strictly focused on iPhone, iPad, and web. It’s only $12 too. Sorry Windows users, no dice.
Teehan & Lax’s iPhone and iPad GUI PSDs
Teehan & Lax provide a wealth of free goodies on their downloads page including hi-res PSDs for retina displays, baseline grids, and vector sketch elements. These templates have saved me several hours by providing me with almost all of the standard Apple UI Kit elements in one place. Have you ever tried to redraw an iOS interface. It’s not easy.
Invision
Invision is a new web software service that allows users to design fully interactive prototypes and collaborate with clients across the web. You can upload any type of image files, then create hotspots on top of your buttons to link the images together. It’s very easy to use and the end result really feels like a working application.
I hope this list helps you with your iOS interface design. Please comment and let me know if there are any that I left out.
