Mobile Wires Instruction

Walking Wireframes

Michael Jefferson michaeljefferson.net

March 27, 2008

Tutorial: creating walking wireframes

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

2

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

3

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

4

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

5

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

6

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

7

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

8

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

9

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

10

•

https://help.ubuntu.com/community/UMEGuide

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

11

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

12

create clickable image maps ‣ convert export your

calibrated wires to jpg files ‣ import to html editor like

Dreamweaver or whatever you prefer. ‣ create clickable image

map sequence by selecting the target area(s) and assigning the target url of the next screen state. ‣ just like any site, name

your start screen “index.html”

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

13

host your click-through Take the html files you have created and host them in your sites folder.

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

14

set your preferences In preferences/ sharing enable personal web sharing. Note the path in blue to the right (http://frog.frogdesign.com/ ~michael/) this is the url you will enter on your device to point to your wireframes. Note that you must be on the same wireless network (device and mac).

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

15

local network option Another option is to create a local network on your mac and give it a name. the personal site url will now be something like http://(host IP)/(network_name)/~(user)/

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

16

connect and run connect to your network with either the host URL from preferences or local network. index.html).

Nuance Presentation: Discover Phase | 10/29/07

Proprietary & Confidential

17

resources • web • iphone development tips | http://developer.apple.com/iphone/ • ubuntu documentation | https://help.ubuntu.com/community/UMEGuide • screenshot app | • shozu | http://www.shozu.com/portal/ • books

http://www.antonypranata.com/screenshot/download-screenshot-symbian-os-s60

• •

skeching user experiences, bill buxton designing for small screens

Nuance Presentation: Design Phase | 12/18/07

Proprietary & Confidential

18