Maria and Bill - How to Master Visual Storytelling


Published on

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

Published in: Technology, Design
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Maria and Bill - How to Master Visual Storytelling

  1. 1. Master Visual Storytelling Workshop
  2. 2. Agenda• Why Visuals are Compelling• What Constitutes a Visual• How to Master Visual Storytelling• Extending the Life of Your Visuals
  3. 3. 3Which of your 5 sensesdo you fear losing the most?Vision is everything
  4. 4. 4Visuals are priceless
  5. 5. Visuals are timeless
  6. 6. 6Visuals have depth and complexity
  7. 7. 7Visuals promote feeling and emotional reaction
  8. 8. 8Visuals stimulate our senses
  9. 9. 9Visuals allow for personal interpretation
  10. 10. 10Visuals speak for themselves
  11. 11. And when you put them together…Visuals tell a story
  12. 12. What are Visuals?
  13. 13. 13Photos
  14. 14. 14Graphics
  15. 15. Infographics
  16. 16. The Work in Progress: BeforeIssues to address:1. Text only2. No visuals3. No text treatments4. Mundane to theeye/flow
  17. 17. Your Visual Storytelling…TREGY
  18. 18. Step 1. Visual Optimization
  19. 19. Optimize: File Namesearch1.pngMaster-Visual-Storytelling.png
  20. 20. Optimize: File SizeHigh resolution:width of ~500pixelsLow resolution
  21. 21. Optimize: TitleReads like anarticle headlineVague, illegible
  22. 22. Optimize: Alternate Text (Alt Text)Use of title orfile nameMaster Visual Storytelling2013 Content MarketingStrategies Conference
  23. 23. Optimize: Caption/DescriptionLeave blankInclude price forPinterest;statement that tiesimage back tocontent of the page
  24. 24. Optimization SummaryUse keywords; hyphens separate wordsImage headline; keywords & company name; human readableConcise explanation of image; textual substitute for the imageLonger explanation of image in words; include pricing detailsand location, when applicable. High reading value thatimmediately captures attention. This is a statement that ties theimage back to the content of the page.500 pixels wide
  25. 25. Step 2. Maximize Social
  26. 26. Power of pictures on Facebook
  27. 27. Facebook is Designed for VisualsCover Photo: 851x315Profile Picture: 180x180Timeline Photo:552 pixels wide
  28. 28. Optimize File Size for Facebook552pixelsImage Optimization for FacebookFile Name: Auto assigned when uploaded intoFacebook. Good practice to rename it with relevantkeywords.File Size: Timeline: 552 pixels wideCover: 851x315Profile: 180x180Image Title: N/AAlt Text:Timelines: Uses photo description/caption. If leftblank, Alt text is set to “photo”.Profile: Uses your profile nameCover: N/ADescription: Used on timeline photos, added to AltAttributes. Can utilize keyword rich text and links indescription.
  29. 29. Images Belong on TwitterImage Optimization for TwitterFile Name: New filename assigned whenuploaded on Twitter; good practice to createkeyword rich filename when saving, rather thanusing default.File Size: Profile: 81x81, max 2MBHeader: up to 1252x626(displays 520x260), max 5MBTweet: image preview 60x60, max3MBImage Title: N/AAlt Text: Profile pic uploaded will have AltAttribute set to your profile name. Not found onother photos.Description: Tweet posts are searchable bycaption/ content on Twitter and search engines.Useful to describe the photo in the tweet herewith keywords.
  30. 30. The Twitter Cards SolutionApply for the program( code to your siteIncrease user engagement on Twitter
  31. 31. Pinterest Isn’t Optional
  32. 32. Hey Flitter, NEWS just for chicks & retailers!
  33. 33. 33Pinterest Does B2B
  34. 34. Bad-Ass Machines Use PinterestInfographics, whitepapers, eBooks, guidesPromotions, campaigns, user-generatedcontentShow community service & work cultureProduct display
  35. 35. Make for Easy PinningImage Optimization for PinterestFile Name: New filename assigned when uploadedonto Pinterest. Best practice to save photo withkeywords.File Size: Pins: 554 pixels wide. Max of 5000pixels long (infographics)Cover: 222x207Profile: 165x165Image Title: Uses page title or Pinterest –specifictitle if provided in the source code. Whatever youtitle your board will be used as part of yourPinterest URL.Alt Text: N/A; Alt text not found attached tophotos. Description used as Alt text.Description: Can describe the photo with up to500 characters in description. These terms can beused for search in Google and Pinterest.
  36. 36. 36The Pinterest 500Keyword rich 500 characters,use them all – in the ALT text
  37. 37. Optimize File Size for Pinterest5000pixels 554 pixels
  38. 38. More Pinterest Optimization• Search engines crawl Pinterest(publicly)• Title of a board in URL• Repins = referral traffic
  39. 39. Layout OptimizationBefore After
  40. 40. Extend the Life of Your Visuals
  41. 41. 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 socialnetworks• Create brand-specific albums in Facebook• Use images in ad campaigns (PPC)• Don’t forget mobile photo sharing networksfor promotions & campaigns (Instagram)
  42. 42. Optimization SummaryMeta Data Facebook Twitter PinterestFile Name N/A, new file name assignedN/A new file name assigned; reportedto be useful to have keywords infilename.N/A; new filename assigned; Alsoreported to be useful to have keywordsin filename.File SizeCover: 851x315 Profile: 81x81, Max 2MBPins: 554 pixels wide, no longer than5000 pixelsProfile: 180x180Header: up to 1252x626 (displays520x260), Max 5MBCover: 222x207Timeline: 552 pixels wide Tweet: image preview 60x60, Max 3MB Profile: 165x165TitleN/A; EXIF (data added in photothrough photo programs)removedN/A; EXIF also removed.Uses page title or Pinterest-specific titleif provided in source code. Whateveryou title your board will be used as partof your Pinterest URL, so use keywords.Alt TextTimeline: Uses photodescription/caption. If left blank,it is set to "photo"Profile pic uploaded will have alttext="profile name". Not found on otherphotos posted.N/A; Alt text not found attached tophotos. Description used as Alt text.Profile: Uses profile nameCover: N/A(Alt shows on timeline only.Doesnt show on maximizedphoto for FB)Caption/DescriptionUsed on timeline photos, addedto Alt Attributes. Utilize keywordrich text here.Tweet posts are searchable by caption/content on Twitter and search engines.Useful to describe the photo in thetweet here with keywords.Can describe the photo with up 500characters in the Description. Theseterms can be used for search in Googleand Pinterest.
  43. 43. 43Q & A
  44. 44. 44Bill FlitterCEO/Founderbill@dlvr.ithttp://dlvr.itMaria VanWambekeVP, Product Development &IntegrationMaria.VanWambeke@businesswire.com
  45. 45. 45Notable Sources•••••••••••