Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ADDC 2018 - John Sundell: Prototype Everything

ADDC 2018 - John Sundell: Prototype Everything

Prototyping is a great tool when it comes to quickly validating an idea or a new concept. It can let us try out a new UI design, an experimental way of coding or even an entire app. But prototyping can also be used in so many more situations, and can really help teams move a lot quicker without sacrificing the quality of their product. In this talk, John will share his experiences working with prototyping in many different contexts, and show how you can really prototype everything.

More about the talk, authors & slides: https://addconf.com/2018/schedule/pro...
Read about the conference: https://addconf.com

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

Transcript

  1. Prototype EVERYTHING @johnsundell swiftbysundell.com

  2. Prototyping?

  3. Prototyping?

  4. Prototyping? !"

  5. Prototyping? !" {} Pseudo code Playgrounds

  6. Prototyping? !" {} Pseudo code Playgrounds Framer React Native

  7. Prototyping? !" {} Pseudo code Playgrounds Framer React Native #$

  8. Prototyping? !" {} Pseudo code Playgrounds Framer React Native #$

    Sketch After Effects
  9. Prototyping? !" {} Pseudo code Playgrounds Framer React Native #$

    Sketch After Effects InVision Flinto
  10. Prototyping techniques

  11. Prototyping workflows

  12. % Why prototype?

  13. % Why prototype? & Prototypes are a waste of time!

  14. % Why prototype? & Prototypes are a waste of time!

    ' The client doesn’t want to pay for prototypes.
  15. Waterfall Photo by Sergey Pesterev on Unsplash

  16. Waterfall Photo by Sergey Pesterev on Unsplash Specification Product

  17. Agile(ish) Plan Build Feedback

  18. Agile(ish) Plan Build Feedback Ship (at some point) (

  19. Agile(ish) Plan Build Feedback Ship (at some point) ( Prototype

  20. ⛓ * + ,

  21. Constraints ⛓

  22. Constraints ⛓ Rules that define the boundaries of a prototype.

  23. None
  24. How to display more details here? %

  25. Added constraints

  26. Added constraints Our goal is to prototype a way to

    display course details in the overview.
  27. Added constraints Our goal is to prototype a way to

    display course details in the overview. We’ll spend one day on prototyping ideas.
  28. Added constraints Our goal is to prototype a way to

    display course details in the overview. We’ll spend one day on prototyping ideas. We’ll use standard system components.
  29. Added constraints Removed constraints Our goal is to prototype a

    way to display course details in the overview. We’ll spend one day on prototyping ideas. We’ll use standard system components.
  30. Added constraints Removed constraints Our goal is to prototype a

    way to display course details in the overview. We’ll spend one day on prototyping ideas. We’ll use standard system components. We don’t need to find a way to display all course metadata.
  31. Added constraints Removed constraints Our goal is to prototype a

    way to display course details in the overview. We’ll spend one day on prototyping ideas. We’ll use standard system components. We don’t need to find a way to display all course metadata. We don’t need to invent a brand new way of displaying details in a list view.
  32. None
  33. None
  34. Constraints ⛓

  35. • Can be a great tool to give yourself time

    to prototype by setting limits. Constraints ⛓
  36. • Can be a great tool to give yourself time

    to prototype by setting limits. • Lets you focus on solving one problem at a time with a clear objective. Constraints ⛓
  37. • Can be a great tool to give yourself time

    to prototype by setting limits. • Lets you focus on solving one problem at a time with a clear objective. • Makes it easier to be creative by removing pressure to create something extraordinary. Constraints ⛓
  38. * MVPs

  39. M V P s inimum iable rototype

  40. Navigation

  41. Featured Catalog For You Search

  42. Featured Catalog For You Search

  43. Where do you find items on sale?

  44. <HTML/>

  45. <HTML/> Structure

  46. <HTML/> Structure Easy to render

  47. Editorial Sales Collections Featured News Fashion Articles

  48. Editorial Sales Collections Featured News Fashion Articles

  49. index.html

  50. <html> <ul> <li> <a href="featured.html">Featured</a> </li> <li> <a href="catalog.html">Catalog</a> </li>

    <li> <a href="forYou.html">For You</a> </li> <li> <a href="search.html">Search</a> </li> </ul> </html> index.html
  51. <html> <ul> <li> <a href="editorial.html">Editorial</a> </li> <li> <a href="news.html">News</a> </li>

    </ul> </html> featured.html
  52. None
  53. MVPs *

  54. • Can be a great way to test out an

    idea or new feature without doing much (if any) design or coding. MVPs *
  55. • Can be a great way to test out an

    idea or new feature without doing much (if any) design or coding. • Using things like HTML can be a great option. You can also draw by hand, use mind-mapping or other tools. MVPs *
  56. • Can be a great way to test out an

    idea or new feature without doing much (if any) design or coding. • Using things like HTML can be a great option. You can also draw by hand, use mind-mapping or other tools. • Writing throw-away code or doing throw-away designs is 100% OK and can be very liberating. MVPs *
  57. + Modularity

  58. NEW

  59. NEW Image loading Network requests Login Profile screen Search Sharing

    Theme & styles Views
  60. Image loading Network requests Login Profile screen Search Sharing Theme

    & styles Views App
  61. Image loading Login Views Prototype Custom code Custom designs

  62. Frameworks (or libraries, modules, packages…)

  63. Modularizing ✂

  64. Modularizing ✂ Look for clusters of classes that share the

    same prefix. For example: User, UserManager, UserCache, UserLoader. .
  65. Modularizing ✂ Look for clusters of classes that share the

    same prefix. For example: User, UserManager, UserCache, UserLoader. . Classes that perform a single dedicated task, such as login or caching, are ideal candidates. /
  66. Modularizing ✂ Look for clusters of classes that share the

    same prefix. For example: User, UserManager, UserCache, UserLoader. . Untangle hard dependencies between types, and establish clear APIs and Interfaces. Avoid using global state. 0 Classes that perform a single dedicated task, such as login or caching, are ideal candidates. /
  67. Modularizing ✂ Look for clusters of classes that share the

    same prefix. For example: User, UserManager, UserCache, UserLoader. . Untangle hard dependencies between types, and establish clear APIs and Interfaces. Avoid using global state. 0 Classes that perform a single dedicated task, such as login or caching, are ideal candidates. / Define an API entry point. Just like with most SDKs, what is the top-level module API that the app can interact with? 1
  68. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much.
  69. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView
  70. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView
  71. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView FavoriteButton
  72. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView FavoriteButton Meatballs Related recipes: Shrimp risotto
  73. Spicy chicken soup A fantastically delicious soup, that is quite

    spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView FavoriteButton Meatballs Related recipes: Shrimp risotto 2
  74. ContentView PrefixView BottomView ActionView

  75. ContentView PrefixView BottomView ActionView Gui Rambo Brazil Favorite food: 3

    4 5 0
  76. Modularity +

  77. • My building apps as separate building blocks, creating prototypes

    become a lot more easy & fun. Modularity +
  78. • My building apps as separate building blocks, creating prototypes

    become a lot more easy & fun. • Our UI can be created in a modular fashion too - by using “slot”-based designs that are more dynamic. Modularity +
  79. • My building apps as separate building blocks, creating prototypes

    become a lot more easy & fun. • Our UI can be created in a modular fashion too - by using “slot”-based designs that are more dynamic. • Modularity also gives us some really nice side-effects, like easier testing and better reuse of code & design. Modularity +
  80. Creating tools ,

  81. Creating tools , Lowering the barrier of entry for prototyping.

  82. Playgrounds

  83. Playgrounds • Open Xcode • Select File > New >

    Playground • Pick a template • Pick a destination • Start coding
  84. None
  85. None
  86. Automation 6 When you can start prototyping at any time,

    you’ll do it more often.
  87. Bash

  88. Bash Swift Objective-C Java Kotlin Photoshop actions Sketch symbols Automator

    actions Javascript Workflows
  89. Creating tools ,

  90. • Reduce the need for setup and boilerplate when creating

    a new prototype. Creating tools ,
  91. • Reduce the need for setup and boilerplate when creating

    a new prototype. • Automation is a great way to get rid of tasks that are boring, repetitive or error prone. Creating tools ,
  92. • Reduce the need for setup and boilerplate when creating

    a new prototype. • Automation is a great way to get rid of tasks that are boring, repetitive or error prone. • Anyone can create tools and automation - you don’t have to be a command line expert. Creating tools ,
  93. Modularity + Creating tools , MVPs * Constraints ⛓

  94. How to use prototyping in your team and projects? %

  95. How to use prototyping in your team and projects? %

    Prototype it! 7
  96. EVERYTHING Prototype @johnsundell swiftbysundell.com stacktracepodcast.fm