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

Transcript

1. Prototype
   EVERYTHING
   @johnsundell
   swiftbysundell.com
   

   View Slide

2. Prototyping?
   

   View Slide

3. Prototyping?
   

   View Slide

4. Prototyping?
   !"
   

   View Slide

5. Prototyping?
   !"
   {}
   Pseudo code Playgrounds
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. Prototyping
    techniques
    

    View Slide

11. Prototyping
    workflows
    

    View Slide

12. % Why prototype?
    

    View Slide

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

    View Slide

14. % Why prototype?
    &
    Prototypes are a
    waste of time!
    '
    The client doesn’t
    want to pay for
    prototypes.
    

    View Slide

15. Waterfall
    Photo by Sergey Pesterev on Unsplash
    

    View Slide

16. Waterfall
    Photo by Sergey Pesterev on Unsplash
    Specification Product
    

    View Slide

17. Agile(ish)
    Plan
    Build
    Feedback
    

    View Slide

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

    View Slide

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

    View Slide

20. ⛓ * + ,
    

    View Slide

21. Constraints
    ⛓
    

    View Slide

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

    View Slide

23. View Slide

24. How to display
    more details here?
    %
    

    View Slide

25. Added
    constraints
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

32. View Slide

33. View Slide

34. Constraints
    ⛓
    

    View Slide

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

    View Slide

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
    ⛓
    

    View Slide

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
    ⛓
    

    View Slide

38. * MVPs
    

    View Slide

39. M
    V
    P s
    inimum
    iable
    rototype
    

    View Slide

40. Navigation
    

    View Slide

41. Featured Catalog For You Search
    

    View Slide

42. Featured Catalog For You Search
    

    View Slide

43. Where do you find
    items on sale?
    

    View Slide

44. View Slide

45. View Slide

46. View Slide

47. Editorial
    Sales
    Collections
    Featured
    News
    Fashion
    Articles
    

    View Slide

48. Editorial
    Sales
    Collections
    Featured
    News
    Fashion
    Articles
    

    View Slide

49. index.html
    

    View Slide

50. 
    
    
    Featured
    
    
    Catalog
    
    
    For You
    
    
    Search
    
    
    
    index.html
    

    View Slide

51. 
    
    
    Editorial
    
    
    News
    
    
    
    featured.html
    

    View Slide

52. View Slide

53. MVPs
    *
    

    View Slide

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

    View Slide

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
    *
    

    View Slide

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
    *
    

    View Slide

57. + Modularity
    

    View Slide

58. NEW
    

    View Slide

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

    View Slide

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

    View Slide

61. Image
    loading
    Login
    Views
    Prototype
    Custom
    code
    Custom
    designs
    

    View Slide

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

    View Slide

63. Modularizing
    ✂
    

    View Slide

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

    View Slide

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.
    /
    

    View Slide

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.
    /
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

74. ContentView
    PrefixView
    BottomView
    ActionView
    

    View Slide

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

    View Slide

76. Modularity
    +
    

    View Slide

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

    View Slide

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
    +
    

    View Slide

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
    +
    

    View Slide

80. Creating tools
    ,
    

    View Slide

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

    View Slide

82. Playgrounds
    

    View Slide

83. Playgrounds
    • Open Xcode
    • Select File > New > Playground
    • Pick a template
    • Pick a destination
    • Start coding
    

    View Slide

84. View Slide

85. View Slide

86. Automation
    6
    When you can start
    prototyping at any
    time, you’ll do it
    more often.
    

    View Slide

87. Bash
    

    View Slide

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

    View Slide

89. Creating tools
    ,
    

    View Slide

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

    View Slide

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
    ,
    

    View Slide

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
    ,
    

    View Slide

93. Modularity
    +
    Creating tools
    ,
    MVPs
    *
    Constraints
    ⛓
    

    View Slide

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

    View Slide

95. How to use
    prototyping in
    your team and
    projects?
    %
    Prototype it!
    7
    

    View Slide

96. EVERYTHING
    Prototype
    @johnsundell
    swiftbysundell.com
    stacktracepodcast.fm
    

    View Slide