Save 37% off PRO during our Black Friday Sale! »

Workshop: Prototyping animation

Fe88f3575a1a4c8b8022b922c1d1b403?s=47 Marie Schweiz
February 22, 2016

Workshop: Prototyping animation

A workshop at the UX academy Praha, CZ
How to prototype animations with only post its and a few notes. Structured by action and meaning. Ready for development.

http://dvsty.com/2016/02/22/workshop-prototyping-animation-prague-cz/

Fe88f3575a1a4c8b8022b922c1d1b403?s=128

Marie Schweiz

February 22, 2016
Tweet

Transcript

  1. Protot ping Animation by Marie Schweiz senior designer at dvsty.com

    studios Berlin
  2. Introduction 5 minutes please

  3. Hello Praha!

  4. Todays Workshop Lets get to know each other. This is

    Petr, he organized your workshop and i'm Marie. I'm very glad to meet you.
  5. Schedule 10:00 - 10:30 Basic understanding for Storyboards 10:30 -

    11:30 Prepare your Story and Scribbels 11:30 - 12:00 Recap Lunch 13:00 - 13:30 find animation patterns 13:30 - 14:00 Introduction into prototyping animation 14:00 - 15:30 Prototype 15:30 - 16:00 Catchup 17:00 - present your Teamwork
  6. Storyboards

  7. How do they look like

  8. Tell a story, frame by frame • touchpoints • painpoints

    • context • branding opportunity • find key screens and relationships • iteration, help you think
  9. For experts: The moment for positive branding

  10. What we are doing today BIG STORY USERJOURNEY USECASE ANIMATION

  11. Became sick Went to the doc get treated ask for

    a report Get the report understood by mbox Became sick again on a conference Went to a new doctor Shared my latest medical report Big story
  12. Userjourney

  13. Userjourney

  14. Userjourney

  15. Usecase

  16. None
  17. None
  18. Animation

  19. None
  20. None
  21. 0:40

  22. None
  23. Using a link to a bigger context. A doctor you

    don't know, never saw the app, maybe using another OS, has maybe no time and needs to navigate through information. result, introduction of a scrollable view, calendar.
  24. None
  25. Prototyping Animations

  26. from A to B To find a fitting animation i

    think about the goal. What it should deliver and teach. An animation can lead users and introduce functionality.
  27. The Principles i use - relationship between two objects -

    change status of an object - connect branding to tasks - lead user interaction - Information architecture
  28. Marie Schweiz for dvsty.com design studio, Berlin Germany lead interaction

  29. Marie Schweiz for dvsty.com design studio, Berlin Germany Understand feedback

  30. Marie Schweiz for dvsty.com design studio, Berlin Germany teach information

    architecture
  31. Marie Schweiz for dvsty.com design studio, Berlin Germany Relationships

  32. ii Marie Schweiz for dvsty.com design studio, Berlin Germany communicate

    the brand
  33. ii Marie Schweiz for dvsty.com design studio, Berlin Germany -

    relationship between two objects - change status of an object - connect branding to tasks - lead user interaction - Information architecture
  34. timeline Today, we are going to give your animation a

    story
  35. Protot ping Animation by Marie Schweiz senior designer at dvsty.com

    studios Berlin