45
Master Visual Storytelling Workshop

Maria and Bill - How to Master Visual Storytelling

  • View
    1.221

  • Download
    0

Embed Size (px)

DESCRIPTION

Visual Web: Maria Van Wambeke,Vice President, Product Development & Integration, Business Wire & Bill Flitter, Founder & CEO, dlvr.it. How to master visual storytelling to drive traffic & sales.

Citation preview

Page 1: Maria and Bill - How to Master Visual Storytelling

Master Visual Storytelling Workshop

Page 2: Maria and Bill - How to Master Visual Storytelling

Agenda

• Why Visuals are Compelling

• What Constitutes a Visual

• How to Master Visual Storytelling

• Extending the Life of Your Visuals

Page 3: Maria and Bill - How to Master Visual Storytelling

3

Which of your 5 senses

do you fear losing the most?

Vision is everything

Page 4: Maria and Bill - How to Master Visual Storytelling

4

Visuals are priceless

Page 5: Maria and Bill - How to Master Visual Storytelling

Visuals are timeless

Page 6: Maria and Bill - How to Master Visual Storytelling

6

Visuals have depth and complexity

Page 7: Maria and Bill - How to Master Visual Storytelling

7

Visuals promote feeling and emotional reaction

Page 8: Maria and Bill - How to Master Visual Storytelling

8

Visuals stimulate our senses

Page 9: Maria and Bill - How to Master Visual Storytelling

9

Visuals allow for personal interpretation

Page 10: Maria and Bill - How to Master Visual Storytelling

10

Visuals speak for themselves

Page 11: Maria and Bill - How to Master Visual Storytelling

And when you put them together…

Visuals tell a story

Page 12: Maria and Bill - How to Master Visual Storytelling

What are Visuals?

Page 13: Maria and Bill - How to Master Visual Storytelling

13

Photos

Page 14: Maria and Bill - How to Master Visual Storytelling

14

Graphics

Page 15: Maria and Bill - How to Master Visual Storytelling

Infographics

Page 16: Maria and Bill - How to Master Visual Storytelling

The Work in Progress: Before

Issues to address:

1. Text only

2. No visuals

3. No text treatments

4. Mundane to the

eye/flow

Page 17: Maria and Bill - How to Master Visual Storytelling

Your Visual Storytelling…

T R

E G

Y

Page 18: Maria and Bill - How to Master Visual Storytelling

Step 1. Visual Optimization

Page 19: Maria and Bill - How to Master Visual Storytelling

Optimize: File Name

search1.png

Master-Visual-

Storytelling.png

Page 20: Maria and Bill - How to Master Visual Storytelling

Optimize: File Size

High resolution:

width of ~500

pixels

Low resolution

Page 21: Maria and Bill - How to Master Visual Storytelling

Optimize: Title

Reads like an

article headline

Vague, illegible

Page 22: Maria and Bill - How to Master Visual Storytelling

Optimize: Alternate Text (Alt Text)

Use of title or

file name

Master Visual Storytelling

2013 Content Marketing

Strategies Conference

Page 23: Maria and Bill - How to Master Visual Storytelling

Optimize: Caption/Description

Leave blank

Include price for

Pinterest;

statement that ties

image back to

content of the page

Page 24: Maria and Bill - How to Master Visual Storytelling

Optimization Summary

Use keywords; hyphens separate words

Image headline; keywords & company name; human readable

Concise explanation of image; textual substitute for the image

Longer explanation of image in words; include pricing details

and location, when applicable. High reading value that

immediately captures attention. This is a statement that ties the

image back to the content of the page.

500 pixels wide

Page 25: Maria and Bill - How to Master Visual Storytelling

Step 2. Maximize Social

Page 26: Maria and Bill - How to Master Visual Storytelling

Power of pictures on Facebook

Page 27: Maria and Bill - How to Master Visual Storytelling

Facebook is Designed for Visuals

Cover Photo: 851x315

Profile Picture: 180x180

Timeline Photo:

552 pixels wide

Page 28: Maria and Bill - How to Master Visual Storytelling

Optimize File Size for Facebook

552pixels

Image Optimization for Facebook

File Name: Auto assigned when uploaded into

Facebook. Good practice to rename it with relevant

keywords.

File Size: Timeline: 552 pixels wide

Cover: 851x315

Profile: 180x180

Image Title: N/A

Alt Text:

Timelines: Uses photo description/caption. If left

blank, Alt text is set to “photo”.

Profile: Uses your profile name

Cover: N/A

Description: Used on timeline photos, added to Alt

Attributes. Can utilize keyword rich text and links in

description.

Page 29: Maria and Bill - How to Master Visual Storytelling

Images Belong on Twitter

Image Optimization for Twitter

File Name: New filename assigned when

uploaded on Twitter; good practice to create

keyword rich filename when saving, rather than

using default.

File Size: Profile: 81x81, max 2MB

Header: up to 1252x626

(displays 520x260), max 5MB

Tweet: image preview 60x60, max

3MB

Image Title: N/A

Alt Text: Profile pic uploaded will have Alt

Attribute set to your profile name. Not found on

other photos.

Description: Tweet posts are searchable by

caption/ content on Twitter and search engines.

Useful to describe the photo in the tweet here

with keywords.

Page 30: Maria and Bill - How to Master Visual Storytelling

The Twitter Cards Solution

Apply for the program

(https://dev.twitter.com/docs/cards)

Add code to your site

Increase user engagement on Twitter

Page 31: Maria and Bill - How to Master Visual Storytelling

Pinterest Isn’t Optional

Page 32: Maria and Bill - How to Master Visual Storytelling

Hey Flitter, NEWS FLASH.

is just for chicks & retailers!

Page 33: Maria and Bill - How to Master Visual Storytelling

33

Pinterest Does B2B

Page 34: Maria and Bill - How to Master Visual Storytelling

Bad-Ass Machines Use Pinterest

Infographics, whitepapers, eBooks, guides

Promotions, campaigns, user-generated

content

Show community service & work culture

Product display

Page 35: Maria and Bill - How to Master Visual Storytelling

Make for Easy Pinning

Image Optimization for Pinterest

File Name: New filename assigned when uploaded

onto Pinterest. Best practice to save photo with

keywords.

File Size: Pins: 554 pixels wide. Max of 5000

pixels long (infographics)

Cover: 222x207

Profile: 165x165

Image Title: Uses page title or Pinterest –specific

title if provided in the source code. Whatever you

title your board will be used as part of your

Pinterest URL.

Alt Text: N/A; Alt text not found attached to

photos. Description used as Alt text.

Description: Can describe the photo with up to

500 characters in description. These terms can be

used for search in Google and Pinterest.

Page 36: Maria and Bill - How to Master Visual Storytelling

36

The Pinterest 500

Keyword rich 500 characters,

use them all – in the ALT text

Page 37: Maria and Bill - How to Master Visual Storytelling

Optimize File Size for Pinterest

5000 p

ixels

554 pixels

Page 38: Maria and Bill - How to Master Visual Storytelling

More Pinterest Optimization

• Search engines crawl Pinterest

(publicly)

• Title of a board in URL http://pinterest.com/tcmarketeer/content-marketing-news/

• Repins = referral traffic

Page 39: Maria and Bill - How to Master Visual Storytelling

Layout Optimization

Before

After

Page 40: Maria and Bill - How to Master Visual Storytelling

Extend the Life of Your Visuals

Page 41: Maria and Bill - How to Master Visual Storytelling

Visual Life Extensions

• Repurpose in blog posts, press releases,

whitepapers

• Create a Slideshare of the content

• Cross-promote on Facebook, Twitter, Flickr,

Tumblr, Posterous and Foursquare…all social

networks

• Create brand-specific albums in Facebook

• Use images in ad campaigns (PPC)

• Don’t forget mobile photo sharing networks

for promotions & campaigns (Instagram)

Page 42: Maria and Bill - How to Master Visual Storytelling

Optimization Summary

Meta Data Facebook Twitter Pinterest

File Name N/A, new file name assigned N/A new file name assigned; reported to be useful to have keywords in filename.

N/A; new filename assigned; Also reported to be useful to have keywords in filename.

File Size

Cover: 851x315 Profile: 81x81, Max 2MB Pins: 554 pixels wide, no longer than 5000 pixels

Profile: 180x180 Header: up to 1252x626 (displays 520x260), Max 5MB

Cover: 222x207

Timeline: 552 pixels wide Tweet: image preview 60x60, Max 3MB Profile: 165x165

Title N/A; EXIF (data added in photo through photo programs) removed

N/A; EXIF also removed.

Uses page title or Pinterest-specific title if provided in source code. Whatever you title your board will be used as part of your Pinterest URL, so use keywords.

Alt Text

Timeline: Uses photo description/caption. If left blank, it is set to "photo"

Profile pic uploaded will have alt text="profile name". Not found on other photos posted.

N/A; Alt text not found attached to photos. Description used as Alt text.

Profile: Uses profile name

Cover: N/A

(Alt shows on timeline only. Doesn't show on maximized photo for FB)

Caption/Description Used on timeline photos, added to Alt Attributes. Utilize keyword rich text here.

Tweet posts are searchable by caption/ content on Twitter and search engines. Useful to describe the photo in the tweet here with keywords.

Can describe the photo with up 500 characters in the Description. These terms can be used for search in Google and Pinterest.

Page 43: Maria and Bill - How to Master Visual Storytelling

43

Q & A

Page 44: Maria and Bill - How to Master Visual Storytelling

44

Bill Flitter CEO/Founder

[email protected]

http://dlvr.it

Maria VanWambeke VP, Product Development &

Integration [email protected]

http://businesswire.com

@mariavw

LinkedIn:

Page 45: Maria and Bill - How to Master Visual Storytelling

45

Notable Sources

• http://www.marketingprofs.com/articles/2013/10563/three-steps-to-using-instagram-for-e-commerce-

without-sharing-a-single-

photo#ixzz2QqlOG6WR?utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer%253A%2520

%2540Curalate%2520on%2520twitter&buffer_share=d8f5e

• http://blog.hubspot.com/blog/tabid/6307/bid/33423/19-Reasons-You-Should-Include-Visual-Content-in-

Your-Marketing-Data.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/33800/Photos-on-Facebook-Generate-53-More-Likes-Than-

the-Average-Post-NEW-DATA.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/32255/Why-Marketers-Should-Invest-in-Visual-Content-

Creation.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/33222/How-to-Breathe-New-Life-Into-Your-Marketing-With-

Visual-Content.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/33222/How-to-Breathe-New-Life-Into-Your-Marketing-With-

Visual-Content.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/29987/The-Marketer-s-Scoop-on-Instagram-and-How-to-

Use-It.aspx

• http://blog.hubspot.com/blog/tabid/6307/bid/34223/5-Infographics-to-Teach-You-How-to-Easily-Create-

Infographics-in-PowerPoint-TEMPLATES.aspx:

• http://blog.hubspot.com/blog/tabid/6307/bid/34262/The-Ultimate-Guide-to-Measuring-Your-Pinterest-

Marketing-Success.aspx

• http://econsultancy.com/us/blog/62189-stats-who-uses-pinterest-and-why-is-it-important-for-marketers

• http://www.bitrebels.com/social/get-repinned-pinterest-image-optimization-guide-

infographic/attachment/pinterest-image-optimization-guide-1/