ADDC 2018 - John Sundell: Prototype Everything

Prototype EVERYTHING @johnsundell swiftbysundell.com

Prototyping?

Prototyping? !"

Prototyping? !" {} Pseudo code Playgrounds

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

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

Sketch After Eﬀects

Sketch After Eﬀects InVision Flinto

Prototyping techniques

Prototyping workﬂows

% Why prototype?

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

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

Waterfall Photo by Sergey Pesterev on Unsplash

Waterfall Photo by Sergey Pesterev on Unsplash Speciﬁcation Product

Agile(ish) Plan Build Feedback

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

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

⛓ * + ,

Constraints ⛓

Constraints ⛓ Rules that deﬁne the boundaries of a prototype.

How to display more details here? %

Added constraints

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

display course details in the overview. We’ll spend one day on prototyping ideas.

display course details in the overview. We’ll spend one day on prototyping ideas. We’ll use standard system components.

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.

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 ﬁnd a way to display all course metadata.

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 ﬁnd a way to display all course metadata. We don’t need to invent a brand new way of displaying details in a list view.

Constraints ⛓

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

to prototype by setting limits. • Lets you focus on solving one problem at a time with a clear objective. Constraints ⛓

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 ⛓

* MVPs

M V P s inimum iable rototype

Navigation

Featured Catalog For You Search

Where do you ﬁnd items on sale?

<HTML/>

<HTML/> Structure

<HTML/> Structure Easy to render

Editorial Sales Collections Featured News Fashion Articles

index.html

<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

<html> <ul> <li> <a href="editorial.html">Editorial</a> </li> <li> <a href="news.html">News</a> </li>
</ul> </html> featured.html

MVPs *

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

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 *

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 *

+ Modularity

NEW Image loading Network requests Login Proﬁle screen Search Sharing
Theme & styles Views

Image loading Network requests Login Proﬁle screen Search Sharing Theme
& styles Views App

Image loading Login Views Prototype Custom code Custom designs

Frameworks (or libraries, modules, packages…)

Modularizing ✂

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

same preﬁx. For example: User, UserManager, UserCache, UserLoader. . Classes that perform a single dedicated task, such as login or caching, are ideal candidates. /

same preﬁx. 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. /

same preﬁx. 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. / Deﬁne an API entry point. Just like with most SDKs, what is the top-level module API that the app can interact with? 1

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

spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView

spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView

spicy. Also easy to make! But be careful not to eat too much. TitleLabel DetailLabel ImageView Recommended by: SocialView FavoriteButton

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

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

ContentView PrefixView BottomView ActionView

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

Modularity +

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

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 +

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-eﬀects, like easier testing and better reuse of code & design. Modularity +

Creating tools ,

Creating tools , Lowering the barrier of entry for prototyping.

Playgrounds

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

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

Bash Swift Objective-C Java Kotlin Photoshop actions Sketch symbols Automator
actions Javascript Workﬂows

Creating tools ,

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

a new prototype. • Automation is a great way to get rid of tasks that are boring, repetitive or error prone. Creating tools ,

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 ,

Modularity + Creating tools , MVPs * Constraints ⛓

How to use prototyping in your team and projects? %

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

EVERYTHING Prototype @johnsundell swiftbysundell.com stacktracepodcast.fm

ADDC 2018 - John Sundell: Prototype Everything

ADDC 2018 - John Sundell: Prototype Everything

More Decks by ADDC - App Design & Development Conference

Other Decks in Technology

Featured

Transcript