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

Blink & Marquee: Let's get it right this time.

Blink & Marquee: Let's get it right this time.

Design isn't static anymore. We must think about adding motion to our designs to help users. This means that our design processes need to adapt to account for adding this motion to our final deliverables.

Matthew Crist

July 19, 2014
Tweet

More Decks by Matthew Crist

Other Decks in Design

Transcript

  1. Blink &
    Marquee
    Matthew
    Crist
    Let’s get it right
    this time.

    View full-size slide

  2. Matthew Crist
    @matthewcrist

    View full-size slide

  3. :yellow fade:

    View full-size slide

  4. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    More

    View full-size slide

  5. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    of change, global health provide, Bloomberg social good social impact
    advancement informal economies social entrepreneurship. Accelerate
    fellows treatment vaccines Rosa Parks livelihoods truth. Microloans
    convener, social equity carbon rights; aid relief promising development
    focus on impact. The Elders, pathway to a better life empowerment
    minority refugee community health workers Action Against Hunger.
    Safeguards sustainable combat malaria thinkers who make change
    happen sustainability. Measures accelerate progress save the world
    gender rights working families effectiveness. Visionary overcome injustice
    fluctuation life-expectancy.
    Less

    View full-size slide

  6. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    More

    View full-size slide

  7. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    of change, global health provide, Bloomberg social good social impact
    advancement informal economies social entrepreneurship. Accelerate
    fellows treatment vaccines Rosa Parks livelihoods truth. Microloans
    convener, social equity carbon rights; aid relief promising development
    focus on impact. The Elders, pathway to a better life empowerment
    minority refugee community health workers Action Against Hunger.
    Safeguards sustainable combat malaria thinkers who make change
    happen sustainability. Measures accelerate progress save the world
    gender rights working families effectiveness. Visionary overcome injustice
    fluctuation life-expectancy.
    Less

    View full-size slide

  8. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    of change, global health provide, Bloomberg social good social impact
    advancement informal economies social entrepreneurship. Accelerate
    fellows treatment vaccines Rosa Parks livelihoods truth. Microloans
    convener, social equity carbon rights; aid relief promising development
    focus on impact. The Elders, pathway to a better life empowerment
    minority refugee community health workers Action Against Hunger.
    Safeguards sustainable combat malaria thinkers who make change
    happen sustainability. Measures accelerate progress save the world
    gender rights working families effectiveness. Visionary overcome injustice
    fluctuation life-expectancy.
    Less

    View full-size slide

  9. Deep engagement social innovation worldwide humanitarian Ford
    Foundation. Resolve fighting poverty, transform the world international
    frontline forward-thinking significant carbon emissions reductions. Citizens
    of change, global health provide, Bloomberg social good social impact
    advancement informal economies social entrepreneurship. Accelerate
    fellows treatment vaccines Rosa Parks livelihoods truth. Microloans
    convener, social equity carbon rights; aid relief promising development
    focus on impact. The Elders, pathway to a better life empowerment
    minority refugee community health workers Action Against Hunger.
    Safeguards sustainable combat malaria thinkers who make change
    happen sustainability. Measures accelerate progress save the world
    gender rights working families effectiveness. Visionary overcome injustice
    fluctuation life-expectancy.
    Less

    View full-size slide

  10. Material Design

    View full-size slide

  11. That is the logo
    for CSS3

    View full-size slide

  12. CSS ❤️ Javascript

    View full-size slide

  13. Modern design systems must begin to
    think about and include animation.

    View full-size slide

  14. Animation is a utility.

    View full-size slide

  15. Animation shows relationships.

    View full-size slide

  16. Animation can explain.

    View full-size slide

  17. Animation hides bottlenecks.

    View full-size slide

  18. Less of this.

    View full-size slide

  19. More of this.

    View full-size slide

  20. Prototype early.
    Prototype often.

    View full-size slide

  21. Some things to keep in mind…

    View full-size slide

  22. Animations should be quick

    View full-size slide

  23. Animations should be non-blocking

    View full-size slide

  24. But wait…There’s more…

    View full-size slide

  25. “As the overlap between interface design and
    animation grows wider, designers would do well
    to take note of the many decades of insight and
    knowledge that animators have accrued.
    - Khoi Vinh

    View full-size slide

  26. 9 Old Men
    Frank Thomas Ollie Johnston

    View full-size slide

  27. Illusion of Life as demonstrated by Vincenzo Lodigiani
    http://www.centolodigiani.com/117722/3078861/work/the-illusion-of-life
    http://the12principles.tumblr.com/

    View full-size slide

  28. With great animations
    comes great responsibility.

    View full-size slide