Protot ping Animation
by Marie Schweiz
senior designer at dvsty.com
studios Berlin
Slide 2
Slide 2 text
Introduction
5 minutes please
Slide 3
Slide 3 text
Hello Praha!
Slide 4
Slide 4 text
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.
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
Storyboards
Slide 7
Slide 7 text
How do they look like
Slide 8
Slide 8 text
Tell a story, frame by frame
• touchpoints
• painpoints
• context
• branding opportunity
• find key screens and relationships
• iteration, help you think
Slide 9
Slide 9 text
For experts:
The moment for positive branding
Slide 10
Slide 10 text
What we are doing today
BIG STORY
USERJOURNEY
USECASE
ANIMATION
Slide 11
Slide 11 text
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
Slide 12
Slide 12 text
Userjourney
Slide 13
Slide 13 text
Userjourney
Slide 14
Slide 14 text
Userjourney
Slide 15
Slide 15 text
Usecase
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Animation
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
0:40
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
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.
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Prototyping Animations
Slide 26
Slide 26 text
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.
Slide 27
Slide 27 text
The Principles i use
- relationship between two objects
- change status of an object
- connect branding to tasks
- lead user interaction
- Information architecture
Slide 28
Slide 28 text
Marie Schweiz for dvsty.com design studio, Berlin Germany
lead interaction
Slide 29
Slide 29 text
Marie Schweiz for dvsty.com design studio, Berlin Germany
Understand feedback
Slide 30
Slide 30 text
Marie Schweiz for dvsty.com design studio, Berlin Germany
teach
information
architecture
Slide 31
Slide 31 text
Marie Schweiz for dvsty.com design studio, Berlin Germany
Relationships
Slide 32
Slide 32 text
ii
Marie Schweiz for dvsty.com design studio, Berlin Germany
communicate the brand
Slide 33
Slide 33 text
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
Slide 34
Slide 34 text
timeline
Today, we are going to give your animation a story
Slide 35
Slide 35 text
Protot ping Animation
by Marie Schweiz
senior designer at dvsty.com
studios Berlin