iPhone UI Mockups
Posted by admin under iPhone Development on Monday Jan 18, 2010When I was developing small business Windows based applications I would always use Visio to create mockups of the GUI before I ever started development. This came in very handy as 1) I could give the client a graphical representation of what I was going to develop and 2) I could visually break down the components of an application from the user’s perspective. Then I started developing for the iPhone.
Seeing as the iPhone is such a new technology, there for a while, there were no professional iPhone UI mockup applications other than the trusty pencil and paper or marker and white board. Now there are tools beginning to emerge. Many of these tools have been created by other iPhone developers who also recognized the need.
Several of these tools are simply template packs for such graphics programs as Photoshop and Fireworks. The main problem for people such as myself is that I am first and foremost a programmer, not a designer. My graphics program in Windows was Paint. Programs like Photoshop give my atrophied right brain an aneurism. I have even seen a template pack for Visio, however it is nothing more that a few pictures of the most common controls and can not help a development shop handle the wide assortment of apps they will produce. The other advantage is the price tag of the template packs, free. Most of you will agree, free is a very good price.
On the other end of the spectrum you have some amazing applications like iRise and their iPhone add on. This application not only helps you create a UI but also helps you create an activity diagram. When you run the program you can simulate how the iPhone application will be used with dynamic content and buttons that will actually take you to the appropriate next screen. This application also has a viewer making it easy to send your mockup to your client so they can interact with the application much like they will with the finished product. The major downfall of this application is the price tag. Starting at $6,995 for the professional edition, most bootstrapped iPhone development firms simply can not afford to throw money like that at their mockup application.
The other day I was bound and determined to find a happy medium. I dug into trusty old Google and stumbled across an interesting application called MockApp. This is another free template pack, however it is for Keynote and Powerpoint and it has a wide assortment of iPhone controls for you to use when creating your mockups. Also, through the use of hyperlinks in Keynote, you can also make the slide show behave similar to an iPhone application. Then when you have finished creating your slide show you can then send the slide show to your client for approval, if they have Keynote or Powerpoint. If the client does not have Keynote or Powerpoint you can also export the slide show to a Quicktime movie with the hyperlinks imbedded so the client can still interact with the mockup. The MockApp template pack also includes a template designed for viewing from an iPhone. The idea is that you export to a PDF document, then using such PDF viewer apps as GoodReader Lite you can then view the mockups in their proper environment. I am hoping to soon figure out a way to view the slide show or quicktime movie with hyperlinks from my iPhone (perhaps with on of the many Keynote apps).
If all that wasn’t enough, since MockApp runs on Keynote and Powerpoint, most people have used one of these before and currently have one on their Mac or PC. So you do not have to be a programmer or a graphic designer to put together a functional mockup of your iPhone application. So if you are currently kicking around an idea for iPhone application of your own or have begun developing iPhone applications for others, I highly recommend looking into MockApp.
- Troy
