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

Thanks!

@patrickkeenanme patrickkeenan@google.com

http://bit.ly/1LjH4Fg