Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Design in Motion. The new frontier of Interaction Design

Design in Motion. The new frontier of Interaction Design

Animation can explain behaviours better than thousand of words that’s why interaction designer should learn from motion designer.

Technological advances have allowed, in the last few years, a big step forward in the dynamic behaviors and interactions patterns that we used to do with software in the past. Motion is one of the key element of this change but how can we imagine & sketch the way something feels & reacts? Starting from the basic of motion design, we’ll discover a set of “standard” motion patterns and how we can sketch & use them in a design project to increase affordance, to simplify complex interactions and to give a new dynamic brand identity to our products.

Presented @Interaction 14, Amsterdam
http://interaction14.ixda.org/program/saturday/241-design-in-motion-the-new

Talk here:
https://vimeo.com/86763511

Antonio De Pasquale

February 08, 2014
Tweet

More Decks by Antonio De Pasquale

Other Decks in Design

Transcript

  1. Design in Motion
    The new frontier
    of Interaction design
    Antonio  De  Pasquale
    Senior Interaction Designer at frog
    @myinteraction

    View full-size slide

  2. My name is Antonio De Pasquale
    I'm a Senior Interaction Designer at frog Milan
    A little about me
    I'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

    View full-size slide

  3. Interaction Vs Motion
    What have this two worlds in common?

    View full-size slide

  4. 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?

    View full-size slide

  5. Design in Motion. The new frontier of interaction design
    Interaction & Motion
    What have this two worlds in common?

    View full-size slide

  6. Design in Motion. The new frontier of interaction design
    A wide picture of
    User Experience Design
    Communication
    Interaction & IA
    Motion
    Design in Motion. The new frontier of interaction design

    View full-size slide

  7. Design in Motion. The new frontier of interaction design
    Interaction Communication
    Interaction » Communication » Motion
    Objects 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

    View full-size slide

  8. 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

    View full-size slide

  9. Design in Motion. The new frontier of interaction design
    Design in Motion
    The new frontier
    of Interaction Design
    Introduction
    to Motion Interfaces
    Motion Design & Digital Artifacts
    Transitional interfaces
    Motion interaction foundations:
    tools & practice
    From concept to detail design
    What is the right tool?
    Motion interaction foundations:
    theory & methods
    Animation principles
    Motion pattern taxonomy

    View full-size slide

  10. Design in Motion. The new frontier of interaction design
    INTRODUCTION
    TO MOTION INTERFACES

    View full-size slide

  11. 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)

    View full-size slide

  12. Design in Motion. The new frontier of interaction design
    Introduction Motion Design & Digital artifacts
    The beginning
    Games 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

    View full-size slide

  13. Design in Motion. The new frontier of interaction design
    Web 1.0: Java & Gif
    At 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

    View full-size slide

  14. Design in Motion. The new frontier of interaction design
    The Golden Age of Flash
    From a simple animation tool, Flash changed the way
    designers experience with motion & interaction
    2Advacend, 2000
    Screen transition, Loading screen
    http://v2.2a-archive.com/flashindex.htm
    TheVoid, 1998
    Animated menu, interactive objects
    http://www.thevoid.co.uk/index.html
    LeoBurnet, 2006
    3d navigation, motion detection
    http://v2.2a-archive.com/flashindex.htm
    Introduction Motion Design & Digital artifacts

    View full-size slide

  15. Design in Motion. The new frontier of interaction design
    Introduction Motion Design & Digital artifacts
    LeoBurnet, 2006
    3d navigation, motion detection
    http://v2.2a-archive.com/flashindex.htm

    View full-size slide

  16. 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 menu
    Card 3d parallax

    View full-size slide

  17. 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

    View full-size slide

  18. Design in Motion. The new frontier of interaction design
    Gesture & Motion
    Gesture 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

    View full-size slide

  19. Design in Motion. The new frontier of interaction design
    The Future
    New desktop physical control, css4 html6, smartphone gesture
    recognition, hands & fingers tracking...
    Introduction Transitional interfaces

    View full-size slide

  20. Design in Motion. The new frontier of interaction design
    Native animation
    in app gesture
    1993 2005 2007 Today
    Interactive controls
    Full animation
    engine
    3d, video,
    cam & motion tracking
    Pong, 1978
    Gif, 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
    Interactive
    UI elements
    Webkit
    Technology
    Motion
    iOs 7, 2013
    Web Native
    animation
    Javascript
    Safari + Webkit
    Jquery
    2000
    Flash AS.20
    Natural UI
    Xbox Kinect
    Gestural interaction
    Advanced motion
    patterns
    Introduction Transitional interfaces

    View full-size slide

  21. Design in Motion. The new frontier of interaction design
    MOTION INTERACTION
    THEORY & METHODS

    View full-size slide

  22. 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

    View full-size slide

  23. 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, 1993
    Animation: from cartoon to the user interface (Paper)
    http://hci.stanford.edu/courses/cs448b/papers/Chang_AnimationInUI_UIST93.pdf

    View full-size slide

  24. 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

    View full-size slide

  25. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Animation princples

    View full-size slide

  26. Design in Motion. The new frontier of interaction design
    Disney Animation Principles
    Squash and stretch
    Anticipation
    Staging
    Straight ahead / pose-to-pose
    Follow through / overlapping action
    Slow in and out
    12 principles
    Arcs
    Secondary action
    Timing
    Exaggeration
    Solid Drawing
    Appeal
    Motion interaction foundations Animation princples

    View full-size slide

  27. 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 Soft
    Abstract vs Organic
    Fade in/out vs Moving blocks
    Brand experience

    View full-size slide

  28. Design in Motion. The new frontier of interaction design
    Squash & stretch
    Page turn to reveal menu
    http://capptivate.co/?s=circa
    Flipping pages
    http://www.macitynet.it/flipboard-web-magazine/
    External menu navigation
    http://capptivate.co/2013/11/23/airbnb/
    Motion interaction foundations Animation principles

    View full-size slide

  29. Design in Motion. The new frontier of interaction design
    Increase affordance
    Anticipate hidden interactions
    Tutorial & help
    Explain 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

    View full-size slide

  30. Design in Motion. The new frontier of interaction design
    Anticipation
    Card movement
    http://capptivate.co/2013/11/23/potluck/
    Revealing additional function
    http://capptivate.co/?s=clear
    Horizontal slide to unlock
    http://youtu.be/3JlOOO14oSU
    Motion interaction foundations Animation principles

    View full-size slide

  31. 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 trigger
    Display active object in the interface
    React to user activity

    View full-size slide

  32. Design in Motion. The new frontier of interaction design
    Staging
    Motion interaction foundations
    Message preview
    http://goo.gl/fZABUf
    Focus on the active area
    http://vimeo.com/66395692
    Animation principles

    View full-size slide

  33. 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
    Directions
    Content position
    Explaining IA
    Reinforcing actions
    Helps exploration
    Animation principles

    View full-size slide

  34. Design in Motion. The new frontier of interaction design
    Straight ahead and pose to pose
    Motion interaction foundations
    Step by step navigation
    http://capptivate.co/2014/01/18/timbre-3/
    Section transition
    http://capptivate.co/2014/01/18/epiclist/
    Quick multiple fruit cut
    http://goo.gl/zEOw55
    Animation principles

    View full-size slide

  35. 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 pattern
    Show active areas / functions
    Natural transitions
    Set time to the experience

    View full-size slide

  36. Design in Motion. The new frontier of interaction design
    Follow through and overlapping action
    Motion interaction foundations
    Content loaded
    http://capptivate.co/2013/09/30/phq4-3/
    Revealing menu
    http://capptivate.co/2013/08/14/your-extra-life/
    Tile transition
    http://www.bobborries.com/Funnies/Windows8zoom.gif
    Animation principles

    View full-size slide

  37. 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 interactions
    Change of status
    Revealing new information
    Showing extra controls
    Start/End of a transition state

    View full-size slide

  38. Design in Motion. The new frontier of interaction design
    Slow in Slow out
    Motion interaction foundations
    Open/close main navigation
    http://capptivate.co/2013/11/07/breezi/
    Panel focus switch
    http://capptivate.co/2013/09/18/memoir/
    List scrolling
    http://capptivate.co/2013/07/12/making-3/
    Animation principles

    View full-size slide

  39. 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 directions
    Explain possible interactions
    Show loading and time
    Anticipate behaviours

    View full-size slide

  40. Design in Motion. The new frontier of interaction design
    Arcs
    Motion interaction foundations
    Animated infographics
    http://capptivate.co/2013/06/23/yahoo-weather-3/
    Radial navigation system
    http://capptivate.co/2013/07/08/applauze/
    Data/Map content loading
    http://capptivate.co/2013/06/25/ribbon//
    Animation principles

    View full-size slide

  41. 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 change
    Switch content focus
    Reinforcing transition
    Keep focus on device status

    View full-size slide

  42. Design in Motion. The new frontier of interaction design
    Secondary actions
    Motion interaction foundations
    iOs7 closing apps
    http://www.youtube.com/watch?v=h8Cc1NqGTUI
    Control center bump
    http://goo.gl/vUOKYm
    Folder position reset
    http://goo.gl/JTtFnt
    Animation principles

    View full-size slide

  43. 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 process
    Object activation
    Accepted interactions
    Interaction speed

    View full-size slide

  44. Design in Motion. The new frontier of interaction design
    Timing
    Motion interaction foundations
    Tapping time
    http://capptivate.co/2013/08/02/listen-3/
    Loading results
    http://www.alitalia.com
    Content loading
    http://capptivate.co/2014/01/09/yahoo-news-digest-3/
    Animation principles

    View full-size slide

  45. 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 interaction
    Action trigger
    Signature experience

    View full-size slide

  46. Design in Motion. The new frontier of interaction design
    Exageration
    Motion interaction foundations
    Keynote
    example
    Keynote
    example
    Reducing application
    http://i.imgur.com/WfWyJA5.gif
    Hyper zoom
    http://capptivate.co/2013/06/27/lumosity/
    Remove a match
    http://i.imgur.com/wbIWuKD.gif
    Animation principles

    View full-size slide

  47. 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 extension
    Good for Mobile
    Extra space for info
    3d as an additional info layer

    View full-size slide

  48. Design in Motion. The new frontier of interaction design
    Solid drawing
    Motion interaction foundations
    Revealing selectors CSS Card flip
    https://daneden.me/animate/
    Revealing extra space
    http://capptivate.co/2013/11/19/445/
    Animation principles

    View full-size slide

  49. 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
    Personality
    Emotional experience
    Signature experience

    View full-size slide

  50. 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 weather
    http://i.imgur.com/IoWbato.gif
    Trash ticket
    http://i.imgur.com/nDoQTEI.gif

    View full-size slide

  51. 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

    View full-size slide

  52. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Motion taxonomy
    To a more abstract model
    Taxonomy and categories help us in organizing existing patterns but understanding
    the wide picture allows us to envision new behaviours in a more organic way.
    Active
    Passive
    Time
    Space

    View full-size slide

  53. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Motion taxonomy
    Passive interaction
    The 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 reaction
    System activation
    Navigation model
    Space explanation
    Active
    Passive
    Time
    Space

    View full-size slide

  54. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Motion taxonomy
    Active interactions
    The 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 feedback
    User feedforward
    Augmented UI
    Object control
    Passive Active
    Time
    Space

    View full-size slide

  55. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Motion taxonomy
    How to choose the right pattern?
    Context of interaction
    Nature of actions
    it'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 reaction
    System activation
    Navigation model
    Space explanation
    System feedback
    User feedforward
    Augmented UI
    Object control

    View full-size slide

  56. Design in Motion. The new frontier of interaction design
    Motion interaction foundations Motion taxonomy
    Context of interaction
    Nature of actions
    Motion 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

    View full-size slide

  57. MOTION INTERACTION
    TOOLS & PRACTICE

    View full-size slide

  58. 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

    View full-size slide

  59. Design in Motion. The new frontier of interaction design
    Make it Real & Shining
    User 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?

    View full-size slide

  60. 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?

    View full-size slide

  61. High fidelity
    Developement
    Low FIdelity
    Concept 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  Effects
    Brief  /  Paper  proto
    Keynote
    Adobe  Edge
    Css  framework
    Frame.js
    Motion interaction foundations What is the right tool?
    Quarz  composer  
    VVVV
    Interac2ve
    documenta2on
    Mo2on
    to  code
    Product
    Storytelling
    Concept & sketch Motion prototype Explain motion
    Interactive prototype
    Design in Motion. The new frontier of interaction design

    View full-size slide

  62. Design in Motion. The new frontier of interaction design
    Concept & sketch
    Motion interaction foundations What is the right tool?
    Protosketch
    https://protosketch.uistencils.com/
    Paper sketch & prototye
    Low fidelity / Low interaction

    View full-size slide

  63. Design in Motion. The new frontier of interaction design
    Concept & sketch
    Keynote
    Motion interaction foundations What is the right tool?
    Keynote app prototype
    http://www.lukew.com/ff/entry.asp?1171
    Keynote
    Medium fidelity / Low interaction

    View full-size slide

  64. Design in Motion. The new frontier of interaction design
    Concept & sketch
    Motion interaction foundations What is the right tool?
    Brief / InVision App
    http://giveabrief.com/ - http://www.invisionapp.com
    Brief / In Vision
    Medium fidelity / Medium interaction

    View full-size slide

  65. Design in Motion. The new frontier of interaction design
    Motion interaction foundations What is the right tool?
    AE: UI Animation Design
    http://goo.gl/PPEO7s
    After Effects
    High fidelity / Low interaction
    Motion prototype

    View full-size slide

  66. 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

    View full-size slide

  67. 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

    View full-size slide

  68. Design in Motion. The new frontier of interaction design
    Motion interaction foundations What is the right tool?
    Quarz composer / VVVV
    High fidelity / High interaction
    Origami / VVVV
    http://vimeo.com/85578380 - https://github.com/PrototypingInterfaces/
    Motion prototype

    View full-size slide

  69. 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

    View full-size slide

  70. Design in Motion. The new frontier of interaction design
    Motion interaction foundations What is the right tool?
    Explain motion
    Concept Storytelling
    High fidelity / Low interaction
    Beacon, Frog NY
    http://www.frogdesign.com/work/reinventing-the-payphone.html

    View full-size slide

  71. 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
    Prototype
    Sketch
    Review

    View full-size slide

  72. Design in Motion. The new frontier of interaction design
    The right tool is the one that helps you
    communicate 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 prototype
    Concept experience
     Hand  Sketch A:er  effect
    Brief  /  Paper  proto
    Keynote Adobe  edge Css  framework
    Frame.js
    Quarz  composer  
    VVVV
    Interac2ve
    documenta2on
    Mo2on  to  code Product
    Storytelling

    View full-size slide

  73. Design in Motion. The new frontier of interaction design
    Motion interaction foundations What is the right tool?
    Research Concept
    Wireframe Visual
    Develop
    User test
    Prototype
    Sketch
    Review
    How can we deliver motion behaviours?
    From concept design to market ready solution

    View full-size slide

  74. 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 code
    Understanding the platform constrains
    to evaluate better the real effort to produce motion

    View full-size slide

  75. 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

    View full-size slide

  76. FURTHER READING

    View full-size slide

  77. 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

    View full-size slide

  78. Design in Motion. The new frontier of interaction design
    Design & Code
    Design 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/

    View full-size slide

  79. Design in Motion. The new frontier of interaction design
    Thanks!
    @myinteraction
    to continue the discussion!
    Oblivion GFX
    https://vimeo.com/64377100

    View full-size slide