iPhone Interactive Prototype Presentation to Client

Presenting a nice working prototype?to client is much preferable than a static version of a pdf presentation. If you want to cut down your extra man hours during the development process or if you want to speed up your overall interface project, you have to create an Interactive?Prototype to your clients before proceeding into the development phase.?Today, I am gonna talk about how to create such?iPhone?interactive prototype presentation?by using Photoshop (for the Design Mockups) and Apple Keynote (for the Interactivity).

Since this is only for the Presentation, i am not going to explain ‘how to create” such interface in Photoshop than ?one of the quick process to achieve.

For this tutorial, I am taking an example of iPhone4. You can also implement the same for Android, BlackBerry or any other handsets as well.

Minimum Requirements:

1. Adobe Photoshop (To Create the Mockups)
2. Your Design Slides (in JPG to reduce your presentation file size)
3. Apple Keynote (for the Interactive Module)

Step One > Getting the Slide Images

If you are new to iPhone4 Interface design you can download the Prototype?Stencils created by TeehanLax from the website here. Create a new document for iPhone 4 and keep the settings as shown here.

You can drag and drop the elements from the iPhone4 PSD Stencils?(here only the Tab Bar Buttons) to your new page the way i have placed it. Don’t worry about the exact placement at this moment as we are just doing for practice.

I have created 5 pages for the mockups demo which we would be placing in Keynote later in this tutorial. All the 5 pages are kept in a Layer Folder called ‘Page Labels‘. Similarly I have created the 4 Tab Bar Buttons (including Default & Active mode) and kept them in a layer folder called ‘Tab Bars‘.

This is very much important as how to export such slides with active and inactive button states as shown here. if you are using photoshop then you can use the Layer Comps(what is Layer Comps) and finally export them as JPG slides.

Now we have exported the slides (total 5 for examples) and placed them in a folder. Just double-check ?the dimension of the exported jpg files before importing them into Keynote. We are now done with the Step 1.

Step Two > Putting the Interactive elements in Keynote

Open Apple Keynote (i have used Keynote 9) and do the following settings which are covered in the video.

1. Change the Document Size to iPhone 4 (969px Height x 640px Width) or if you are using for other handsets refer to it’s Display Dimension.
2. Import all the pictures as placed in the Video (i have used 5 slides for example)
3. For the Button Elements, used Keynote Shapes.
4. Use the Hyperlink panel under Inspectors to assign slide numbers to redirect.
5. Make all the buttons as Transparent (0%) after the completion of the linking process so that these keynote buttons would be invisible to client but the linking would be active.
6. Export the presentation as PDF and Test.

I have covered all the above points in this video.

??

There are so many ways to solve a problem. Similarly, there are so many ways to present such work starting from a web design mock up to mobile design. Some are comfortable working with Adobe Acrobat to assign hyperlinks where others use PowerPoint as well. No matter which tool/s you use, only your final working prototype matters to client.

Which method or technique do you use for interactive prototyping?