Visual Content Strategy presentation delivered at the Content Marketing World 2015 by Buddy Scalera. Views here are my own and do not necessarily represent those of my employer, Content Marketing World, or anyone else.
Annotated Version includes modifications to prepare it for Slideshare and ebooks.
http://www.buddyscalera.com
Grok is (c) 2011 Buddy Scalera & Pat Quinn. Do not use without permission.
Words + Pictures: Content Marketer’s Guide to Visual Storytelling | Annotated Version
1. @BuddyScalera • #CMWorld@BuddyScalera • #CMWorld
Words+Pictures:
A Content Marketer’s Guide
to Visual Storytelling
Buddy Scalera
Content Strategist
BuddyScalera.com
WordsPicturesWeb.com
The
Annotated
Version!
2. @BuddyScalera • #CMWorld
About The Annotated Version
• This presentation was delivered atthe Content
Marketing World 2015 by Buddy Scalera
• This Annotated Version included modifications to
prepare it for Slideshare and ebooks
• Videos and decks are available atthe official
CMWorld website:
http://www.contentmarketingworld.com/cmworld-
2015-presentation-decks/ Buddy Scalera
Look for these
callouts.
These too.
3. @BuddyScalera • #CMWorld
Just one more thing…
• The views shared here are my own and do not necessarily
reflect the views and opinions ofmy employer,my
collaborators,or ContentMarketing World
• I’ve made reasonable attempts to credit graphics and other
contributions,but if I have missed something,please contact
me directly at my website
Buddy Scalera Michelle Killebrew
Website: BuddyScalera.com | Blog: WordsPicturesWeb.com
+
Slideshare.net/buddyscalera
Instagram.com/buddyscalera/
4. Comic books are visual storytelling and we can learn a lot from sequential art narratives.
I’ve written a few
comics. Some are
better than others.
12. @BuddyScalera • #CMWorld
Infographics
CAN Be
Stories...
But They
Aren’t Always
Stories
Infographics designed by
Ivan Ruiz. Find them at:
http://www.slideshare.net/Iv
anRuiz24
17. @BuddyScalera • #CMWorld
Your visual content strategy is like any other part of your digital strategy. Content
marketing should always map to a user journey.
Your Customer’s Journey
User Journey
Your target user is on a
journey called Life.
19. @BuddyScalera • #CMWorld
Conflict Resolution
What they
need
What you
have
User Journey
If your
product/service/solutio
n helps solve this
conflict…
20. @BuddyScalera • #CMWorld
The Story Continues
What they
need
What you
have
User Journey User Journey Continued…
…the user journey
continues.
27. @BuddyScalera • #CMWorld
The
strategy
worked.
Grok’s
people
learned
the
good
berries
from
the
bad
berries.
They
stopped
dying
from
this
very
preventable
mistake.
33. @BuddyScalera • #CMWorld
We have five senses, but we do not use them evenly. Content marketers must
recognize the vision is the most utilized sense on the Internet.
Sight Sound Smell Touch Taste
37. @BuddyScalera • #CMWorld
An MIT study
revealed that our
brains can identify
visual information
incredibly fast.
“The visual system
is very good at
processing
meaning.
“It’s very good at
learning to ignore
things that are
consistently
irrelevant.”
- Dr. Brad Wyble
(Interview 8/11/15)
In the blink of an eye
MIT neuroscientists find the brain can
identify images seen for as little as 13
milliseconds
http://news.mit.edu/2014/in-the-blink-
of-an-eye-0116
Dr. Wyble is super
interesting:
http://wyblelab.com/researc
h
38. @BuddyScalera • #CMWorld
Visual
Language
of
The
Web
One of the most
popular websites
for consumer health
information.
It features a clean, inviting
interface.
40. @BuddyScalera • #CMWorld
1 5
62
3
4
9
8
10
7
20
24
11
14
12 13
21 27
15
16
18
19
22
37
35
36
54 55
33
44
34
45
17
31
32
28 29 30
25 26
49
58
48
50
47
52
53
23
49
38
39
43
41
42
56 57
59 60
61
51
46
Most people would
agree that WebMD is
a well-designed
website for
consumers.
But we’re asking the
eye to make a lot of
decisions to find what
is really important. In
this “above the fold”
screenshot, there are
61 different things
you can click.
42. @BuddyScalera • #CMWorld
Huh?
Others are less
obvious and require a
text description. That
sort of defeats the
purpose of an icon.
Most people would
agree that WebMD is
a reasonably well-
designed website.
And when certain
icons are repeated, it
becomes more
confusing.
Yes, social is
important, but ask
yourself who is going
to share your landing
pages. Is it just visual
noise?
43. @BuddyScalera • #CMWorld
Choices
There are a lot of
decisions to make
here. This may be
overwhelming.
You probably ignored
the clip art. More
visual noise.
45. @BuddyScalera • #CMWorld
Layouts Have Personality
You can
immediately identify
the consumer
website…
…and the
professional
website for doctors.Next slides: Speed test & word association.
50. @BuddyScalera • #CMWorld
Why do so many infographics have the same
v i s u a l p e r s o n a l i t y ?
If your want to stand out, then
why are you matching the
same vector-based design
style that’s so popular in
infographics?
51. @BuddyScalera • #CMWorld
It’s okay to use photographs in
your infographics.
It’s okay to use photographs in
your infographics.
It’s okay to use photographs in
your infographics.
It’s okay to use photographs in
your infographics.
53. @BuddyScalera • #CMWorld
We don’t read the letters.
We see the shape of the word.
We see words as pictures
based on shapes we’ve
identified and saved in our
memory.
54. @BuddyScalera • #CMWorld
WE DON’T READ THE LETTERS.
WE SEE THE SHAPE OF THE WORD.
Users read all-caps text about10% slower
than mixed cases, because it is harder for
the eye to recognize the shape of the
words….Don’tdo it.
- Jacob Nielsen
“Designing Web Usability”
The uniform style of ALL
CAPS forces us to pause on
certain words.
55. @BuddyScalera • #CMWorld
Visual content strategists must have a basic understanding of icons and other important
Semiotics
So why do we have ALL
CAPS on road signs?
Because we know that this
shape and color means
STOP.
56. @BuddyScalera • #CMWorld
All of these are arrows.
They are contextually
relevant depending on
where they are seen.
In the context of your music
player, this arrow now
means PLAY.
57. @BuddyScalera • #CMWorld
Used online and
in traditional
stereo icons.
Other
Meanings
None Hello
Hi-Five
None Close
Delete
Cross Out
Box
Square
In this context, the
square means STOP.
There are other ways
to say STOP and the
visual representation
will depend on the
context.
58. @BuddyScalera • #CMWorld
Firefox
Chrome
Explorer
Certain icons have become
so familiar that we know
what they mean in the
context of online and offline
situations.
Certain icons have become
so familiar that we know
what they mean in the
context of online and offline
situations.
Certain icons have become
so familiar that we know
what they mean in the
context of online and offline
situations.
60. @BuddyScalera • #CMWorld
Infographics
Are a Tactic Websites are
constrained by
width, but have
infinite depth.
Gorgeous infographic
that looks fantastic on
your Brand.com
website.
61. @BuddyScalera • #CMWorld
f
Lorem ipsum dolor sitamet, consectetur
adipiscing elit. Integer blandit urna tellus,
sed ullamcorper felis tincidunt vel.
Phasellus nulla arcu, venenatis sed ante
vel, luctus blandit purus.Duis vitae mollis
sapien,vitae rhoncus lorem.Etiam
malesuada lacinia dui, ac euismod felis
sollicitudin eu. Donec et quam elit. Etiam
tincidunt tristique neque a tincidunt. Ut
varius metus nunc.Phasellus id
vestibulum tellus, egetposuere leo.
Praesentultricies enim ac risus congue,
non molestie risus dapibus.Mauris mollis
viverra nisi.
Lorem ipsum dolor sitamet,
consectetur adipiscing elit. Integer
blandit urna tellus, sed ullamcorper
felis tincidunt vel.Phasellus nulla arcu,
venenatis sed ante vel, luctus blandit
purus.Duis vitae mollis sapien,vitae
rhoncus lorem.Etiam malesuada
lacinia dui, ac euismod felis sollicitudin
eu.
Seed this infographic
on Facebook.
62. @BuddyScalera • #CMWorld
f
Lorem ipsum dolor sitamet, consectetur
adipiscing elit. Integer blandit urna tellus,
sed ullamcorper felis tincidunt vel.
Phasellus nulla arcu, venenatis sed ante
vel, luctus blandit purus.Duis vitae mollis
sapien,vitae rhoncus lorem.Etiam
malesuada lacinia dui, ac euismod felis
sollicitudin eu. Donec et quam elit. Etiam
tincidunt tristique neque a tincidunt. Ut
varius metus nunc.Phasellus id
vestibulum tellus, egetposuere leo.
Praesentultricies enim ac risus congue,
non molestie risus dapibus.Mauris mollis
viverra nisi.
Lorem ipsum dolor sitamet,
consectetur adipiscing elit. Integer
blandit urna tellus, sed ullamcorper
felis tincidunt vel.Phasellus nulla arcu,
venenatis sed ante vel, luctus blandit
purus.Duis vitae mollis sapien,vitae
rhoncus lorem.Etiam malesuada
lacinia dui, ac euismod felis sollicitudin
eu.
Hmm, too big for the
social network slot…
63. @BuddyScalera • #CMWorld
f
Lorem ipsum dolor sitamet, consectetur
adipiscing elit. Integer blandit urna tellus,
sed ullamcorper felis tincidunt vel.
Phasellus nulla arcu, venenatis sed ante
vel, luctus blandit purus.Duis vitae mollis
sapien,vitae rhoncus lorem.Etiam
malesuada lacinia dui, ac euismod felis
sollicitudin eu. Donec et quam elit. Etiam
tincidunt tristique neque a tincidunt. Ut
varius metus nunc.Phasellus id
vestibulum tellus, egetposuere leo.
Praesentultricies enim ac risus congue,
non molestie risus dapibus.Mauris mollis
viverra nisi.
Lorem ipsum dolor sitamet,
consectetur adipiscing elit. Integer
blandit urna tellus, sed ullamcorper
felis tincidunt vel.Phasellus nulla arcu,
venenatis sed ante vel, luctus blandit
purus.Duis vitae mollis sapien,vitae
rhoncus lorem.Etiam malesuada
lacinia dui, ac euismod felis sollicitudin
eu.
1
…don’t worry,
Facebook will crop it
for you.
64. @BuddyScalera • #CMWorld
f
Lorem ipsum dolor sitamet, consectetur
adipiscing elit. Integer blandit urna tellus,
sed ullamcorper felis tincidunt vel.
Phasellus nulla arcu, venenatis sed ante
vel, luctus blandit purus.Duis vitae mollis
sapien,vitae rhoncus lorem.Etiam
malesuada lacinia dui, ac euismod felis
sollicitudin eu. Donec et quam elit. Etiam
tincidunt tristique neque a tincidunt. Ut
varius metus nunc.Phasellus id
vestibulum tellus, egetposuere leo.
Praesentultricies enim ac risus congue,
non molestie risus dapibus.Mauris mollis
viverra nisi.
Lorem ipsum dolor sitamet,
consectetur adipiscing elit. Integer
blandit urna tellus, sed ullamcorper
felis tincidunt vel.Phasellus nulla arcu,
venenatis sed ante vel, luctus blandit
purus.Duis vitae mollis sapien,vitae
rhoncus lorem.Etiam malesuada
lacinia dui, ac euismod felis sollicitudin
eu.
1 of 5
Lorem ipsum dolor sitamet,
consectetur adipiscing elit. Integer
2
3
4
5
Social networks have
mores and traditions.
Respect.
Consider a strategy
for your infographic
tactic.
65. @BuddyScalera • #CMWorld
So do our friends at
Content Marketing
Institute. With a tip of the
hat to Joe Kalinowski.
Google Think does
this really well.
Google Think does
this really well.
71. Your
message
may
not
need
to
last
600,000,000
years.
But
you
should
feel
good
to
know
that
healthcare
message
are
important
now
as
they
were
at
the
dawn
of
time.
And
with
a
good
message,
a
strong
content
strategy,
and
a
determination
to
get
the
right
message
to
the
right
person
at
the
right
time,
we
can
just
as
effective
as Grok was
6000000
years
go.
Because
if
you
really
think
about
it,
the
reason
we’re
all
here
today
is
in
some
small
part
because Grok was
able
to
share
an
effective
health
message.
Act
3
•
Tie
Grok’s
story
back
to
pharmaceutical
content
strategy
•
Health
messages
are
still
important,
even
if
the
message
is
distributed
through
modern
digital
channels
•
It
still
must
be
appropriate
to
the
audience,
shared
in
a
language
they
understand
with
a
clear
call
to
action
•
Story
– even
if
it’s
not
a
“once
upon
a
time”
fairytale
-‐-‐
is
still
a
method
that
humans
understand….why?
Because
Grok
survived,
thrived,
and
we
are
all
in
some
way,
descendants
of
his
tribe
(taking
some
literary
license
here,
but…)
Epilogue
•
Grok
and
all
storytellers
recognize
the
power
of
communications
and
content
strategy
helps
brand
marketers
to
share
an
effective
message
•
Health
messages
are
essential
stories
that
people
need
and
will
listen
to
if
it
is
relevant
to
them
•
Your
message
may
not
need
to
last
600,000
years,
but,
hey,
you
never
know….
We’re
all
descendants
of
Grok,
the
first
health
storyteller
and
content
marketer.
73. @BuddyScalera • #CMWorld@BuddyScalera • #CMWorld
The End.
Story & presentation by Buddy Scalera.
http://BuddyScalera.com
Buddy Scalera
Content Strategist
BuddyScalera.com
WordsPicturesWeb.com
Slide templates & infographic by Ivan Ruiz.
http://ivanruizdesign.com/
Grok art by Pat Quinn.
http://patquinn.blogspot.com/
75. @BuddyScalera • #CMWorld
Top Tweets
Buddy’s Note:
After every presentation, I check Twitter and other social channels
to see what people shared. This is one of the ways I can determine
what people are taking away from the experience.
Sometimes I save key observations because they help me improve
my presentations and slides.
The next couple of slides include some of the key tweets that I’ve
saved. I hope they are as useful to you as they are to me.
Special thanks to the people who came to my session and shared
their tweets.
76. @BuddyScalera • #CMWorld
Matt Osias @mattosias "Stories are defined by conflict. Conflict can be resolved by a brand." —
@MarketingBuddy #CMWorld #ContentTipsy
Brandmuscle @brandmuscle @MarketingBuddy No problem! Your energy was awesome and the user-
focused design lessons are great takeaways from #CMWorld.
Erika Heald @SFerika Excellent session on visual content this morning w/@marketingbuddy. Took SO
MANY notes in #Evernote. #CMWorld
Melissa Suzuno @trixiemaru .@MarketingBuddy thanks again for a wonderful, thought-provoking, very
meta session on #visual #storytelling!
Guilherme Conter @gconter Bons insights sobre comunicação visual com @MarketingBuddy #CMWorld
Top Tweets
77. @BuddyScalera • #CMWorld
Charles Cooper Cooper_42 You must modify your message/story for your users
and the medium they're using @MarketingBuddy #CMWorld
Liberty Tsighis @libertyt "Build your content to where people are in their user
journey." @MarketingBuddy #CMWorld
Melissa Ripp Lozoff @peapodmel Involve designers WAY earlier than you thought
you needed to. They need to be in the room at the very beginning.
@MarketingBuddy #CMWorld
Andrea Fryrear @AndreaFryrear Your visual language needs to adapt to the
channel it's on (but Batman is always Batman regardless of context).
@MarketingBuddy #CMWorld
Allison Erdman @allisonerdman "Were stuck in this weird rut where we think
everything has to be a vector graphic." -@MarketingBuddy --THANK YOU!
#CMWorld
Top Tweets
78. @BuddyScalera • #CMWorld
Chris Sledzik @csledzik Visual design + usability are paramount partners in digital #marketing.
Make it easy for consumers. Focus on CTAs. @MarketingBuddy #CMWorld
Allison Erdman @allisonerdman "If your icons need a tag and label, you don't have very good
icons" - @MarketingBuddy #CMWorld #Visual Storytelling
Andrea Fryrear @AndreaFryrear Our visual processors in our brains are very good at learning to
ignore things that are consistently irrelevant. @MarketingBuddy #CMWorld
Mike Goldberg @HeavyMetalMG The evolution of content as king starts with cavemen; the
original visual storytellers @MarketingBuddy #CMWorld
Top Tweets
79. @BuddyScalera • #CMWorld
Bridgette Klein @BridgetteBKlein Sep 10
Story is defined by conflict. Otherwise it is just set up. @MarketingBuddy #CMWorld
Barry Feldman @FeldmanCreative Sep 10
"Most of the web is a silent experience. We rely on our vision." @MarketingBuddy riffing
viz storytelling at #CMWorld
Whitney Stephens @WMLStephens Sep 10
Your brand can be a plot point, but it's your customers' story. @MarketingBuddy
#CMWorld
Clarabridge @Clarabridge Sep 10
Don't tell your brand's story. See how you can fit into your customer's story.
@MarketingBuddy #CMWorld
Top Tweets
80. @BuddyScalera • #CMWorld
Janelle Witting @janelleforreal Sep 10
Oh dang @verbality , presenter is a content marketer by day and COMIC BOOK
WRITER by night! #CMWorld @MarketingBuddy
Allison Erdman @allisonerdman Sep 10
"#Infographics can be stories, but they're not always stories!"-@MarketingBuddy
#CMWorld
Amber Ooley @AmberOoley Sep 10
From content marketing to comic books, let's get visual. #CMWorld
@MarketingBuddy
Melissa Ripp Lozoff @peapodmel Sep 10 Cleveland, OH
"Your brand can be a plot point, but it's THEIR story." @MarketingBuddy
#CMWorld
Top Tweets
82. @BuddyScalera • #CMWorld
YMAL: You May Also Like
Rx Digital Marketing Podcast:
http://rxdigitalmarketing.com/
Movie Poster Creates JAWS-Dropping Visual Storytelling Lessons:
http://contentmarketinginstitute.com/2015/08/jaws-visual-storytelling-lessons/
What Keeps Brilliant Visual Content From Being Shared:
http://contentmarketinginstitute.com/2014/04/brilliant-visual-content-sharing-barriers/
Long and Short of Content Strategy | Annotated Version:
http://www.slideshare.net/buddyscalera/icc-2015-outline-v2d/
Favorite Covers Deconstructed: Captain America #230:
http://comicbookschool.com/2015/01/captain-america-230/