marcio leibovitch - rapid prototyping for the web & mobile devices
DESCRIPTION
http://2013.profsoux.ru/papers/24/TRANSCRIPT
![Page 1: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/1.jpg)
Rapid Prototyping for the Web and Mobile DevicesMarcio Leibovitch / @marciokl2013
![Page 2: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/2.jpg)
About me
![Page 3: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/3.jpg)
Brazil
image: ©Depositphotos/STYLEPICS
![Page 4: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/4.jpg)
image: ©Depositphotos/Aivolie
Electronic Engineering
![Page 5: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/5.jpg)
image: ©pc-museum.com
1992
![Page 6: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/6.jpg)
![Page 7: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/7.jpg)
Canada
![Page 8: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/8.jpg)
Yu Centrik
![Page 9: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/9.jpg)
9
![Page 10: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/10.jpg)
Definition
What is a prototype?
![Page 11: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/11.jpg)
pro•to•type |ˈprōtəˌtīp|nounmodel and preliminary implementation for the evaluation of the design of a system, its implementation and its potential, or identification and understanding of the needs.
![Page 12: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/12.jpg)
pro•to•type |ˈprōtəˌtīp|nounmodel and preliminary implementation for the evaluation of the design of a system, its implementation and its potential, or identification and understanding of the needs.
![Page 13: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/13.jpg)
Sketch by Sangyup Lee
THIS IS NOT A PROTOTYPE
![Page 14: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/14.jpg)
Alexander Graham Bell's design sketch of the telephone.Sketches, undated; handwritten text top and bottom of page, 1876.Box 273, "Subject File: The Telephone--Drawing of the Telephone, Bell's Original"Alexander Graham Bell Family Papers, Manuscript Division, Library of Congress.
THIS IS NOT A PROTOTYPE
![Page 15: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/15.jpg)
THIS IS NOT A PROTOTYPE
![Page 16: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/16.jpg)
1616Photo: Companhia da Imprensa
THIS IS A PROTOTYPE
![Page 17: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/17.jpg)
1717
THIS IS A PROTOTYPE
![Page 18: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/18.jpg)
1818
THIS IS A PROTOTYPE
![Page 19: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/19.jpg)
Prototypes allow you to check your assumptions and by checking your assumptions you minimize the risk of making mistakes when it’s too late and too expensive to correct them.
Why do prototypes matter?
![Page 20: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/20.jpg)
Is it possible to rapid prototype any kind of product?
![Page 21: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/21.jpg)
Is it possible to rapid prototype any kind of product?
![Page 22: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/22.jpg)
![Page 23: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/23.jpg)
![Page 24: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/24.jpg)
Rapid Prototyping
Our typical projects
![Page 25: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/25.jpg)
National Bank of Canada
![Page 26: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/26.jpg)
a client +
an idea=
a challenge
![Page 27: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/27.jpg)
?Small budgetTight scheduleLimited resources
![Page 28: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/28.jpg)
* Validate as we go along *
* Communicate well *
![Page 29: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/29.jpg)
prototyping
Abstract
Concrete
![Page 30: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/30.jpg)
Prototyping is a way to materialize an idea
![Page 31: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/31.jpg)
Prototyping is above all a means of communication
![Page 32: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/32.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
![Page 33: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/33.jpg)
Rapid Prototyping
Details of the design process
![Page 34: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/34.jpg)
INFORMATION ARCHITECTURE:
THE FLOWSKETCHES
WIREFRAMES + PROTOTYPES
DEVELOPMENT
USER TESTS
US
ER
RE
SE
AR
CH
![Page 35: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/35.jpg)
INFORMATION ARCHITECTURE:
THE FLOWSKETCHES
WIREFRAMES + PROTOTYPES
DEVELOPMENT
USER TESTS
US
ER
RE
SE
AR
CH
![Page 36: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/36.jpg)
INFORMATION ARCHITECTURE:
THE FLOWSKETCHES WIREFRAMES +
PROTOTYPES
![Page 37: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/37.jpg)
INFORMATION ARCHITECTURE:
THE FLOW
SKETCHES WIREFRAMES + PROTOTYPES
![Page 38: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/38.jpg)
http://static.shopify.com/s/files/1/0042/9602/files/website-stencil-template-letter.pdf?1264203576
![Page 39: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/39.jpg)
![Page 40: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/40.jpg)
Whitelines - Squaredhttp://whitelines.se
![Page 41: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/41.jpg)
Whitelines - Squaredhttp://whitelines.sel
Whitelines - Squaredhttp://whitelines.se
![Page 42: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/42.jpg)
Whitelines - Squaredhttp://whitelines.sel
Whitelines - Squaredhttp://whitelines.se
![Page 43: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/43.jpg)
UI Stencilswww.uistencils.com
![Page 44: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/44.jpg)
iPhone Wireframe Prototyping Padhttp://paperwireframes.com
UI Stencilshttp://www.uistencils.com/products/iphone-sketch-pad
![Page 46: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/46.jpg)
http://www.erikloehfelm.com/iphone_sketches/iphone_sketchboard.pdf
http://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
![Page 47: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/47.jpg)
http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
![Page 48: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/48.jpg)
http://blog.merrycode.com/windows-phone-7-ux-sketch-templates/
![Page 49: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/49.jpg)
INFORMATION ARCHITECTURE:
THE FLOWSKETCHES
WIREFRAMES + PROTOTYPES
![Page 50: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/50.jpg)
Wireframes + Prototypes
![Page 51: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/51.jpg)
Wireframes + Prototypes
How do we choose the right tool for the job?
IMOCKUPS
![Page 52: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/52.jpg)
• Web app?
• Desktop app?
• Mobile app?
• Full-featured?
• Hotspot only?
• Lots of questions... the key is answering the right ones
Wireframes + Prototypes
How do we choose the right tool for the job?
![Page 53: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/53.jpg)
• What’s the goal of the prototype?
• Who’s the audience?
• What level of fidelity do you need?
• How will you distribute the prototype?
• What level of prototyping collaboration do you need?
• How will you get feedback from users?
• How familiar are you with the tool?
• How much does it cost?
• How many people are using it?
• What are the chances that it will stay on the market for a longtime?
• Can you use it in your organization?
Wireframes + Prototypes
How do we choose the right tool for the job?
![Page 54: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/54.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Choose a tool and then:
SHAREPROTOTYPE4
![Page 55: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/55.jpg)
STANDARD UI ELEMENTS
Load libraries
![Page 56: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/56.jpg)
http://www.matcheck.cz/androidguipsd/
![Page 58: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/58.jpg)
http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
![Page 59: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/59.jpg)
![Page 60: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/60.jpg)
![Page 61: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/61.jpg)
http://mockupsgallery.com/updated-iphone-stencil
![Page 62: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/62.jpg)
![Page 63: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/63.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
![Page 64: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/64.jpg)
![Page 65: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/65.jpg)
Keynote / PowerPointWireframes + Prototypes
![Page 66: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/66.jpg)
Keynote / PowerpointWireframes + Prototypes
![Page 67: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/67.jpg)
Keynote / PowerpointWireframes + Prototypes
![Page 68: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/68.jpg)
1
2
Keynote / PowerpointWireframes + Prototypes
![Page 69: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/69.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Keynote / Powerpoint:
SHAREPROTOTYPE4
![Page 70: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/70.jpg)
http://keynotopia.com/
Keynotopia$97 bundle, single user
Keynote / Powerpoint: Load librariesWireframes + Prototypes
![Page 71: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/71.jpg)
http://keynotopia.com/
Keynotopia$97 bundle, single user
Keynote / Powerpoint: Load librariesWireframes + Prototypes
![Page 72: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/72.jpg)
http://keynotopia.com/
Keynotopia$97 bundle, single user
Keynote / Powerpoint: Load librariesWireframes + Prototypes
• Android• BlackBerry• Facebook• iPad• iPhone• Twitter Bootstrap• OS X• Web• Windows Phone• Windows 7, 8• Microsoft Office
{
![Page 73: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/73.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Keynote / Powerpoint:
![Page 74: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/74.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 75: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/75.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 76: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/76.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 77: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/77.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 78: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/78.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 79: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/79.jpg)
Keynote / Powerpoint: Build wireframesWireframes + Prototypes
![Page 80: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/80.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Keynote / Powerpoint:
![Page 81: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/81.jpg)
Remember the flow?
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 82: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/82.jpg)
Define your scenario
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 83: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/83.jpg)
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 84: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/84.jpg)
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 85: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/85.jpg)
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 86: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/86.jpg)
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 87: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/87.jpg)
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 88: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/88.jpg)
Test your prototype......and adjust, if needed
Keynote / Powerpoint: Add interactivityWireframes + Prototypes
![Page 89: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/89.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Keynote / Powerpoint:
![Page 90: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/90.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
![Page 91: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/91.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
![Page 92: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/92.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
![Page 93: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/93.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
Recommended software for testing PDF prototypes
Adobe Acrobat ReaderFor PCs
Good ReaderFor iOS
ezPDFFor Android
![Page 94: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/94.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
![Page 95: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/95.jpg)
Keynote / Powerpoint: Share prototypeWireframes + Prototypes
![Page 96: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/96.jpg)
PROS • Very easy to learn• Cheap (Keynote)• Everyone has it (PowerPoint)
CONS• Harder to distribute mobile compatible versions• Limited interactivity• Keynote is Mac only, PowerPoint for Mac is not reliable
PROS AND CONS
Keynote / PowerpointWireframes + Prototypes
![Page 97: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/97.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
✔
![Page 98: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/98.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
✔
![Page 99: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/99.jpg)
AXURE RP PROWireframes + Prototypes
RAPID PROTOTYPING
![Page 100: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/100.jpg)
Axure RP ProWireframes + Prototypes
![Page 101: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/101.jpg)
1
2
3
4
5
Axure RP ProWireframes + Prototypes
![Page 102: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/102.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Axure RP Pro:
![Page 103: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/103.jpg)
Axure RP Pro: Load librariesWireframes + Prototypes
http://www.totalwireframes.com
![Page 104: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/104.jpg)
Axure RP Pro: Load librariesWireframes + Prototypes
http://www.axureland.com
![Page 105: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/105.jpg)
Axure RP Pro: Load librariesWireframes + Prototypes
http://www.axure.com/download-widget-libraries
![Page 106: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/106.jpg)
Axure RP Pro: Load librariesWireframes + Prototypes
http://www.axure.com/download-widget-libraries
![Page 107: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/107.jpg)
or
Axure RP Pro: Load librariesWireframes + Prototypes
![Page 108: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/108.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Axure RP Pro:
![Page 109: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/109.jpg)
Axure RP Pro: Build wireframesWireframes + Prototypes
![Page 110: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/110.jpg)
Axure RP Pro: Build wireframesWireframes + Prototypes
![Page 111: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/111.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Axure RP Pro:
![Page 112: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/112.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 113: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/113.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 114: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/114.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 115: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/115.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 116: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/116.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 117: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/117.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 118: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/118.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 119: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/119.jpg)
Axure RP Pro: Add interactivityWireframes + Prototypes
![Page 120: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/120.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
SHAREPROTOTYPE4
Axure RP Pro:
![Page 121: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/121.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 122: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/122.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 123: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/123.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 124: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/124.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 125: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/125.jpg)
URL
http://share.axure.com/XXXXXXXX/name_of_the_page
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 126: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/126.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 127: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/127.jpg)
Axure RP Pro: Share prototypeWireframes + Prototypes
![Page 128: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/128.jpg)
Dynamic Panels = Advanced Interaction(Drag and Drop, Swipes, Animations,...)
Axure RP ProWireframes + Prototypes
![Page 129: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/129.jpg)
PROS
• Easy to learn• Capable of producing very low to very high fidelity prototypes• Easy distribution, allow testing in real usage context• Good development collaboration via shared projects• Good feedback tools via AxShare• Mac and PC compatible• Lot of people using it!
CONS More expensive than other tools
PROS AND CONS
Axure RP ProWireframes + Prototypes
![Page 130: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/130.jpg)
Give it a try
![Page 131: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/131.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
✔
✔
![Page 132: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/132.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
✔
✔
![Page 133: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/133.jpg)
Moving from design to code is a risky stage in a project. Lots of small but important details can be lost...
![Page 134: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/134.jpg)
If we want to communicate event better yet with programmers and save even more time, why not give them some real code to get started?
![Page 135: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/135.jpg)
Some examples...
http://twitter.github.io/bootstrap/
http://foundation.zurb.com
http://foundation.zurb.com
![Page 136: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/136.jpg)
Some examples...
http://www.divshot.com
http://getwirefy.com
![Page 137: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/137.jpg)
Some examples...
http://maker.github.io/ratchet/http://interface2.lesscode.co.nz
http://dapp.kerofrog.com.au
![Page 138: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/138.jpg)
Some examples...
http://appinventor.mit.edu
MIT App Inventor
![Page 139: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/139.jpg)
Interface 2Wireframes + Prototypes
![Page 140: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/140.jpg)
Interface 2Wireframes + Prototypes
![Page 141: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/141.jpg)
Interface 2Wireframes + Prototypes
![Page 142: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/142.jpg)
Interface 2Wireframes + Prototypes
![Page 143: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/143.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Interface 2:
SHAREPROTOTYPE4
![Page 144: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/144.jpg)
Interface 2: Load librariesWireframes + Prototypes
![Page 145: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/145.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Interface 2:
SHAREPROTOTYPE4
![Page 146: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/146.jpg)
Interface 2: Build wireframesWireframes + Prototypes
![Page 147: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/147.jpg)
Interface 2: Build wireframesWireframes + Prototypes
![Page 148: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/148.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Interface 2:
SHAREPROTOTYPE4
![Page 149: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/149.jpg)
Interface 2: Add interactivityWireframes + Prototypes
![Page 150: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/150.jpg)
LOAD LIBRARIES1
BUILD WIREFRAMES2
ADD INTERACTIVITY3
Interface 2:
SHAREPROTOTYPE4
![Page 151: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/151.jpg)
Interface 2: Share prototypeWireframes + Prototypes
![Page 152: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/152.jpg)
Interface 2: Share prototypeWireframes + Prototypes
![Page 153: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/153.jpg)
PROS
• Cheap• No need to use a PC• Exports native code saving app development time• Prototypes look like real iPhone apps
CONS• Harder to manipulate, longer prototyping time• Limited control on some of UI objects• iOS only
PROS AND CONS
Interface 2Wireframes + Prototypes
![Page 154: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/154.jpg)
If you have some HTML/CSS skills...
![Page 155: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/155.jpg)
Try
![Page 156: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/156.jpg)
Highly recommended
![Page 157: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/157.jpg)
![Page 158: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/158.jpg)
Validate our design decisions(usability, mental model)
Give clear specifications to developers
Validate the client’s idea(did we get it right?)PROTOTYPE #1
PROTOTYPE #2
PROTOTYPE #3
✔
✔
✔
![Page 159: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/159.jpg)
The importance of prototyping
![Page 160: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/160.jpg)
Prototyping is important, no matter the platform (web, mobile, TV, etc.)
![Page 161: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/161.jpg)
• Prototyping allows you to communicate better
• Prototyping saves you money (development, marketing, etc.)
• Rapid prototyping helps you be part of an agile environment
The importance of prototyping
![Page 162: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/162.jpg)
• Mobile phones with touch screens are still a new platform compared to the web
• Mobile apps are even younger
• Developing and deploying mobile apps is more complex than web sites and web apps, thus more costly
• App weaknesses are exposed very quickly through the App Store and Google Play review systems
Why is it even more important to rapid prototype mobile apps?
![Page 163: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/163.jpg)
Better design, better software, less time, less money
Smartphone by Nathan Grealish, tablet by Luis Prado and computer from the Noun Project
Rapid Prototyping
![Page 165: Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices](https://reader030.vdocuments.net/reader030/viewer/2022012903/54c716a44a7959090e8b459d/html5/thumbnails/165.jpg)
Questions?