in DiY, Prototyping, Tutorials, Visual Design

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).

1_Featured-iPhone-Interactive-Prototype-Presentation-to-Client-Print-Web-Interface-DiY
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

2_Mockups-iPhone-Interactive-Prototype-Presentation-to-Client-Print-Web-Interface-DiY

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.

3_New Document iPhone Interactive Prototype Presentation to Client Print Web Interface DiY
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.

4_Drag n Drop iPhone Interactive Prototype Presentation to Client Print Web Interface DiY
5_Pages iPhone Interactive Prototype Presentation to Client Print Web Interface DiY
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.

6_Pages Done iPhone Interactive Prototype Presentation to Client Print Web Interface DiY

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.

7_Export Pages iPhone Interactive Prototype Presentation to Client Print Web Interface DiY
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.

Download PSD  Download Keynote File
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?

Write a Comment

Comment

Webmentions

  • website

    … [Trackback]

    […] Find More here|Find More|Read More Infos here|There you can find 49007 more Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • tani hotel warszawa

    … [Trackback]

    […] Read More here|Read More|Find More Informations here|There you will find 3436 more Informations|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • usg szyi kraków

    … [Trackback]

    […] Read More here|Read More|Find More Infos here|Here you will find 88779 more Infos|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Kawa do biura

    … [Trackback]

    […] Find More on|Find More|Read More Infos here|Here you will find 18805 additional Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Bilskrot Göteborg Partille

    … [Trackback]

    […] Read More on|Read More|Find More Infos here|There you will find 67410 more Infos|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • agen poker

    … [Trackback]

    […] Find More here|Find More|Find More Infos here|Here you can find 45867 more Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • daftar di sini situs judi qq gabung di sini situs judi online daftar poker qq

    … [Trackback]

    […] Find More on|Find More|Find More Infos here|Here you can find 21498 additional Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Instagram statistics

    … [Trackback]

    […] Read More here|Read More|Find More Informations here|Here you can find 2503 more Informations|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Products Photographers In New Westminster

    … [Trackback]

    […] Find More here|Find More|Read More Informations here|There you can find 32703 additional Informations|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • ny dryer vent cleaning

    … [Trackback]

    […] Find More here|Find More|Find More Informations here|There you can find 36665 additional Informations|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • validated animal models

    … [Trackback]

    […] Read More here|Read More|Read More Informations here|Here you can find 54980 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • gvk biosciences

    … [Trackback]

    […] Find More on|Find More|Find More Informations here|Here you can find 64871 more Informations|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • GVK bio sciences news

    … [Trackback]

    […] Read More on|Read More|Find More Infos here|Here you can find 54730 additional Infos|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • botki z dzetami

    … [Trackback]

    […] Read More on|Read More|Read More Infos here|Here you can find 26495 additional Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • deklaracja intrastat wywóz

    … [Trackback]

    […] Find More on|Find More|Read More Informations here|There you can find 58292 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • sofy furninova

    … [Trackback]

    […] Find More on|Find More|Find More Informations here|There you can find 96463 more Informations|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Leicester

    … [Trackback]

    […] Read More on|Read More|Find More Infos here|There you can find 75974 more Infos|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • New Pokies & the best offers for online casinos in NZ

    … [Trackback]

    […] Read More here|Read More|Read More Informations here|Here you will find 88019 additional Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • cornerecho.com

    … [Trackback]

    […] Find More on|Find More|Read More Informations here|There you can find 87406 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Gvk Bio company info

    … [Trackback]

    […] Find More on|Find More|Find More Infos here|There you can find 80835 more Infos|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • unicc new domain 2019

    … [Trackback]

    […] Read More on|Read More|Find More Informations here|There you can find 97256 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • GVK BIO News

    … [Trackback]

    […] Find More on|Find More|Read More Infos here|Here you will find 24194 more Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Kanata homes

    … [Trackback]

    […] Find More here|Find More|Find More Infos here|Here you can find 28194 more Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • PK values in drugs

    … [Trackback]

    […] Find More here|Find More|Read More Infos here|There you will find 37992 more Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • web design agency peterborough

    … [Trackback]

    […] Read More on|Read More|Read More Informations here|Here you will find 11116 more Informations|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • top digital marketing agencies cambridge

    … [Trackback]

    […] Read More on|Read More|Find More Informations here|There you can find 52684 additional Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • International Moving Quotes

    … [Trackback]

    […] Read More here|Read More|Find More Informations here|Here you can find 84072 additional Informations|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • weber state student housing

    … [Trackback]

    […] Find More here|Find More|Read More Infos here|There you can find 40326 additional Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • cheap web hosting

    … [Trackback]

    […] Read More on|Read More|Find More Infos here|There you will find 6836 additional Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • Teen Chat Rooms

    … [Trackback]

    […] Find More on|Find More|Find More Informations here|There you will find 84391 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • click here

    … [Trackback]

    […] Find More here|Find More|Read More Informations here|Here you can find 15667 more Informations|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • universal home gym

    … [Trackback]

    […] Find More on|Find More|Find More Informations here|There you will find 83760 more Informations|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • video gaming news

    … [Trackback]

    […] Read More here|Read More|Find More Infos here|There you will find 45161 more Infos|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • lequipe manager

    … [Trackback]

    […] Find More here|Find More|Find More Infos here|There you can find 94646 more Infos|Infos on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • PK parameters

    … [Trackback]

    […] Read More here|Read More|Find More Informations here|Here you will find 37703 more Informations|Informations to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • horse game

    … [Trackback]

    […] Read More here|Read More|Find More Informations here|Here you will find 16560 more Informations|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • online marketing services

    … [Trackback]

    […] Find More on|Find More|Read More Infos here|Here you can find 48525 more Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • professional carpet cleaning hatfield

    … [Trackback]

    […] Find More on|Find More|Read More Infos here|There you will find 61659 more Infos|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • recommended you read

    … [Trackback]

    […] Find More here|Find More|Find More Infos here|There you will find 76412 more Infos|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • UK Chat

    … [Trackback]

    […] Find More here|Find More|Read More Informations here|Here you can find 58281 additional Informations|Informations on that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]

  • The Lost Code

    … [Trackback]

    […] Read More on|Read More|Find More Infos here|Here you can find 4721 additional Infos|Infos to that Topic: abinashmohanty.com/iphone-interactive-prototype-presentation-to-client/ […]