Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Building Prototypes in Code to Iterate Faster
Search
caterinasworld
June 21, 2016
Design
1
150
Building Prototypes in Code to Iterate Faster
Open Source Bridge 2016
caterinasworld
June 21, 2016
Tweet
Share
More Decks by caterinasworld
See All by caterinasworld
Turning Your Idea Into a Design
caterinasworld
0
91
Raise Effect | Hacking Oregon's Minimum Wage
caterinasworld
0
150
Prototyping a Mobile App (Workshop)
caterinasworld
1
460
Intro to Hackathons
caterinasworld
0
310
Finding Your Career in Tech
caterinasworld
2
160
Other Decks in Design
See All in Design
情報設計からのデザインアプローチ ~ユーザーの声を聞くよりも、もっとデータの声を聞け~
securecat
1
570
私たちが取り組んできたアクセシビリティと これから取り組んでいくアクセシビリティについて
securecat
1
310
ホワイト化するこの世界の片隅に
hisayosky
0
240
JBUG京都#1登壇資料_「考える」をマネジメントする_ビーワークス高濱
webnaut
1
460
デザインからアプリ実装まで一貫したデザインシステムを構築するベストプラクティス
shuzo
12
3.4k
Blender 4.1 で レッツ Vket Cloud!
kamera25
0
260
ZOZO CDO Office Design
zozodevelopers
PRO
1
140
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
2.3k
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
580
202409_会社概要資料_Englishver.pdf
zakkerooni
0
170
3 Reasons Why I Got into Design
harukausui
1
140
Night Shift concept 9/15/2024
cpineda57
0
140
Featured
See All Featured
Atom: Resistance is Futile
akmur
261
25k
Principles of Awesome APIs and How to Build Them.
keavy
125
16k
Speed Design
sergeychernyshev
22
430
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Why Our Code Smells
bkeepers
PRO
334
56k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
How STYLIGHT went responsive
nonsquared
93
5.1k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
25
3.9k
Transcript
Building Prototypes in Code to Iterate Faster Caterina Paun @caterinasworld
Caterina Paun Developer + Designer @caterinasworld www.caterinasworld.com
A Brief History of Time
Wireframes vs. Mockups vs. Prototypes
A wireframe is a visual representation of the content of
a page or app. It is a visualization tool and process for presenting proposed functionality, structure, and content of a web page, website, or application.
None
None
A mockup consists of one or several static pictures that
resemble the future UI of the application in as many aspects as possible.
Photoshop
Photoshop
Sketch
A prototype is an early sample, model, or release of
a product built to test a concept or process or to act as a thing to be replicated or learned from.
None
Keynote
Xcode
Paper + Pop
Case Study: Twitter
Wireframe = Representation Mockup = Shape/Size/Colors Prototype = Function
Prototype Fidelity
Paper Prototypes
Low Fidelity Medium Fidelity High Fidelity
The Tools
Lo to Medium Fidelity Balsamiq http:// balsamiq.com/ Flinto https:// www.flinto.com/
Proto IO http://proto.io/ Moqups https:// moqups.com/ Pop. (iPhone/Android App) Mockups.me http:// www.mockups.me/ App Cooker http:// www.appcooker.com/ Fluid UI https:// www.fluidui.com/ UX Pin http://uxpin.com/
Medium to High Fidelity Axure http://axure.com OmniGraffle http://www.omnigroup.com/omnigraffle/ InVision http://www.invisionapp.com/
Justinmind http://www.justinmind.com/ ProtoShare http://www.protoshare.com/ Pixate http://www.pixate.com/
High to Very High Fidelity Sketch http://www.sketchapp.com Photoshop, Illustrator +
Invision Keynote, PowerPoint FramerJS http://framerjs.com Bootstrap, Foundation
Why Prototype?
“Want to increase innovation? Lower the cost of failure.” -Joi
Ito
Ideas are cheap.
Development is expensive.
The Customer
–Jony Ive “There are 9 rejected ideas for every idea
that works.”
None
–Frank Lloyd Wright “You can use an eraser on the
drafting table or a sledge hammer on the construction site.”
Process
Research Design Test
MVP
$$$$ $ $ $ $$ $$$
$ $$ $$ $$$ $$$$ $$$$ $ $ $ $$
$$$ $$$
Why Prototype in Code?
None
My Process Pen + Paper Lo-Fi Wireframe - Balsamiq Hi-Fi
Mockup - Photoshop, Sketch Hi-Fi Prototype - Bootstrap, FramerJS
Wireframes Mockups Prototypes +
Bootstrap and Foundation
Robust Front-end Frameworks - UI components - Styled typography -
JavaScript plugins
None
None
None
Responsive
None
Tech Company vs. Agency or Development Shop
Style Guides are a must.
None
None
Git/GitHub
No more FINAL_FINAL_10_ACTUALFINAL.psd Multiple people can contribute to a single
prototype
–L. Peter Deutsch “To iterate is human, to recurse divine.”
Design vs. Development
Designer Developer 100% 100% Past
Designer Developer 15% 85% 85% 15% Present
Designer Developer 15% 85% 85% 15% Prototyper 50% 50% Future
Designer Developer 15% 85% 85% 15% Prototyper 50% 50% 100%
100% A More Realistic Future
No, designers don’t need to learn to code.
But your team can probably build better products.
And prototyping in code will help your team build better
products.
More Reading How to Decide What Ideas to Prototype: http://www.fastcodesign.com/1672929/
how-to-decide-what-ideas-to-prototype Helpful Rapid Prototyping Methods and Tools: http://chiefdisruptionofficer.com/helpful-rapid-prototyping- methods-and-tools-to-bring-digital-ideas-to-life-fast/ A Lean UX Design Process: http://www.anniestudio.org/a-lean-ux-design-process/
More Reading… Books
Questions?
Thank you! Caterina Paun @caterinasworld