Download - Design in motion. The new frontier of interaction design

Transcript
Page 1: Design in motion. The new frontier of interaction design

Design in MotionThe new frontier

of Interaction design

Antonio  De  PasqualeSenior Interaction Designer at frog

@myinteraction

Page 2: Design in motion. The new frontier of interaction design

My name is Antonio De PasqualeI'm a Senior Interaction Designer at frog Milan

A little about meI'm specialized in digital interfaces & user experience

I'm passionate about the "aesthetics" of movement

I'm from Sicily and I love the sea.

@myinteraction

Page 3: Design in motion. The new frontier of interaction design

Interaction Vs MotionWhat have this two worlds in common?

Page 4: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Interaction Vs Motion

Concept

Design research

Benchmark

Wireframe

Information architecture

User Requirements

User testing

User experience flow

User scenario

Prototype

...

Aestethics

Animations

Storytelling

Motion graphics

Character animation

Visual design

Title design

Kynetic typography

Transition design

...

What have this two worlds in common?

Page 5: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Interaction & MotionWhat have this two worlds in common?

Page 6: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

A wide picture ofUser Experience DesignCommunicationInteraction & IAMotion

Design in Motion. The new frontier of interaction design

Page 7: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Interaction Communication

Interaction » Communication » MotionObjects that don’t move don’t interact. An interaction is some sort of communication, and communication is

about movement: our vocal cords vibrating as we speak, our hands and arms writing or typing as we send

email or instant messages, sound and data moving between two entities. -

Dan Saffer - The element of Interaction Design

Motion

Page 8: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Without motion,there can be no interaction.You press a key, and an email window closes.

There is motion on your screen.

Dan Saffer - The element of Interaction Design

Page 9: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Design in MotionThe new frontier

of Interaction Design

Introduction to Motion Interfaces

Motion Design & Digital ArtifactsTransitional interfaces

Motion interaction foundations: tools & practice

From concept to detail designWhat is the right tool?

Motion interaction foundations: theory & methods

Animation principlesMotion pattern taxonomy

Page 10: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

INTRODUCTIONTO MOTION INTERFACES

Page 11: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

I was giving the demo to someone a little while ago, and I finished the demo and I said what do you think? They said, ‘You had me at scrolling.’

Motion Design & Digital artifacts

STEVE  JOBS,  2007  (on  the  iPhone  iner2al  scroll  feature)

Page 12: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Introduction Motion Design & Digital artifacts

The beginningGames used motion for the first time to visualize the effect of

a specific interaction in the digital space

Design in Motion. The new frontier of interaction design

Page 13: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Web 1.0: Java & GifAt the beginning of the Web, few technologies allowed motion

in web pages but mostly just for eye-candy

Introduction Motion Design & Digital artifacts

Applet Java Animated Gif

Page 14: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The Golden Age of FlashFrom a simple animation tool, Flash changed the way

designers experience with motion & interaction

2Advacend, 2000Screen transition, Loading screenhttp://v2.2a-archive.com/flashindex.htm

TheVoid, 1998Animated menu, interactive objects

http://www.thevoid.co.uk/index.html

LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm

Introduction Motion Design & Digital artifacts

Page 15: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Introduction Motion Design & Digital artifacts

LeoBurnet, 20063d navigation, motion detectionhttp://v2.2a-archive.com/flashindex.htm

Page 16: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

With the explosion of mobile apps, motion started to became

a core part of the interaction models

The App World

Introduction Transitional interfaces

Revealing hidden controls Top-down bouncing menuCard 3d parallax

Page 17: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

With the introduction of the new w3c specifications,

html & css added new life to motion & dynamic on the web

+

Introduction Transitional interfaces

The Web Reloaded

Page 18: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Gesture & MotionGesture recognition became a common pattern on console and motion interactions were the right answer

to show a new kind of affordance. Physical Motion patterns became virtual interactions.

Introduction Transitional interfaces

Page 19: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The FutureNew desktop physical control, css4 html6, smartphone gesture

recognition, hands & fingers tracking...

Introduction Transitional interfaces

Page 20: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Native animationin app gesture

1993 2005 2007 Today

Interactive controls

Full animationengine

3d, video, cam & motion tracking

Pong, 1978Gif, 1980

Applet Java, 1989

1978 1980 1989

Flash, 1993 Flash 3d, 2005

Leapmotion

2008

The Evolution of Motion Interaction

iOs, 2007

HTML5 + CSS3

Simple animation UI elements

InteractiveUI elements

Webkit

Technology

Motion

iOs 7, 2013

Web Nativeanimation

JavascriptSafari + Webkit

Jquery

2000

Flash AS.20

Natural UI

Xbox Kinect

Gestural interaction

Advanced motion patterns

Introduction Transitional interfaces

Page 21: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

MOTION INTERACTION THEORY & METHODS

Page 22: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Animation can explain whatever the mind of man can conceive. This facility makes it the most versatile and explicit means of

communication yet devised for quick mass appreciation.

Animation principles

WALT  DISNEY  COMPANY

Page 23: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation princples

Design in Motion. The new frontier of interaction design

From cartoon to the User Interface

David Hungar - Bay Wei Chang, 1993Animation: from cartoon to the user interface (Paper)

http://hci.stanford.edu/courses/cs448b/papers/Chang_AnimationInUI_UIST93.pdf

Page 24: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Disney animation principles

Disney's Twelve Basic Principles of Animation is a set of rules that defines a realistic

impression of a motion with the basic laws of physics.

* Panop Koonwat - https://vimeo.com/65815545

Motion interaction foundations Animation princples

Page 25: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Animation princples

Page 26: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Disney Animation Principles

Squash and stretchAnticipation

StagingStraight ahead / pose-to-pose

Follow through / overlapping actionSlow in and out

12 principles

ArcsSecondary action

TimingExaggerationSolid Drawing

Appeal

Motion interaction foundations Animation princples

Page 27: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

the purpose of this principle is to give a sense

of weight and flexibility to drawn objects.

Squash & stretch

Motion interaction foundations Animation principles

Rigid vs SoftAbstract vs Organic

Fade in/out vs Moving blocksBrand experience

Page 28: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Squash & stretch

Page turn to reveal menuhttp://capptivate.co/?s=circa

Flipping pageshttp://www.macitynet.it/flipboard-web-magazine/

External menu navigationhttp://capptivate.co/2013/11/23/airbnb/

Motion interaction foundations Animation principles

Page 29: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Increase affordanceAnticipate hidden interactions

Tutorial & helpExplain new pattern

Anticipation is used to prepare the audience for an action,

and to make the action appear more realistic.

Anticipation

Motion interaction foundations Animation principles

Page 30: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Anticipation

Card movementhttp://capptivate.co/2013/11/23/potluck/

Revealing additional functionhttp://capptivate.co/?s=clear

Horizontal slide to unlockhttp://youtu.be/3JlOOO14oSU

Motion interaction foundations Animation principles

Page 31: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The purpose of staging is to direct the audience's attention,

and make it clear what is of greatest importance in a scene

Staging

Motion interaction foundations Animation principles

Focus on action triggerDisplay active object in the interface

React to user activity

Page 32: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Staging

Motion interaction foundations

Message previewhttp://goo.gl/fZABUf

Focus on the active areahttp://vimeo.com/66395692

Animation principles

Page 33: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

"Straight ahead action" means drawing out a scene frame by frame from beginning to end, while

"pose to pose" involves starting with drawing a few key frames, and then filling in the intervals later.

Straight ahead and pose to pose

Motion interaction foundations

DirectionsContent position

Explaining IAReinforcing actionsHelps exploration

Animation principles

Page 34: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Straight ahead and pose to pose

Motion interaction foundations

Step by step navigationhttp://capptivate.co/2014/01/18/timbre-3/

Section transitionhttp://capptivate.co/2014/01/18/epiclist/

Quick multiple fruit cuthttp://goo.gl/zEOw55

Animation principles

Page 35: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

"Follow through" means that separate parts of a body will continue moving after the character has stopped.

"Overlapping action" is the tendency for parts of the body to move at different rates.

Follow through and overlapping action

Motion interaction foundations Animation principles

Explain UI patternShow active areas / functions

Natural transitionsSet time to the experience

Page 36: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Follow through and overlapping action

Motion interaction foundations

Content loadedhttp://capptivate.co/2013/09/30/phq4-3/

Revealing menuhttp://capptivate.co/2013/08/14/your-extra-life/

Tile transitionhttp://www.bobborries.com/Funnies/Windows8zoom.gif

Animation principles

Page 37: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The "easing" principle deals with the spacing required to accurately depict

the inherent law of inertia that governs all objects and people.

Slow in Slow out

Motion interaction foundations Animation principles

Trigger for invisible interactionsChange of status

Revealing new informationShowing extra controls

Start/End of a transition state

Page 38: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Slow in Slow out

Motion interaction foundations

Open/close main navigationhttp://capptivate.co/2013/11/07/breezi/

Panel focus switchhttp://capptivate.co/2013/09/18/memoir/

List scrollinghttp://capptivate.co/2013/07/12/making-3/

Animation principles

Page 39: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The principle simulates natural action that tends to follow an arched trajectory,

and animation should adhere to this principle by following implied "arcs" for greater realism.

Arcs

Motion interaction foundations Animation principles

Showing directionsExplain possible interactions

Show loading and timeAnticipate behaviours

Page 40: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Arcs

Motion interaction foundations

Animated infographicshttp://capptivate.co/2013/06/23/yahoo-weather-3/

Radial navigation systemhttp://capptivate.co/2013/07/08/applauze/

Data/Map content loadinghttp://capptivate.co/2013/06/25/ribbon//

Animation principles

Page 41: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

This important principle about secondary motion behaviours is that they emphasize,

rather than take attention away from, the main action.

Secondary actions

Motion interaction foundations Animation principles

Showing status changeSwitch content focusReinforcing transition

Keep focus on device status

Page 42: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Secondary actions

Motion interaction foundations

iOs7 closing appshttp://www.youtube.com/watch?v=h8Cc1NqGTUI

Control center bumphttp://goo.gl/vUOKYm

Folder position resethttp://goo.gl/JTtFnt

Animation principles

Page 43: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Timing is fundamental to define the physical characteristics of an object, such as weight, size and scale.

It can also make objects appear to abide by the laws of physics.

Timing

Motion interaction foundations Animation principles

Start/End of a processObject activation

Accepted interactionsInteraction speed

Page 44: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Timing

Motion interaction foundations

Tapping timehttp://capptivate.co/2013/08/02/listen-3/

Loading resultshttp://www.alitalia.com

Content loadinghttp://capptivate.co/2014/01/09/yahoo-news-digest-3/

Animation principles

Page 45: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The classical definition of exaggeration, employed by Disney, was to remain true to reality,

just presenting it in a wilder, more extreme form.

Exageration

Motion interaction foundations Animation principles

Reinforcing interactionAction trigger

Signature experience

Page 46: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Exageration

Motion interaction foundations

Keynoteexample

Keynoteexample

Reducing applicationhttp://i.imgur.com/WfWyJA5.gif

Hyper zoomhttp://capptivate.co/2013/06/27/lumosity/

Remove a matchhttp://i.imgur.com/wbIWuKD.gif

Animation principles

Page 47: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The principle of solid drawing means taking into account forms in

three-dimensional space, giving them volume and weight.

Solid drawing

Motion interaction foundations Animation principles

Space extensionGood for Mobile

Extra space for info3d as an additional info layer

Page 48: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Solid drawing

Motion interaction foundations

Revealing selectors CSS Card fliphttps://daneden.me/animate/

Revealing extra spacehttp://capptivate.co/2013/11/19/445/

Animation principles

Page 49: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The appeal of an animated character is similar to the charisma of a live actor.

The important thing is that the viewer feels the character is real and interesting.

Appeal

Motion interaction foundations Animation principles

PersonalityEmotional experienceSignature experience

Page 50: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Appeal

Motion interaction foundations Animation principles

Character animation (pin)http://capptivate.co/2014/01/18/meattext/

Tapping weatherhttp://i.imgur.com/IoWbato.gif

Trash tickethttp://i.imgur.com/nDoQTEI.gif

Page 51: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

From a motion behaviours taxonomy

Motion interaction foundations Motion taxonomy

Different ways to organize motion patterns help designers in understanding when and which

patterns are useful for a specific action or to achieve a specific goal.

Extension

Orientation

Feedforward

Feedback

Highlight

Awaking

Johannes Tonollo, Meaningful Transitions - http://www.ui-transitions.com

Nature

Context

Temporal

Metaphor of physical

physical

Symbolic

Abstract

In-context

No-context

Discrete

Continuous

User defined Motion Gestures for Mobile Interaction - J. Ruiez, Y. Li, E. Lank

Action Scope

Page 52: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy

To a more abstract modelTaxonomy and categories help us in organizing existing patterns but understanding

the wide picture allows us to envision new behaviours in a more organic way.

ActivePassive

Time

Space

Page 53: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy

Passive interactionThe system is waiting for the user input; it's elaborating an autonomus process or it's triggering

the user for activation / feedback on the system status.

Automatic reactionSystem activation

Navigation modelSpace explanation

ActivePassive

Time

Space

Page 54: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy

Active interactionsThe system is reacting to the user input (direct & indirect actions); reporting feedback on the human action

or feedforward for the next interaction; revealing extra space and enabling UI manipulation

System feedbackUser feedforward

Augmented UIObject control

Passive Active

Time

Space

Page 55: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy

How to choose the right pattern?

Context of interaction

Nat

ure

of a

ctio

nsit's impossible to set a general rule, but designers should use motion according to the context

of interaction and consistently with the nature of actions across the overall service

Passive

Time

Space

Active

Automatic reactionSystem activation

Navigation modelSpace explanation

System feedbackUser feedforward

Augmented UIObject control

Page 56: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations Motion taxonomy

Context of interaction

Nat

ure

of a

ctio

nsMotion behaviours can increase and extend usability but in many cases a pervasive, but coordinate, use of

them can give a signature brand experience to the service, improving UX and product memorability.

Request user attention

Trigger user action

Confirm user action

User manipulate the interface

Flipboard

Clear

Design a memorable Signature Experience

Page 57: Design in motion. The new frontier of interaction design

MOTION INTERACTIONTOOLS & PRACTICE

Page 58: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The right tool

Give me a lever and I can move the world.

ARCHIMEDE  DI  SIRACUSA

Page 59: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Make it Real & ShiningUser Experience encompasses all aspects of the end-user's interaction. Sketching the UX it's all about emotional storytelling and prototyping

the user interaction in a realistic way

Motion interaction foundations What is the right tool?

Page 60: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Concept & sketch

Motion prototype

Interactive prototype

Explain motion

Our tools

How we can visualize motion behaviours

and choose the right tool?

Motion interaction foundations What is the right tool?

Page 61: Design in motion. The new frontier of interaction design

High fidelityDevelopement

Low FIdelityConcept evaluation

There is no such thing as high or low fidelity,

only appropriate fidelity that allows you to achieve the goals you've set

for doing a prototype

The motion designer toolkit

 Hand  Sketch

A:er  EffectsBrief  /  Paper  protoKeynote

Adobe  Edge

Css  frameworkFrame.js

Motion interaction foundations What is the right tool?

Quarz  composer  VVVV

Interac2vedocumenta2on

Mo2onto  code

ProductStorytelling

Concept & sketch Motion prototype Explain motionInteractive prototype

Design in Motion. The new frontier of interaction design

Page 62: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Concept & sketch

Motion interaction foundations What is the right tool?

Protosketchhttps://protosketch.uistencils.com/

Paper sketch & prototye

Low fidelity / Low interaction

Page 63: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Concept & sketchKeynote

Motion interaction foundations What is the right tool?

Keynote app prototypehttp://www.lukew.com/ff/entry.asp?1171

Keynote

Medium fidelity / Low interaction

Page 64: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Concept & sketch

Motion interaction foundations What is the right tool?

Brief / InVision Apphttp://giveabrief.com/ - http://www.invisionapp.com

Brief / In Vision

Medium fidelity / Medium interaction

Page 65: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool?

AE: UI Animation Designhttp://goo.gl/PPEO7s

After Effects

High fidelity / Low interaction

Motion prototype

Page 66: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion prototype

Motion interaction foundations What is the right tool?

High fidelity / Medium interaction

Edge Animate / Edge reflow

Page 67: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool?

Cyclops / Framer JS

https://github.com/Instrument/cyclops http://www.framerjs.com/index.html

Cyclops & Framer Js

High fidelity / Medium interaction

Motion prototype

Page 68: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool?

Quarz composer / VVVV

High fidelity / High interactionOrigami / VVVV

http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/

Motion prototype

Page 69: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Explain motion

Motion interaction foundations What is the right tool?

Interactive documentation

High fidelity / Low interaction

Scrolling

Page 70: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool?

Explain motion

Concept Storytelling

High fidelity / Low interactionBeacon, Frog NY

http://www.frogdesign.com/work/reinventing-the-payphone.html

Page 71: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

What is the best tool?Agile methodology needs a different design workflow

Motion interaction foundations What is the right tool?

Research Concept

Wireframe Visual

Develop

User test

PrototypeSketch

Review

Page 72: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The right tool is the one that helps youcommunicate your concept

We need to explain complex problems & big project in a simple way and test

if they're clear and meaningful to people.

There is no perfect tool

Motion interaction foundations What is the right tool?

Functional prototypeConcept experience

 Hand  Sketch A:er  effectBrief  /  Paper  protoKeynote Adobe  edge Css  frameworkFrame.js

Quarz  composer  VVVV

Interac2vedocumenta2on

Mo2on  to  code ProductStorytelling

Page 73: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Motion interaction foundations What is the right tool?

Research Concept

Wireframe Visual

Develop

User test

PrototypeSketch

Review

How can we deliver motion behaviours?From concept design to market ready solution

Page 74: Design in motion. The new frontier of interaction design

Coding and testing in real time a

design solution, to highlight

technology or UX/Interaction related

problems on the go.

Understanding from the beginning

the complexity of motion dynamics

It is always a good feeling not to be

the last step in the production/design

process, and this will lead to better

products. As soon as you have a clear

motion vision, you can also

understanding the development effort.

a Designer a developer

What is the right tool?Motion interaction foundations

Design with codeUnderstanding the platform constrains

to evaluate better the real effort to produce motion

Page 75: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

The future is already here.It's just not evenly distributed.

WILLIAM  GIBSON

Let's do it

Page 76: Design in motion. The new frontier of interaction design

FURTHER READING

Page 77: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design Further reading

The Illusion of Life: Disney animation

Fran Thomas, Ollie Johnston, 1995

Designing Interfaces

Jenifer Tidwel, 2000

Designing gestural interfaces

Dan Saffer, 2007

Page 78: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Design & CodeDesign principles Motion resource Motion patterns

Emo2on  and  Mo2on:  Games  as  Inspira2on  for  Shaping  the  Future  of  Interface

http://katherineinterface.com/isbisterinteractions.pdf

Articles & Insights

The  Basic  of  Mo2on  Design

https://vimeo.com/7440725

Anima2on:  from  cartoons  to  the  User  Interface

http://selflanguage.org/_static/published/animation.pdf

Transi2onal  interfaces

https://medium.com/design-ux/926eb80d64e3

Capp2vate:  a  mo2on  design  library

http://capptivate.co/

UI  Anima2ons:  a  tumblr  collec2on  of  UI  paTerns

http://ui-animations.tumblr.com/

The  Guide  to  Css  Anima2on  and  principles

http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/

Animate.css

https://daneden.me/animate/

W3C  CSS3  Anima2on

http://www.w3schools.com/css/css3_animations.asp

Design in Motion. The new frontier of interaction design Further reading

The  Mo2on  Fron2er

https://medium.com/design-ux/8802af8012eb

UI  Anima2on  and  UX:  A  not  so  secret  friendship

http://alistapart.com/article/ui-animation-and-ux-a-not-so-secret-friendship

UI  Anima2ons:  a  tumblr  collec2on  of  UI  paTerns

http://ui-animations.tumblr.com/

Page 79: Design in motion. The new frontier of interaction design

Design in Motion. The new frontier of interaction design

Thanks!@myinteraction

to continue the discussion!

Oblivion GFXhttps://vimeo.com/64377100