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

Getting Animation Done

Val Head
September 22, 2016

Getting Animation Done

To make good animation decisions you need to use different deliverables than you do for static designs. The way you present and evaluate your animation ideas with your team can make all the difference in getting high quality animation into the end product. This talk is all about when and how to discuss animation in a team setting for the best results.

Val Head

September 22, 2016
Tweet

More Decks by Val Head

Other Decks in Design

Transcript

  1. Getting
    Animation
    Done!
    Val Head @vlh

    View full-size slide

  2. My ideas never
    get made!

    View full-size slide

  3. It’s always left
    to the end!

    View full-size slide

  4. Typical Web Design Process
    based on: http://blog.invisionapp.com/small-design-budget/
    STRATEGY DESIGN
    DEVELOPMENT
    &
    TESTING
    Animation!
    Animation! Animation!
    UGH!
    Grumble!
    Grrrr!

    View full-size slide

  5. Communication &
    Documenting
    Animation

    View full-size slide

  6. Improving Animation Communication
    Shared Vocabulary provides a common language to discuss and evaluate
    Established Animation Values give you a common foundation
    Documenting saves time and empowers others

    View full-size slide

  7. Talk about animation early, often, and
    get as specific as you can

    View full-size slide

  8. Deliverables

    THE THINGS WE USE TO SHOW WHAT WE MEAN

    View full-size slide

  9. Storyboards & Sketches
    EXPLORATION

    View full-size slide

  10. Storyboards & Sketches

    View full-size slide

  11. Storyboards & Sketches
    Where is there potential for animation in this flow?
    How will these elements load into view?
    How could we animate between views logically?
    I have this crazy idea…
    QUICKLY COME UP WITH MANY ANSWERS

    View full-size slide

  12. TOOLS
    Storyboards & Sketches
    Anything you can draw with goes!

    View full-size slide

  13. Storyboards & Sketches
    TRIGGER
    WHAT TO DRAW
    ACTION QUALITY
    Credit: Eva-Lotta Lamb
    What starts the action?
    Draw or describe in words
    What takes place?
    Draw in as many frames as needed
    How does it happen?
    Describe in words
    1 2 3

    View full-size slide

  14. Motion Comps
    ANIMATION DETAIL

    View full-size slide

  15. •Videos that play back the details of how animation looks 

    and behaves
    •High fidelity of animation representation (usually)
    •No interactivity

    •Present and discuss
    DEFINED
    Motion Comps

    View full-size slide

  16. TOOLS
    Motion Comps
    Wide open canvas,
    invent what you need
    Useful presets to
    expand upon

    View full-size slide

  17. QUESTIONS THEY HELP ANSWER
    Motion Comps
    Exactly how should this animation look?
    Which items should move where and when?
    Do the animation qualities reflect our brand?

    View full-size slide

  18. A motion comp from Dan Mall

    View full-size slide

  19. •Duration and delay values
    •Details of the easing used
    •Repeat values, iteration counts
    •Notes on how animations interact or are triggered
    THE HAND OFF
    Motion Comps

    View full-size slide

  20. Interactive Prototypes
    INTERACTION DETAIL

    View full-size slide

  21. What will the interaction be like to use?
    Does the animation feel right in context?
    How will animations interact with input or real data?
    Interactive Prototypes

    View full-size slide

  22. Interactive Prototypes
    •High fidelity and interactive
    •Can look and feel like “the real thing”
    •Evaluate behaviour

    •Testable

    View full-size slide

  23. Interactive Prototypes
    TOOLS
    Smart defaults to customize
    Wide open canvas,
    invent what you need

    View full-size slide

  24. Deliverables
    •Share internally or externally depending on goals
    •Make a few or as many as you need
    •Get feedback & input along the way

    View full-size slide

  25. Define & Document

    SAVING FUTURE YOU TIME AND EFFORT

    View full-size slide

  26. Defining Your Brand in Motion
    DEFINE

    View full-size slide

  27. •Use brand definitions to inform motion decisions
    •Build off of Brand Pillars, Voice & Tone, Experience Pillars
    •Extract animation design guidelines from there
    Defining Your Brand in Motion

    View full-size slide

  28. Defining Your Brand in Motion
    1
    Brand personality 

    & 

    point of view
    Prototype,
    explore,
    iterate
    2
    Extract animation 

    design decisions
    3

    View full-size slide

  29. Your animation design values provide the basis
    for your design system’s point of view.

    View full-size slide

  30. UI animation should be used to inform and support the design.
    UI animations should be living, lively, and considered.
    UI animations should be cohesive, not homogeneous, as a group.
    Establish Animation Design Values


    View full-size slide

  31. Documenting Animation Decisions
    DOCUMENT

    View full-size slide

  32. Animation Building Blocks
    •Durations - ranges, rhythm
    •Properties that are animated
    •Easing values used
    •Physical space - weight and mass, depth and layers

    View full-size slide

  33. Durations (Timing)
    •Shorter durations for simple animations like fades or colour changes
    •Longer durations for large movements like page transitions, drag-and-
    drop, drawers, content entrances from offscreen areas
    •Formalize a rhythm for your durations
    ANIMATION BUILDING BLOCKS

    View full-size slide

  34. Durations (Timing)
    ANIMATION BUILDING BLOCKS
    100ms 200ms 300ms 400ms
    Hover effects, fading, scaling
    Large moves, complex easing

    View full-size slide

  35. Durations (Timing)
    ANIMATION BUILDING BLOCKS
    animation: fade 

    cubic-bezier(.19,.59,.62,1) 200ms both;
    Fade In/Out

    View full-size slide

  36. Show the code.
    Make it practical.

    View full-size slide

  37. Easing Values
    •Select custom easing values for the basics 

    like ease-in, ease-out, ease-in-out
    • Different content/objects need different curves (interactive vs. not)
    •Establish an easing pallet for hierarchy and expressiveness
    ANIMATION BUILDING BLOCKS

    View full-size slide

  38. Subtle motion
    in empty states
    A Spectrum of Animation
    ANIMATION BUILDING BLOCKS
    “It’s just the static
    web”
    A “Weee! Look 

    at me!!” app
    Error messages,
    Repetitive tasks
    Achievements,
    Milestones

    View full-size slide

  39. Define Physical Space
    •Consistent “forces” of gravity
    •How many layers to your interface?
    •The distance between layers informs how transitions should occur
    between them.
    ANIMATION BUILDING BLOCKS

    View full-size slide

  40. Named Animations
    •Names can be anything that is meaningful to you
    •Show examples & descriptions to define them in your docs
    •Call out and define classic principles that you use
    YOUR ANIMATION VOCABULARY

    View full-size slide

  41. Keeping It Real

    HOW TO REALLY GET ANY OF THIS DONE

    View full-size slide

  42. Be an Undercover Animation Hero!
    •Encourage your team or stakeholders to see the value in animation 

    as a design tool
    •Share examples, model discussion
    •Small changes over time
    •Make the thing. You don’t have to wait for permission
    KEEPING IT REAL

    View full-size slide

  43. You don’t have to ask for permission.

    View full-size slide

  44. Designing Interface Animation
    designinginterfaceanimation.com

    View full-size slide

  45. webanimationworkshops.com

    View full-size slide

  46. Thank You!
    Join the crew: uianimationewsletter.com
    Let’s chat on twitter: @vlh

    View full-size slide