Designing with Animation - Design and Development Videos€¦ · Designing with Animation Julian Missig Joe Malia Marek Bereza Design Session 803 #WWDC15. Please notice that a new

© 2015 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.

Designing with Animation

Julian MissigJoe MaliaMarek Bereza

Design

Session 803

#WWDC15

Please notice that a new item has been added. New items will be added to the top of the list.

Related items will be here if they exist. Tap here to find out.

Who Are We?

Who Are We?

Team of inventors, designers, prototypers

Who Are We?

Team of inventors, designers, prototypersExplore new interfaces across all of Apple’s products

Who Are We?

Team of inventors, designers, prototypersExplore new interfaces across all of Apple’s productsWe make animated and interactive prototypes

The Plan

The Plan

Ease in to the what, why, and how of animation

The Plan

Ease in to the what, why, and how of animationCommunicate an idea by animating it

The Plan

Ease in to the what, why, and how of animationCommunicate an idea by animating itLearn how animation and interaction are intertwined

What Is Animation?

What Is Animation?

Change over time

What Is Animation?

Change over timeNot a replacement for screen layout and hierarchy

What Is Animation?

Change over timeNot a replacement for screen layout and hierarchy Practical—how all the bits of your app fit together

What Is Animation?

Change over timeNot a replacement for screen layout and hierarchy Practical—how all the bits of your app fit togetherArtful—how your app feels

Why Animate?

Direct attention

Direct Attention

Direct attention

Direct Attention

Direct Attention

Direct Attention

Direct Attention

Direct Attention

Direct Attention

Direct Attention

Direct attention

Direct attention

Direct attention

Direct attention Keep oriented

Keep oriented

Keep OrientedToast Four Glass

Keep OrientedToast Four Glass

Keep OrientedFour GlassToastToast

Keep OrientedFour GlassToastToast

Keep Oriented

Keep oriented




Direct attention Keep oriented Connect behavior

Connect behavior

Connect Behavior

Connect Behavior

Start

Connect Behavior

StartChange

Connect Behavior

StartChangeComplete

Connect Behavior

Connect behavior



How Do We Try Animation?


Screenshots show too little


Screenshots show too littleApps show too much



Make animated experiments


Make animated experimentsCompare built-in iOS animations to custom animations


Make animated experimentsCompare built-in iOS animations to custom animationsMake prototypes, show people, learn from their feedback

Make

ShowLearn

What’s New in Toast Modern?


See local toast


See local toastShare toast


See local toastShare toastComment on toast


See local toastShare toastComment on toastConnected to Toastal Service


See local toastShare toastComment on toastConnected to Toastal ServiceSee my toast


See local toastShare toastComment on toastConnected to Toastal ServiceSee my toastSee my friend’s toast


See local toastShare toastComment on toastConnected to Toastal ServiceSee my toastSee my friend’s toastGet overwhelmed by toast

Goal

Goal

Slice through all the toast to find our favorites

AnimateWithout code

Joe Malia

Favorites

Four GlassNutella Sea Salt

Blue BarrelGoat Butter

The BarnCacao, Trout

Slanted ToastFois Gras

Atelier BreadCreme Fraiche

Toast Modern






Toast Modern

Prototyping Animation


AfterEffects, Quartz Composer


AfterEffects, Quartz Composer Swift, HTML/CSS


AfterEffects, Quartz Composer Swift, HTML/CSSKeynote

Direct attentionPeople need to know the new favorite button is there

Keep orientedPeople should be able to find the toast they’ve favorited

Connect behaviorPeople should be able to use the favorite button from the first touch









Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern













































Toast Modern






Toast Modern






Toast Modern

1

1

1

1

1Grab attention

OKDon’t Allow

Toast Modern

Toast Modern






Toast Modern

Toast Modern






Toast Modern

Toast Modern











Toast Modern






Toast Modern


Keep oriented People should be able to find the toast they’ve favorited







Toast Modern






Toast Modern






Toast Modern






Toast Modern







Toast Modern Favorites







Toast Modern Favorites







FavoritesToast Modern







FavoritesToast Modern






Toast Modern


Favorites






Toast Modern


Favorites

Toast Modern






Toast Modern






Toast Modern






Toast Modern











Toast Modern






Toast Modern





Toast Modern






Toast Modern




Toast Modern






Toast Modern








Toast Modern






Toast Modern






Toast Modern










Toast Modern
















































Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern






Toast Modern





Toast Modern






Toast Modern






Toast Modern



Toast Modern






Toast Modern






Toast Modern






Keep oriented People should be able to find the toast they’ve favorited


Toas

t Mod

ern

Four

Gla

ssNu

tella

Sea

Salt

The

Barn

Caca

o, T

rout

Slan

ted

Toas

tFo

is G

ras

Atel

ier B

read

Crem

e Fr

aiche

Blue

Bar

rel

Goa

t But

ter

Toas

t Mod

ern

Four

Gla

ssNu

tella

Sea

Salt

The

Barn

Caca

o, T

rout

Slan

ted

Toas

tFo

is G

ras

Atel

ier B

read

Crem

e Fr

aiche

Blue

Bar

rel

Goa

t But

ter

Toas

t Mod

ern

Four

Gla

ssNu

tella

Sea

Salt

The

Barn

Caca

o, T

rout

Slan

ted

Toas

tFo

is G

ras

Atel

ier B

read

Crem

e Fr

aiche

Blue

Bar

rel

Goa

t But

ter

InteractControl time

Marek Bereza


Toast Modern

Four GlassNutella Sea SaltFour GlassNutella Sea Salt




Interactive Prototypes


Get a feel for it


Get a feel for it

Does it work?


Get a feel for it

Does it work?What doesn’t work?


Get a feel for it

Does it work?What doesn’t work?Why doesn’t it work?

Get a feel for it


Get a feel for itLet others try it




Make

ShowLearn




Get a feel for itLet others try itEasily make changes

$$

Interactive Prototype = Illusion



The Image Files

app.png

toastRow.png

favoritedRow.png

The Codeclass ViewController: UIViewController {

let appImage = Layer(image: "app.png") let toastRow = Layer(image: "toastRow.png") let favoritedRow = Layer(image: "favoritedRow.png") override func viewDidLoad() { super.viewDidLoad()

view.addSubview(appImage) view.addSubview(favoritedRow) view.addSubview(toastRow) toastRow.y = 176 favoritedRow.y = 176 } override func touchesEnded(touches: NSSet, withEvent: UIEvent) { favoritedRow.scale = 0.8 UIView.animateWithDuration(0.4) { toastRow.x = screenWidth favoritedRow.scale = 1 } } }

class ViewController: UIViewController {


view.addSubview(appImage) view.addSubview(favoritedRow) view.addSubview(toastRow)

toastRow.y = 176 favoritedRow.y = 176 } override func touchesEnded(touches: NSSet, withEvent: UIEvent) { favoritedRow.scale = 0.8 UIView.animateWithDuration(0.4) { toastRow.x = screenWidth favoritedRow.scale = 1 } } }

Load the Images




Add Them to the Main View




Animate on Touch

What’s wrong?

Break down the interaction

Start

Start Change

Start Change Complete

Each stage is an opportunity

Stages of Touch


Start Change CompleteTouch Down

Start

Start Change CompleteTouch Down Touch Moved

Change

Touch Up


Complete

Touch Up

touchesBegan()


Complete

Touch Up

touchesBegan() touchesMoved()


Complete

touchesEnded()

Touch Up

touchesBegan() touchesMoved()


Complete

class

} } } }

The Code

class

} } } }

The Code

Hack it together

class

} } } }

The Code

Hack it togetherUse images for everything

class

} } } }

The Code

Hack it togetherUse images for everythingAnimate with UIView.animateWithDuration

Let others try it

“I really liked how it felt, but surely, shouldn’t it be a swipe?”

- Neighbor

Swipe Gesture

Swipe Gesture



RecapToast mortem

Julian Missig

What Is Animation?

Change over timeNot a replacement for screen layout and hierarchy Practical—how all the bits of your app fit togetherArtful—how your app feels

Direct attention





Make

ShowLearn

Related Sessions

Designing for Future Hardware Presidio Wednesday 2:30 PM

Designing for Apple Watch Presidio Wednesday 4:30 PM

Apple Watch Design Tips and Tricks Presidio Friday 3:30 PM

Prototyping: Fake It ’Til You Make It WWDC 2014

Designing Intuitive User Experiences WWDC 2014

Making a Great First Impression With Strong Onboarding Design WWDC 2014

Animate

Animate

Animatethoughtfully.

More Information

Keynote Animations Shown Todayhttp://developer.apple.com/sample-code/wwdc/2015/downloads/Designing-with-Animation.zip

Designing Great Appshttp://developer.apple.com/design

Rachel RothUser Interface [email protected]

Documents

Designing with Animation - Design and Development Videos€¦ · Designing with Animation Julian Missig Joe Malia Marek Bereza Design Session 803 #WWDC15. Please notice that a new