Modern Tools for Moving from Pixels to Prototype to Production
42
Preface THESE VIEWS ARE MY OWN
Transcript of Modern Tools for Moving from Pixels to Prototype to Production
PrefaceTHESE VIEWS ARE MY OWN
Code is where design happens
What I’ve learned
Engineers to think like designers Designers to think like engineers (If only just once a week)
What I want
1. Where the design process fails 2. Tools that are changing the process 3. Designing in code in Sketch & Framer
Today’s session
The art of throwing things over the wall
ACT 1
GO
GO
Tale of two buttons
Make bad decisions in private
LESSON ON RELEASES
Why design in code?
The fastest way to communicate is through a working prototype
LESSON ON CASES
Aren’t images faster?
If a picture is worth 1000 words, a 60fps prototype is… a lot more
LESSON ON FLOWS
What does this mean in a world with weekly, daily, continuous release cycles?
“Release daily… to stakeholders”
LESSON IN PACING
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.
They’re out for your job from their playground
ACT 2
Modern tools
Modern tools
Everyday automation & Everyday design
WHAT IF?
The switchACT 3
Android Wear Notification
Prototype of a notification animation seen in Android Wear.
by Jorn van Dijk
Contacts Scroll
Prototype of a scrollable and sortable list of people.
by Benjamin den Boer
Type Tester
Prototype of Type Tester app with sliders to adjust the text.
by Benjamin den Boer
Material Maps
Prototype of a Maps app, with Google Maps integration.
by Min-Sang Choi
http://tinyurl.com/framerfitc
Framer docs framerjs.com/docs.html
Framer examples examples.framerjs.com
Framer community facebook.com/groups/framerjs/
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...
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
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
Maybe nothing’s changed
CONCLUSION
Teams are still the best unit
People are still the purpose
The mind is still the constraint
Empathy is still king
But let’s move faster
