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/

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
18. Animation
21. 0:40
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.
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