Tweet
Tweet

Slide 1

Slide 1 text

Prototype EVERYTHING @johnsundell swiftbysundell.com

Slide 2

Slide 2 text

Prototyping?

Slide 3

Slide 3 text

Prototyping?

Slide 4

Slide 4 text

Prototyping? !"

Slide 5

Slide 5 text

Prototyping? !" {} Pseudo code Playgrounds

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

Prototyping techniques

Slide 11

Slide 11 text

Prototyping workflows

Slide 12

Slide 12 text

% Why prototype?

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

Waterfall Photo by Sergey Pesterev on Unsplash

Slide 16

Slide 16 text

Waterfall Photo by Sergey Pesterev on Unsplash Specification Product

Slide 17

Slide 17 text

Agile(ish) Plan Build Feedback

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

⛓ * + ,

Slide 21

Slide 21 text

Constraints ⛓

Slide 22

Slide 22 text

Constraints ⛓ Rules that define the boundaries of a prototype.

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

How to display more details here? %

Slide 25

Slide 25 text

Added constraints

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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.

Slide 29

Slide 29 text

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.

Slide 30

Slide 30 text

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.

Slide 31

Slide 31 text

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.

Slide 32

Slide 32 text

No content

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

Constraints ⛓

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

• 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 ⛓

Slide 37

Slide 37 text

• 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 ⛓

Slide 38

Slide 38 text

* MVPs

Slide 39

Slide 39 text

M V P s inimum iable rototype

Slide 40

Slide 40 text

Navigation

Slide 41

Slide 41 text

Featured Catalog For You Search

Slide 42

Slide 42 text

Featured Catalog For You Search

Slide 43

Slide 43 text

Where do you find items on sale?

Slide 44

Slide 44 text

Slide 45

Slide 45 text

Structure

Slide 46

Slide 46 text

Structure Easy to render

Slide 47

Slide 47 text

Editorial Sales Collections Featured News Fashion Articles

Slide 48

Slide 48 text

Editorial Sales Collections Featured News Fashion Articles

Slide 49

Slide 49 text

index.html

Slide 50

Slide 50 text

  • Featured
  • Catalog
  • For You
  • Search
index.html

Slide 51

Slide 51 text

  • Editorial
  • News
featured.html

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

MVPs *

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

• 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 *

Slide 56

Slide 56 text

• 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 *

Slide 57

Slide 57 text

+ Modularity

Slide 58

Slide 58 text

NEW

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Image loading Login Views Prototype Custom code Custom designs

Slide 62

Slide 62 text

Frameworks (or libraries, modules, packages…)

Slide 63

Slide 63 text

Modularizing ✂

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

ContentView PrefixView BottomView ActionView

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

Modularity +

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

• 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 +

Slide 79

Slide 79 text

• 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 +

Slide 80

Slide 80 text

Creating tools ,

Slide 81

Slide 81 text

Creating tools , Lowering the barrier of entry for prototyping.

Slide 82

Slide 82 text

Playgrounds

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

No content

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Bash

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

Creating tools ,

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

• 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 ,

Slide 92

Slide 92 text

• 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 ,

Slide 93

Slide 93 text

Modularity + Creating tools , MVPs * Constraints ⛓

Slide 94

Slide 94 text

How to use prototyping in your team and projects? %

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

EVERYTHING Prototype @johnsundell swiftbysundell.com stacktracepodcast.fm