Make High-Fidelity iPhone App Prototypes With Demonstrate


As a Computer Science student, I have studied and successfully passed a course on Human Computer Interaction. We were taught, besides a lot of other fascinating topics, how to make good, useful prototypes for software projects. We started from simple, paper prototypes, moved on to medium fidelity prototypes made with Balsamic, and then just went on to make the real thing. Now, what Demonstrate for iOS does is allow you to import screens from your high fidelity prototype (made with your favorite desktop productivity app), link them together with ease, and use the prototype on your iPhone or iPad almost as if you’re using the actual, fully working app! More details after the jump.

Camera-roll-&-Dropbox-screen-import Demonstrate-for-iOS-add-button-hotspots

As I mentioned in the introduction, we made paper prototypes while studying Human Computer Interaction. To link them together, and to give them a nice ‘native’ app feel, I used ‘POP’ (Prototyping on Paper). The main concept behind POP is pretty much the same as Demonstrate: you add single app pages, join them together through button hotspots, and then demo the app as required.

There is, however, a fundamental difference between POP and Demonstrate: the former requires users to manually take photos of hastily put-together app drawings on paper, whereas the latter uses screens taken from a high-fidelity prototype. It’s a small difference on paper (pun intended), but it makes a big difference in how you use the app.

I was not able to take out the time to make a proper high-fidelity prototype on my Windows PC and then import it onto Demonstrate using its Dropbox integration, but I did play around with the built-in, demo “ToDo” project. It was an effortless experience to link screens with one another, to choose a transition, and to then play with the demo.

I was especially impressed with the variety of transitions available in Demonstrate. They all fit in well with the sort of transitions you regularly see on iOS, from standard sliding right, left, up or down, to flip left/right, fade, zoom in/out, and more!

Demonstrate-for-iOS-transitions Demonstrate-for-iOS-Export

Once you’re done playing around with a project, you can upload an ‘Editable’ or ‘Play Only’ version of said project to Dropbox or export it via iTunes File Sharing. Of course, you will need Demonstrate to be able to play the demo on other devices.

I am mighty impressed with Demonstrate. It takes what I loved about POP, makes some useful feature additions (Dropbox integration, bigger variety of transitions), and wraps it all up in a genuinely nice UI.

The free version of Demonstrate allows you to create one project with six screens, and upgrade to the full version for $4.99/month. Strongly recommended for all app developers and designers working with iOS.

Install Demonstrate from App Store