I began college as a film student. I’ve always loved storytelling, particularly visual storytelling in the forms of film and animation. Well-made films show us that they can drive engagement, communicate in subtle ways, change attitudes, and inspire us to try to change our lives.
Films succeed in evoking responses and engaging audiences only with a combination of well-written narrative and effective storytelling technique. It’s the filmmaker’s job to put this together. To do so they’ve developed processes, tools and techniques that allow them to focus attention, emphasize information, foreshadow and produce the many elements that together comprise a well-told story.
We’re responsible for creating products that aren’t just easy to use, but that people appreciate using. It stands to reason that the methods used in films to communicate with and engage audiences can serve as inspiration for designers.
With this presentation, we'’ll revisit the topic of using stories in design and expand on the technical aspects used in film to communicate. We’ll look at some tools used in film such as: cinematic patterns, beat sheets, and storyboards. We’ll consider why they’re used and how we might look to them for inspiration.
4. Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Sound
Editing
Interface
Design
Visual
Design
Content
IxD
Usability &
Human Factors
5. Organization & Orchestration
How do you coordinate something with so many
moving parts to achieve desired effect?
Actors
Sound
Dialogue
Action
Scenery
& Sets
Editing
Cinematography
40. Written by: Bill Scott & Theresa Neil
Transitions
• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand
personality
41.
42. When adding motion to design
elements, think of them as if they
are physical objects.
43. “Anything we can do to make
something digital appear as a
physical object is delightful.”
Adam Lisagor | Sandwich Video
Video as User Experience at UX Week 2011
44.
45. Slow In & Slow Out
Squash & Stretch
Anticipation
Staging
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Timing
Exaggeration
Solid Drawing
Follow Through &
Overlapping Action
Appeal
46. Anticipation
Straight Ahead Action
& Pose-to-pose
Arcs
Secondary Action
Solid Drawing
Appeal
Squash & Stretch
Staging
Slow In & Slow Out
Timing
Exaggeration
Follow Through &
Overlapping Action
55. Top to Bottom: Anticipation & Inevitability
Bottom to Top: Struggle & Otherworldliness
56. Written by: Bill Scott
& Theresa Neil
Transitions
• Show relationships
between elements
• Cause & effect
• Direct attention
• Support brand
personality
• Communicate the
character of your
design or design
elements
66. Cinematic
Storytelling
Jennifer Vas Sijll
http://amzn.com/0321725522
The Illusion
of Life
Frank Thomas and Ollie
Johnston
http://amzn.com/0786860707
Directing the
Story
Francis Glebas
http://amzn.com/0240810767
Designing
Web
Interfaces
Bill Scott and Theresa Neil
http://amzn.com/0596516258
67. Reframing UX Design
Peter Merholz
http://www.peterme.com/2012/09/04/reframing-ux-design/
Thinking Like a Storyteller
Cindy Chastain
https://vimeo.com/9686849
Video as User Experience
Adam Lisagor
https://vimeo.com/30107169
Filmmaking and Design: More than just analogous
Adam Connor
http://toobigtotweet.tumblr.com/post/31461951405/filmmaking-and-design-more-than-just-analogous
Software is a movie, not a building
Tim McCoy
http://www.cooper.com/journal/2009/03/feedback_loops.html
Cinematic Interaction Design
Sarah Allen
http://www.slideshare.net/sarah.allen/cinematic-interaction-design