Prototyping is an essential step in the development of any application. It provides a clear form of communication between stakeholders regarding what the final result should look like and how it should function, and this can be achieved early on in the project before any code is written. 37Signals advocates going really fidelity using a Sharpie, which I’ve used in addition to more specialized tools such as Lucidchart or Balsamiq Mockups.
Finding The Right Prototyping Tool
Recently I began working on a project to build an iPhone application, and we wanted to create some detailed prototypes right from the start. This presented a challenge especially because we did not have a Mac available, and iPhone prototyping tools can be difficult to find. I tried Lucidchart which is great for diagramming and website mock ups, but it quickly proved inadequate for this task, lacking several basic iOS UI elements. Ultimately I decided upon Blueprint for iPad. At $14.99 it isn’t cheap as far as apps go, but it’s more than worth the cost given the unlimited flexibility it offers. You can create multiple screens using virtually any iOS UI element available, and on top of that you can make the screens interactive. There is a demo mode where you can tap on buttons just as though it’s a real application which is very impressive, especially given how easy it is to create the screens.
Blueprint offers three ways to export your screens. You can export a Blueprint file which can be read on the free Blueprint Reader. I tried this, but one person I sent it to wasn’t able to open my file, but unless you have every UI interaction nailed down and the other person has an iPad, that format isn’t all that useful. Fortunately you can also export to a single PDF file or a ZIP file containing PNG formatted images of each screen.
Recording Demos
Since we are a distributed team working with remote vendors and given the complexity of the app we’re developing, I wanted to provide more than static screen images. So I set out to record video demos showing the screens and the interactions I had built into Blueprint. There were a few challenges to get the video working just right, but I came up with an improvised solution that worked pretty well. Following are the different elements that went into creating my setup, and I’ve posted a photo at the bottom of this post.
Camera: I first tried recording with a Kodak Zi8 HD Pocket Video camera, but the text on the screen came out fuzzy. Next I tried my Logitech C910 HD webcam, and it worked very well. Getting the angle right was a bit tricky, and the camera had to be mounted directly above the iPad for the best results. There are a number of ways you could do this, but for me being a percussionist I had a cymbal stand with a boom that worked very well.
Lighting: Dealing with lighting was the biggest challenge. Mostly, I had to remove all sources of light except for the iPad itself to avoid glare. My office has a window with closed blinds, but I ended up hanging a blanket over it to cut out any natural light. I used a simple piece of cardboard to block light coming from one of my monitors and simply turned off the other. My webcam has nice lights on it that indicate when it’s on, but they were also causing glare…some masking tape fixed that. The only downside is when I used my fingers to tap on the screen, they were dark, but this was acceptable in my situation.
Physical Setup: As previously mentioned, I used a cymbal stand with a boom to mount my webcam. It’s not the most elegant solution, but it worked. I sat the iPad on my desk and positioned the camera so that it showed just the relevant portion of the screen. I then used simple post-it notes to indicate where on the desk I need to position the iPad to have properly centered video for both portrait and landscape orientations.
Audio: Good audio is very important to any demo. I chose to use my Plantronics .Audio 995 wireless headset which produced decent audio quality.
Video Capture: I first attempted to capture the video using Windows Live Movie Maker, but the result was very choppy. I then downloaded AVS Video Recorder (I own an unlimited license for all AVS products, and I highly recommend them) which worked perfectly. There was a slight delay between what I was doing and the preview video, but the output video was perfect. I then used AVS Video Converter to convert the resultant video file to a format that was accessible to those to whom I would be sending it to.
