Codeless Prototyping for Web and Mobile Apps

3,391 views

Published on

Learn what it takes to create a working prototype for a web or mobile app without having to code at all. Maggie Steciuk, UI designer at Terrible Labs in Boston covers the process and all the tools you need to design your prototype. Learn more from the experts by visiting http://intelligent.ly/learn

Published in: Design, Technology

Codeless Prototyping for Web and Mobile Apps

  1. 1. MaggieSteciuk DESIGNER, TERRIBLE LABS @MSTECIUK Prototypeyourwaytobeerproducts.
  2. 2. Agenda •Beyond“failingcheaply”,orwhyprototypingreallymaers •Fidelityisoverrated •Toolsthatwork(hands-ondemos) •Casestudy •Sketch,buildandshareprototypes. •pbon.es/proto
  3. 3. Ideas ProductData Build Measure Learn THELEANSTARTUPPROCESS
  4. 4. Ideas ProductData Build Measure Learn
  5. 5. PROTOTYPING PROCESS
  6. 6. PROTOTYPING PROCESS: Plan Build Measure Learn
  7. 7. NumberofTestUsers UsabilityProblemsFound 0 3 6 9 12 15 0% 25% 50% 75% 100% Jakob Nielsen:“WhyYouOnlyNeedtoTestwith5Users”
  8. 8. From:AnonymousUser Ididn’tgetit. What’sthe pointofthisappagain? Icouldn’tfigureitout. WHAT AN IDIOT
  9. 9. ? ??
  10. 10. Quality vs.Quantity
  11. 11. Quantity:
  12. 12. Quality:
  13. 13. Wecan’t THINKourwaytosolutions.
  14. 14. Wehaveto DISCOVERourwaytosolutions.
  15. 15. “You’redoingitwrong.” - MY INNER VOICE
  16. 16. Noperfect,magicalprocess
  17. 17. Communication Gooddesignprocess isabout
  18. 18. “Chair” Communication
  19. 19. “Oh,Igetit!” Peopleunderstand whattheycansee.
  20. 20. Words+Imagesare morememorablethanwordsalone.
  21. 21. Prototypeshelpus communicate. “...andhere’swhat Ithink...”
  22. 22. Ourclientslikeprototypes,too
  23. 23. Communicate & Prototypeshelpus: Understand
  24. 24. So,what’sthebest prototyping tool?
  25. 25. PEN&PAPER INVISION FLINTO KEYNOTEor POWERPOINT PROTO.IO XCODE QUARTZ COMPOSER APPCOOKER FIREWORKS+TAP BALSAMIQ BRIEFSPOPAPP AXUREVARIOUS FRAMEWORKS FRAMER REFINE.IO
  26. 26. QUALITY OF Interactivity Choosethebesttoolforthejob EASEOF Distribution LEARNABILITY & Familiarity IMPORTANCEOF Collaboration
  27. 27. Experiment
  28. 28. Fast&Easy
  29. 29. Pen&Paper
  30. 30. BETTERIDEAS NEEDMOREIDEAS Sketching
  31. 31. Yourfirstideamaynotbeyourbest
  32. 32. Yourfirstideamaynotbeyourbest
  33. 33. BETTERIDEAS NEEDMOREIDEAS FOCUS THECONVERSATION, Sketching
  34. 34. Howdonesomethinglooks ≈ howdonesomethingis
  35. 35. Fidelityisoverrated
  36. 36. Notes: ______________________________ _______________ _______________ _______________ _______________ _______________ _______________ ______________________________ _______________ _______________ _______________ Mobile: width 320px cols 60px gutters 16px fold 480px rows 16px Tablet: width 768px cols 48px gutters 16px fold 1024px rows 16px Wireframe Sheet: Tablet & Mobile (Portrait) Title/Version: Date:
  37. 37. BETTERIDEAS NEEDMOREIDEAS FOCUS THECONVERSATION, INTERACTIVITY IN5MINUTESFLAT Sketching
  38. 38. Almostmagic
  39. 39. BETTERIDEAS NEEDMOREIDEAS FOCUSED REVIEWMEETINGS INTERACTIVITY IN5MINUTESFLAT VALIDATE EVENEARLIER Sketching
  40. 40. Don’ttakemywordforit: cl.ly/QPlW
  41. 41. GeingStarted
  42. 42. WhatamItryingtolearn/figureout?
  43. 43. TicketZen
  44. 44. TicketZen
  45. 45. TicketZen
  46. 46. Howcanweimprovethis?
  47. 47. Beginwiththeflow
  48. 48. Getaticket OpenApp Scanticket Ticketavailable: Reviewticketinfo Selectoradda creditcardtopay thecitation Reviewamount, andpaymentinfo, submit Ticketnotyetinthesystem: saveforlater (appwillsendalert whenticketisreadytobepaid) Isthisacaryoudriveoften? Saveregistrationsoapp cansearchfortickets
  49. 49. Firsttimeuser: weaskforlocation Assumethatcurrent locationisalsothe citywhereticketwas issued Ifnot,providealist ofnearbycities TicketZensupports
  50. 50. Sketcheachscreen
  51. 51. Makeitinteractive
  52. 52. flinto.com/p/e25a9d3d
  53. 53. Share,Learn,Improve
  54. 54. PROTO.IO
  55. 55. Prototyping WebApplications
  56. 56. Maggie Steciuk BOSTON, MA
  57. 57. Maggie Steciuk BOSTON, MA Contact Maggie Send
  58. 58. Maggie Steciuk BOSTON, MA Contact Maggie Send Hey, Maggie! Just thought I’d let you know this presentation is going exceptionally well. Hardly anybody in the front of the room fell asleep.
  59. 59. Maggie Steciuk BOSTON, MA Your message has been sent.
  60. 60. Moregreatexamplesat: hp://www.designstaff.org/articles/product-design-sprint-day-4- prototype-2013-01-07.html
  61. 61. InVision
  62. 62. invisionapp.com | cl.ly/QOuc
  63. 63. Prototypingcanbeeasy Righttool,righttime So,remember:
  64. 64. Prototypingcanbeeasy Righttool,righttime So,remember:
  65. 65. Thankyou! Resources:pbon.es/proto

×