Creating responsive and effective digital content VERTICAL STORYTELLING Kyle Henderson | Web Developer Team Lead | UW-Madison Division of Information Technology
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Creating responsive and effective digital content
VERTICAL
STORYTELLING
Kyle Henderson | Web Developer Team Lead | UW-Madison Division of Information Technology
VERTICAL
STORYTELLING
People are inherently
storytellers.
We think, value and act
according to internal
worlds formed and
shaped by stories.
We think, value and act
according to internal
worlds formed and
shaped by stories.
We think, value and act
according to internal
worlds formed and
shaped by stories.
We think, value and act
according to internal
worlds formed and
shaped by stories.
Walter Fisher and the
narrative paradigm
Order
the
book >
“Narration designates a conceptual frame that accounts for all
discourse forms that lay claim to our reason. Life itself, its
interpretation and enactment, is to be understood in narrative terms.
Narration is the master metaphor: We are homo narrans.”
—Walter Fisher, professor emeritus of communication at the Annenberg
School, USC
Here’s the good news!
All this highfalutin’ theoretical stuff
makes things simpler, not more
complicated, for us professional
communicators.
Set the scene
Where, when
Establish the characters
Protagonist vs antagonist, hero vs villian
Reveal the plot
Imbalance to balance, lacking to filling, wrong to right,
desire to fulfillment, fear to rest
Every story has the same
basic structure:
Set the scene
Where, when
Establish the characters
Protagonist vs antagonist, hero vs villian
Reveal the plot
Imbalance to balance, lacking to filling, wrong to right,
desire to fulfillment, fear to rest
Every story has the same
basic structure:
?
The way we take in those
stories is biological.
“Different brains approach learning similarly.”
—Tracy King, associate director of education, American
Academy of Neurology and founder of InspireEd
The learning brain
takes 4 steps:
Existing scaffold of
experiences,
interpretations,
evaluations, history
ATTEND
Existing scaffold of
experiences,
interpretations,
evaluations, history
ATTEND
ANALYZE
Existing scaffold of
experiences,
interpretations,
evaluations, history
ATTEND
ANALYZE
ASSOCIATE
Existing scaffold of
experiences,
interpretations,
evaluations, history
Narrative rationality > narrative coherence, narrative fidelity
ATTEND
ANALYZE
ASSOCIATE
ACT
New scaffold of
experiences,
interpretations,
evaluations, history
Narrative rationality > narrative coherence, narrative fidelity
The storytelling takeaway!
Briefly set the scene
Where, when, maybe a touch of history
Briefly establish the characters
Protagonists: Audience, you • Antagonists: Competition
Hit the plot hard
What imbalance will your offering balance and how will it do so?
?
VERTICAL
STORYTELLING
Expectation is formed by
experience.
And experience is ever changing.
The tools make the rules.
Tools of production and consumption
Database tools of
production and handheld
tools of consumption
have changed everything.
OLD
Big analogy: Newspapers,
magazines
“Above the fold”
Fixed width with extended
column length
Traditional style guides drawn
from traditional sources
Grid
Columns
NEW
Big analogy: presentation
slides
Potentially limitless scrolling
Responsive width comprising
rows with stackable elements
Style changes rooted in
databases, code
Grid
Rows
Examples
https://www.tuftandneedle.com/about/truth
http://designedtomove.org/
http://giveto.ucla.edu/
http://www.upenn.edu/programs/lifelong
https://landing.continuingstudies.wisc.edu/business-spanish-
certificate-abroad/
http://wgpi.wisc.edu/wisconsin-star-method/
What the heck is driving
this bus?
and …
Here’s the good news!
The ubiquity of WordPress/Bootstrap
web design and development makes
things simpler, not more complicated,
for us communicators.
Every credible WordPress theme is fully
responsive, which means
almost certainly built on a Bootstrap
framework and therefore
designed to change at specific
breakpoints (screen widths) to deliver
your content as intended for that device
using visual cues people expect.
BUT!
Your task as a communications
professional is to design FOR these new
realities rather than fight them in terms of
old norms and practices.
Responsive grids. Bootstrap rows.
Horizontal or hamburger nav schemes.
Vertically flowing slides made of simple
text + supporting image + CTA. These are
a few of your new favorite things.
Your task as a communications
professional is to design FOR these new
realities rather than fight them in terms of
old norms and practices.
Responsive grids. Bootstrap rows.
Horizontal or hamburger nav schemes.
Vertically flowing slides made of simple
text + supporting image + CTA. These are
a few of your new favorite things.
Your task as a communications
professional is to design FOR these new
realities rather than fight them in terms of
old norms and practices.
Responsive grids. Bootstrap rows.
Horizontal or hamburger nav schemes.
Vertically flowing slides made of simple
text + supporting image + CTA. These are
a few of your new favorite things.
Your task as a communications
professional is to design FOR these new
realities rather than fight them in terms of
old norms and practices.
Responsive grids. Bootstrap rows.
Horizontal or hamburger nav schemes.
Vertically flowing slides made of simple
text + supporting image + CTA. These are
a few of your new favorite things.
Your task as a communications
professional is to design FOR these new
realities rather than fight them in terms of
old norms and practices.
Responsive grids. Bootstrap rows.
Horizontal or hamburger nav schemes.
Vertically flowing slides made of simple
text + supporting image + CTA. These are
a few of your new favorite things.
Get up to speed!
http://www.w3schools.com/bootstrap/default.asp
And regarding that ol’
“attend” part of the
brain’s process …
Vertical slides:
Tell, show, move.
Assertion text + visual support + CTA or scrolling cue
Scene change every
seconds
Scene change every
seconds3
Full-sentence assertion
BTW, vertical storytelling
works great on emails too.
Examples
UW-Madison Continuing Studies 1-class template
UW-Madison Continuing Studies 3-class template
InVision
Here’s the good news!
Almost done.
The 7 maxims of VS:
1. People are inherently storytellers.
2. Set the scene, establish the characters, hit the plot (imbalance to
balance) hard.
3. Expectation is formed by experience.
4. The tools make the rules; Database’d production and handheld
consumption have changed everything.
5. Old analogy: print | Old grid: columns
New analogy: presentation slides | New grid: rows.
6. WordPress and Bootstrap: Learn them.
7. Tell, show, move to maintain digital audiences’ attention.
Go forth and tell thy
organization’s stories …
vertically, of course.
?
Creating responsive and effective digital content
VERTICAL
STORYTELLING
Kyle Henderson | Web Developer Team Lead | UW-Madison Division of Information Technology