Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices
Upcoming SlideShare
Loading in...5
×
 

Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices

on

  • 2,427 views

http://2013.profsoux.ru/papers/24/

http://2013.profsoux.ru/papers/24/

Statistics

Views

Total Views
2,427
Views on SlideShare
1,849
Embed Views
578

Actions

Likes
8
Downloads
97
Comments
0

3 Embeds 578

http://2013.profsoux.ru 574
http://2014.profsoux.ru 3
https://twitter.com 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices Marcio Leibovitch - Rapid Prototyping for the Web & Mobile Devices Presentation Transcript

  • Rapid Prototyping for theWeb and Mobile DevicesMarcio Leibovitch / @marciokl2013
  • About me
  • Brazilimage: ©Depositphotos/STYLEPICS
  • image: ©Depositphotos/AivolieElectronic Engineering
  • image: ©pc-museum.com1992
  • Canada
  • Yu Centrik
  • 9
  • DefinitionWhat is a prototype?
  • pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplementation and its potential, oridentification and understanding of theneeds.
  • pro•to•type |ˈprōtəˈtīp|nounmodel and preliminary implementation forthe evaluation of the design of a system, itsimplementation and its potential, oridentification and understanding of theneeds.
  • Sketch by Sangyup Lee
  • Alexander Graham Bells design sketch of thetelephone.Sketches, undated; handwritten text top and bottom ofpage, 1876.Box 273, "Subject File: The Telephone--Drawing ofthe Telephone, Bells Original"Alexander Graham Bell Family Papers, ManuscriptDivision, Library of Congress.
  • 1616Photo: Companhia da Imprensa
  • 1717
  • 1818
  • Prototypes allow you to check your assumptionsand by checking your assumptions you minimizethe risk of making mistakes when it’s too late andtoo expensive to correct them.Why do prototypes matter?
  • Is it possible to rapid prototypeany kind of product?
  • Is it possible to rapid prototypeany kind of product?
  • Rapid PrototypingOur typical projects
  • National Bank of Canada
  • a client+an idea=a challenge
  • ?Small budgetTight scheduleLimited resources
  • * Validate as we go along ** Communicate well *
  • prototypingAbstractConcrete
  • Prototyping is a way tomaterialize an idea
  • Prototyping is above all ameans of communication
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3
  • Rapid PrototypingDetails of the design process
  • INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
  • INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPESDEVELOPMENTUSER TESTSUSERRESEARCH
  • INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
  • INFORMATIONARCHITECTURE:THE FLOWSKETCHES WIREFRAMES +PROTOTYPES
  • http://static.shopify.com/s/files/1/0042/9602/files/website-stencil-template-letter.pdf?1264203576
  • Whitelines - Squaredhttp://whitelines.se
  • Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
  • Whitelines - Squaredhttp://whitelines.selWhitelines - Squaredhttp://whitelines.se
  • UI Stencilswww.uistencils.com
  • iPhone Wireframe Prototyping Padhttp://paperwireframes.comUI Stencilshttp://www.uistencils.com/products/iphone-sketch-pad
  • Modoku_iPhone_Sketch_Grid.PDFhttp://modoku.com/resources.html
  • http://www.erikloehfelm.com/iphone_sketches/iphone_sketchboard.pdfhttp://interactivelogic.net/wp/2009/09/iphone-wireframe-templates/
  • http://gliderguns.files.wordpress.com/2010/01/android_wireframe_templates3.pdf
  • http://blog.merrycode.com/windows-phone-7-ux-sketch-templates/
  • INFORMATIONARCHITECTURE:THE FLOWSKETCHESWIREFRAMES +PROTOTYPES
  • Wireframes + Prototypes
  • Wireframes +PrototypesHow do we choose the right tool for the job?IMOCKUPS
  • • Web app?• Desktop app?• Mobile app?• Full-featured?• Hotspot only?• Lots of questions... the key is answering the right onesWireframes +PrototypesHow do we choose the right tool for the job?
  • • 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 +PrototypesHow do we choose the right tool for the job?
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Choose a tool and then:SHAREPROTOTYPE4
  • STANDARD UI ELEMENTSLoadlibraries
  • http://www.matcheck.cz/androidguipsd/
  • http://graffletopia.com/stencils/689
  • http://www.teehanlax.com/blog/2010/08/12/iphone-4-gui-psd-retina-display/
  • http://mockupsgallery.com/updated-iphone-stencil
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3
  • Keynote / PowerPointWireframes + Prototypes
  • Keynote / PowerpointWireframes + Prototypes
  • Keynote / PowerpointWireframes + Prototypes
  • 12Keynote / PowerpointWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Keynote / Powerpoint:SHAREPROTOTYPE4
  • http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
  • http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes
  • http://keynotopia.com/Keynotopia$97 bundle, single userKeynote / Powerpoint: Load librariesWireframes + Prototypes• Android• BlackBerry• Facebook• iPad• iPhone• Twitter Bootstrap• OS X• Web• Windows Phone• Windows 7, 8• Microsoft Office
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • Keynote / Powerpoint: Build wireframesWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  • Remember the flow?Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Define your scenarioKeynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Keynote / Powerpoint: Add interactivityWireframes + Prototypes
  • Test your prototype......and adjust, if neededKeynote / Powerpoint: Add interactivityWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Keynote / Powerpoint:
  • Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  • Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  • Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  • Keynote / Powerpoint: Share prototypeWireframes + PrototypesRecommended software fortesting PDF prototypesAdobe Acrobat ReaderFor PCsGood ReaderFor iOSezPDFFor Android
  • Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  • Keynote / Powerpoint: Share prototypeWireframes + Prototypes
  • 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 reliablePROS AND CONSKeynote / PowerpointWireframes + Prototypes
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔
  • AXURE RP PROWireframes + PrototypesRAPID PROTOTYPING
  • Axure RP ProWireframes + Prototypes
  • 12345Axure RP ProWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  • Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.totalwireframes.com
  • Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axureland.com
  • Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
  • Axure RP Pro: Load librariesWireframes + Prototypeshttp://www.axure.com/download-widget-libraries
  • orAxure RP Pro: Load librariesWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  • Axure RP Pro: Build wireframesWireframes + Prototypes
  • Axure RP Pro: Build wireframesWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • Axure RP Pro: Add interactivityWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3SHAREPROTOTYPE4Axure RP Pro:
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • URLhttp://share.axure.com/XXXXXXXX/name_of_the_pageAxure RP Pro: Share prototypeWireframes + Prototypes
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • Axure RP Pro: Share prototypeWireframes + Prototypes
  • Dynamic Panels = Advanced Interaction(Drag and Drop, Swipes, Animations,...)Axure RP ProWireframes + Prototypes
  • 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 toolsPROS AND CONSAxure RP ProWireframes + Prototypes
  • Give it a try
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔
  • Moving from design to codeis a risky stage in a project.Lots of small but importantdetails can be lost...
  • If we want to communicateevent better yet withprogrammers and save evenmore time, why not givethem some real code to getstarted?
  • Some examples...http://twitter.github.io/bootstrap/http://foundation.zurb.com
  • Some examples...http://www.divshot.comhttp://getwirefy.com
  • Some examples...http://maker.github.io/ratchet/http://interface2.lesscode.co.nzhttp://dapp.kerofrog.com.au
  • Some examples...http://appinventor.mit.eduMIT App Inventor
  • Interface 2Wireframes + Prototypes
  • Interface 2Wireframes + Prototypes
  • Interface 2Wireframes + Prototypes
  • Interface 2Wireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  • Interface 2: Load librariesWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  • Interface 2: Build wireframesWireframes + Prototypes
  • Interface 2: Build wireframesWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  • Interface 2: Add interactivityWireframes + Prototypes
  • LOADLIBRARIES1BUILDWIREFRAMES2ADDINTERACTIVITY3Interface 2:SHAREPROTOTYPE4
  • Interface 2: Share prototypeWireframes + Prototypes
  • Interface 2: Share prototypeWireframes + Prototypes
  • PROS• Cheap• No need to use a PC• Exports native code saving app development time• Prototypes look like real iPhone appsCONS• Harder to manipulate, longer prototyping time• Limited control on some of UI objects• iOS onlyPROS AND CONSInterface 2Wireframes + Prototypes
  • If you have some HTML/CSS skills...
  • Try
  • Highly recommended
  • Validate our design decisions(usability, mental model)Give clear specificationsto developersValidate the client’s idea(did we get it right?)PROTOTYPE #1PROTOTYPE #2PROTOTYPE #3✔✔✔
  • The importance of prototyping
  • Prototyping is important,no matter the platform(web, mobile, TV, etc.)
  • • Prototyping allows you to communicate better• Prototyping saves you money (development, marketing, etc.)• Rapid prototyping helps you be part of an agile environmentThe importance of prototyping
  • • Mobile phones with touch screens are still a new platformcompared to the web• Mobile apps are even younger• Developing and deploying mobile apps is more complex thanweb sites and web apps, thus more costly• App weaknesses are exposed very quickly through the AppStore and Google Play review systemsWhy is it even more important torapid prototype mobile apps?
  • Better design, better software, less time, less moneySmartphone by Nathan Grealish, tablet by Luis Prado and computer from the Noun ProjectRapidPrototyping
  • Marcio Leibovitchспасибо!@marcioklmarciokl@gmail.com2013
  • Questions?