$30 off During Our Annual Pro Sale. View Details »

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 Slide

  2. Matthew Crist
    @matthewcrist

    View Slide

  3. View Slide

  4. Animation

    View Slide

  5. :blink:

    View Slide

  6. View Slide

  7. :yellow fade:

    View Slide

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

    View Slide

  10. 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 Slide

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

  12. 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 Slide

  13. 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 Slide

  14. 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 Slide

  15. View Slide

  16. And then…

    View Slide

  17. View Slide

  18. Material Design

    View Slide

  19. That is the logo
    for CSS3

    View Slide

  20. View Slide

  21. CSS ❤️ Javascript

    View Slide

  22. View Slide

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

    View Slide

  24. Animation is a utility.

    View Slide

  25. Animation shows relationships.

    View Slide

  26. Animation can explain.

    View Slide

  27. Animation hides bottlenecks.

    View Slide

  28. Less of this.

    View Slide

  29. More of this.

    View Slide

  30. Prototype early.
    Prototype often.

    View Slide

  31. Some things to keep in mind…

    View Slide

  32. Animations should be quick

    View Slide

  33. Animations should be non-blocking

    View Slide

  34. But wait…There’s more…

    View Slide

  35. “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 Slide

  36. 9 Old Men

    View Slide

  37. 9 Old Men
    Frank Thomas Ollie Johnston

    View Slide

  38. View Slide

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

    View Slide

  40. With great animations
    comes great responsibility.

    View Slide

  41. fin.

    View Slide