modern tools for moving from pixels to prototype to production
TRANSCRIPT
![Page 1: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/1.jpg)
PrefaceTHESE VIEWS ARE MY OWN
![Page 2: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/2.jpg)
![Page 3: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/3.jpg)
Code is where design happens
What I’ve learned
![Page 4: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/4.jpg)
Engineers to think like designers Designers to think like engineers (If only just once a week)
What I want
![Page 5: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/5.jpg)
1. Where the design process fails 2. Tools that are changing the process 3. Designing in code in Sketch & Framer
Today’s session
![Page 6: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/6.jpg)
The art of throwing things over the wall
ACT 1
![Page 7: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/7.jpg)
GO
GO
Tale of two buttons
![Page 8: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/8.jpg)
Make bad decisions in private
LESSON ON RELEASES
![Page 9: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/9.jpg)
Why design in code?
![Page 10: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/10.jpg)
The fastest way to communicate is through a working prototype
LESSON ON CASES
![Page 11: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/11.jpg)
Aren’t images faster?
![Page 12: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/12.jpg)
If a picture is worth 1000 words, a 60fps prototype is… a lot more
LESSON ON FLOWS
![Page 13: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/13.jpg)
What does this mean in a world with weekly, daily, continuous release cycles?
![Page 14: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/14.jpg)
“Release daily… to stakeholders”
LESSON IN PACING
![Page 15: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/15.jpg)
1 Control your vision as the designer.
Your prototype becomes the front-end.
2 Get the team to consider trade-offs and value UX.
The front-end becomes a design tool.
![Page 16: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/16.jpg)
They’re out for your job from their playground
ACT 2
![Page 17: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/17.jpg)
![Page 18: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/18.jpg)
Modern tools
![Page 19: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/19.jpg)
Modern tools
![Page 20: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/20.jpg)
Everyday automation & Everyday design
WHAT IF?
![Page 21: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/21.jpg)
The switchACT 3
![Page 22: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/22.jpg)
![Page 23: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/23.jpg)
![Page 24: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/24.jpg)
![Page 25: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/25.jpg)
Android Wear Notification
Prototype of a notification animation seen in Android Wear.
by Jorn van Dijk
![Page 26: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/26.jpg)
Contacts Scroll
Prototype of a scrollable and sortable list of people.
by Benjamin den Boer
![Page 27: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/27.jpg)
Type Tester
Prototype of Type Tester app with sliders to adjust the text.
by Benjamin den Boer
![Page 28: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/28.jpg)
Material Maps
Prototype of a Maps app, with Google Maps integration.
by Min-Sang Choi
![Page 29: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/29.jpg)
http://tinyurl.com/framerfitc
![Page 30: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/30.jpg)
Framer docs framerjs.com/docs.html
Framer examples examples.framerjs.com
Framer community facebook.com/groups/framerjs/
![Page 31: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/31.jpg)
Framer + Sketch July 28, 2014
BASIC CONCEPTS: LAYER
# Positioning x: 0 y: 0 z: 0
opacity: 0.5 rotation: 250 # Size scale: 1.5 width: 500 height: 800
# Hierarchy subLayers superLayer
# Filters blur: 10 invert: 10 brightness: 1 contrast: -.5 hueRotate: .5 saturate: 1.5 # Shadows shadowX: 10 shadowBlur: 16 shadowColor: "rgba(0,0,0,.5)" # EXTRA style, html, states...
![Page 32: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/32.jpg)
Framer + Sketch July 28, 2014
BASIC CONCEPTS: ANIMATION
# Animating a layer layer.animate properties: y: 0 time: 1 curve: "bezier-curve(0.4, 0.0, 0.2, 1)"
# Types of curves "linear" "ease-in" "ease-out" "ease-in-out" "bezier-curve(0.0, 0.0, 0.2, 1)" "bezier-curve(0.4, 0.0, 1, 1)" "bezier-curve(0.4, 0.0, 0.2, 1)"
# The spring curve: "spring" curveOptions: tension: 260 friction: 30 velocity: 0 tolerance: 0.01
![Page 33: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/33.jpg)
Framer + Sketch July 28, 2014
# Assigning an event to a layer layer.on Events.Click, -> alert("hello!")
# Assigning an event after an animation animation.on Events.AnimationEnd, -> alert("finished!")
BASIC CONCEPTS: EVENT
# Types of events Click TouchStart TouchMove TouchEnd MouseOver MouseOut AnimationStart AnimationStop AnimationEnd DragStart DragMove Scroll StateWillSwitch StateDidSwitch
![Page 34: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/34.jpg)
![Page 35: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/35.jpg)
![Page 36: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/36.jpg)
Maybe nothing’s changed
CONCLUSION
![Page 37: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/37.jpg)
Teams are still the best unit
![Page 38: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/38.jpg)
People are still the purpose
![Page 39: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/39.jpg)
The mind is still the constraint
![Page 40: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/40.jpg)
Empathy is still king
![Page 41: Modern Tools for Moving from Pixels to Prototype to Production](https://reader035.vdocuments.net/reader035/viewer/2022062523/58ec6c621a28ab07568b470d/html5/thumbnails/41.jpg)
But let’s move faster