Next GenerationCreative ReviewAugmented Reality, HTML5and What’s NextKevin Doohan, Red Bull   Tom Giovagnoli, Anthem WW   ...
Why AR and HTML5?Two new pieces to the storytelling puzzle
Where does the story start?  Let’s look back to look forward
first technology created a space for stories
then technology made stories more sacred
then allowed us to share our stories widely
and allowed us to bring our stories to life
now technology has pulled us all into the story
now technology has pulled us all into the story
The story isn’t told anymore– it emerges in pieces. And the presumption is that you are always involved, always invited an...
The new story arc– with tools like AR and HTML5– is across the beginning, middle  and end of the individual experience.
Augmented RealityAdding New Dimensions to the Story
AR: adds a layer of what WASMuseum of London. Historical images layered over the visible world.
AR: adds a layer of what WASNational Geographic Channel. Big screen overlay brings dinos to the mall.
AR: adds more layers what ISLego Store kiosk shows a fun, animated scene of each model.
AR: adds a layer of what ISN’TFujitsu touts high security standard with virtual security guards.
AR: adds a layer of what ISN’TComic books come to life, with heros literally leaping off the page.
AR: adds a layer of what ISN’TMarkerless, flash-based augmented reality breaks new ground.
AR: adds a layer of what COULD BEUsers literally step right into a new pair of Converse to find the cool look.
AR: adds a layer of what COULD BEZugara turns the online shopping moment into a real shopping moment.
AR: adds a layer of what SHOULD BE A virtual 3-D model demonstrates proper installation procedures.
AR: adds a layer of what we WANT TO BE   Why just race when you can use Red Bull cans to build the track?
AR: adds a layer of what we WANT TO BE  A desktop app promotes Iron Man by putting you “inside the mask.”
AR: can add a layer of lore and legendGnomes from 6,666 years ago have arrived with beer? Let’s see ‘em.
But is there an augmented elephant in the room?
Augmented reality is still finding its formfactor. But as the experience becomes more frictionless– and thus more ubiquito...
AR: will ultimately add to every part of the story   Wearable sensors and image detection will add multiple persistent lay...
AR: will ultimately add to every part of the story   Techniques like “articulated natural web” and “holographic overlays” ...
HTML5:The Story is in the Experience
HTML5: a beautiful orchestration of elements     “if HTML5 is the bones      then CSS is the skin and the       muscles ar...
HTML5: can provide “feel” beyond the video
HTML5: can create a shallow sense of depth
HTML5: can make the story more fluid  Multiple elements of text, graphics, video, and vector art play beautifully.
HTML5: can create an environment for info This project turns an IMDB-like data base into a relative, visual experience.
HTML5: can give the story a living design  Mesmerizing by bringing a print-like design into a parallax environment.
HTML5: can give the story a cinematic feel   The opening sequence for this LA talent agency is big screen-worthy.
HTML5: can help us author the story together     Every second by a different artist, yet a continuity of soul.
HTML5: can let us inhabit the story personally   The meaning becomes personal when the words and images are yours.
HTML5: can make us the victim of the story   The terror also becomes yours when you become the hunted.
HTML5: can let you steer the story yourselfThree worlds. Three dreams. A music video you can explore and add to freely.
HTML5: can take the story anywhereResponsive Design means one code base, but differently-sized experiences.
The real promise of HTML5 is to help usorchestra experiences that let our stories  truly scale– across platforms, across  ...
HTML5: can take the story anywhereA platform for Michelob ULTRA that will different devices– and expectations.
HTML5: can take the story anywhereWe built the Do Network for Lenovo to connect locally– and scale globally.
The smartest marketing today just sets upthe game, and lets consumers play it out.     So you have to know your game.
New Shapes in Storytelling:  Art, Alchemy and Applications
Next Is: a mindset unafraid to mix and mash   Google’s Project Rebrief shows, yet again, the power of good ideas.
Next Is: marketing + gamification + mobile    Another genius call: creating their own economy of points.
Next Is: gesture and pattern recognition  The Kinect SDK is part of a revolution in input and control.
Next Is: brain controlled skateboardsRapid advances in “mind reading” and high-res brain-scanning are here today.
New is: moving social to the right brain  Is it great user experience or just the way we think? Either way, it works.
New is: mass micro manufacturingFrom “post-digital” to “re-physical.” The real world strikes back!
Next Is: micro-casting and personal channels  Personal recommendations flow freely. Is this the new face of curation?
New is: wysiwyg app-making  Cabana lets you create very simple or very truly rich apps in minutes.
New is: seeing the cross-pollination of ideas     Personal data mining? Social heat-mapping? Just call it cool.
Next Is: self-assembling anthropologyWith Cowbird, Jonathan Harris makes the story the story. Beautifully.
Some Final ThoughtsOn where we are #andwhatsnext
Embracing new technologies means thinking like an alchemist. Mixing andmashing– sometimes failing and flailing–until you m...
The digital story isn’t something youreceive. It’s something you experience  with all your senses, including your         ...
Fearlessly diving into each new wave oftechnology is essential. But keeping youreye out for sea changes is the bigger trick.
The story– as an actual tale or as thestory what will happen between brandsand consumers– isn’t told anymore as  much as i...
It’s not a conversation. It’s a dance.  Sometimes you lead. Sometimes youfollow. But you’ve got to share a rhythm        i...
Soon the world will truly start personalizing around us. What will itmean to live our lives inside the bubble           of...
Technology Changes the Story:      Little Red Riding 2012
Tech and Storytelling: Red Riding Hood 2012Once upon a time, there was a girl called Little Red Riding Hood, who traveled ...
Upcoming SlideShare
Loading in...5
×

Storytelling with AR HTML5 and Whats Next

2,032

Published on

On April 4 at ad:tech SF Tommy Giovagnoli, Executive Creative Director at Anthem Worldwide and Kevin Doohan, head of Digital at Red Bull chatted about where Augmented Reality and HTML5 fit in the tradition of storytelling and marketing for Big Brands. You can also find a Pinterest Board with all of the examples pinned here: http://pinterest.com/anthemdigital/

Published in: Technology

Storytelling with AR HTML5 and Whats Next

  1. 1. Next GenerationCreative ReviewAugmented Reality, HTML5and What’s NextKevin Doohan, Red Bull Tom Giovagnoli, Anthem WW #andwhatsnext
  2. 2. Why AR and HTML5?Two new pieces to the storytelling puzzle
  3. 3. Where does the story start? Let’s look back to look forward
  4. 4. first technology created a space for stories
  5. 5. then technology made stories more sacred
  6. 6. then allowed us to share our stories widely
  7. 7. and allowed us to bring our stories to life
  8. 8. now technology has pulled us all into the story
  9. 9. now technology has pulled us all into the story
  10. 10. The story isn’t told anymore– it emerges in pieces. And the presumption is that you are always involved, always invited and that we’re creating this thing together.
  11. 11. The new story arc– with tools like AR and HTML5– is across the beginning, middle and end of the individual experience.
  12. 12. Augmented RealityAdding New Dimensions to the Story
  13. 13. AR: adds a layer of what WASMuseum of London. Historical images layered over the visible world.
  14. 14. AR: adds a layer of what WASNational Geographic Channel. Big screen overlay brings dinos to the mall.
  15. 15. AR: adds more layers what ISLego Store kiosk shows a fun, animated scene of each model.
  16. 16. AR: adds a layer of what ISN’TFujitsu touts high security standard with virtual security guards.
  17. 17. AR: adds a layer of what ISN’TComic books come to life, with heros literally leaping off the page.
  18. 18. AR: adds a layer of what ISN’TMarkerless, flash-based augmented reality breaks new ground.
  19. 19. AR: adds a layer of what COULD BEUsers literally step right into a new pair of Converse to find the cool look.
  20. 20. AR: adds a layer of what COULD BEZugara turns the online shopping moment into a real shopping moment.
  21. 21. AR: adds a layer of what SHOULD BE A virtual 3-D model demonstrates proper installation procedures.
  22. 22. AR: adds a layer of what we WANT TO BE Why just race when you can use Red Bull cans to build the track?
  23. 23. AR: adds a layer of what we WANT TO BE A desktop app promotes Iron Man by putting you “inside the mask.”
  24. 24. AR: can add a layer of lore and legendGnomes from 6,666 years ago have arrived with beer? Let’s see ‘em.
  25. 25. But is there an augmented elephant in the room?
  26. 26. Augmented reality is still finding its formfactor. But as the experience becomes more frictionless– and thus more ubiquitous– its ability to add endless layers to the story around us will change the way we live.
  27. 27. AR: will ultimately add to every part of the story Wearable sensors and image detection will add multiple persistent layers.
  28. 28. AR: will ultimately add to every part of the story Techniques like “articulated natural web” and “holographic overlays” arise.
  29. 29. HTML5:The Story is in the Experience
  30. 30. HTML5: a beautiful orchestration of elements “if HTML5 is the bones then CSS is the skin and the muscles are the javascript”
  31. 31. HTML5: can provide “feel” beyond the video
  32. 32. HTML5: can create a shallow sense of depth
  33. 33. HTML5: can make the story more fluid Multiple elements of text, graphics, video, and vector art play beautifully.
  34. 34. HTML5: can create an environment for info This project turns an IMDB-like data base into a relative, visual experience.
  35. 35. HTML5: can give the story a living design Mesmerizing by bringing a print-like design into a parallax environment.
  36. 36. HTML5: can give the story a cinematic feel The opening sequence for this LA talent agency is big screen-worthy.
  37. 37. HTML5: can help us author the story together Every second by a different artist, yet a continuity of soul.
  38. 38. HTML5: can let us inhabit the story personally The meaning becomes personal when the words and images are yours.
  39. 39. HTML5: can make us the victim of the story The terror also becomes yours when you become the hunted.
  40. 40. HTML5: can let you steer the story yourselfThree worlds. Three dreams. A music video you can explore and add to freely.
  41. 41. HTML5: can take the story anywhereResponsive Design means one code base, but differently-sized experiences.
  42. 42. The real promise of HTML5 is to help usorchestra experiences that let our stories truly scale– across platforms, across devices and even across time.
  43. 43. HTML5: can take the story anywhereA platform for Michelob ULTRA that will different devices– and expectations.
  44. 44. HTML5: can take the story anywhereWe built the Do Network for Lenovo to connect locally– and scale globally.
  45. 45. The smartest marketing today just sets upthe game, and lets consumers play it out. So you have to know your game.
  46. 46. New Shapes in Storytelling: Art, Alchemy and Applications
  47. 47. Next Is: a mindset unafraid to mix and mash Google’s Project Rebrief shows, yet again, the power of good ideas.
  48. 48. Next Is: marketing + gamification + mobile Another genius call: creating their own economy of points.
  49. 49. Next Is: gesture and pattern recognition The Kinect SDK is part of a revolution in input and control.
  50. 50. Next Is: brain controlled skateboardsRapid advances in “mind reading” and high-res brain-scanning are here today.
  51. 51. New is: moving social to the right brain Is it great user experience or just the way we think? Either way, it works.
  52. 52. New is: mass micro manufacturingFrom “post-digital” to “re-physical.” The real world strikes back!
  53. 53. Next Is: micro-casting and personal channels Personal recommendations flow freely. Is this the new face of curation?
  54. 54. New is: wysiwyg app-making Cabana lets you create very simple or very truly rich apps in minutes.
  55. 55. New is: seeing the cross-pollination of ideas Personal data mining? Social heat-mapping? Just call it cool.
  56. 56. Next Is: self-assembling anthropologyWith Cowbird, Jonathan Harris makes the story the story. Beautifully.
  57. 57. Some Final ThoughtsOn where we are #andwhatsnext
  58. 58. Embracing new technologies means thinking like an alchemist. Mixing andmashing– sometimes failing and flailing–until you make turn something into gold.
  59. 59. The digital story isn’t something youreceive. It’s something you experience with all your senses, including your sense of control.
  60. 60. Fearlessly diving into each new wave oftechnology is essential. But keeping youreye out for sea changes is the bigger trick.
  61. 61. The story– as an actual tale or as thestory what will happen between brandsand consumers– isn’t told anymore as much as it emerges between us all.
  62. 62. It’s not a conversation. It’s a dance. Sometimes you lead. Sometimes youfollow. But you’ve got to share a rhythm if you want to stay together.
  63. 63. Soon the world will truly start personalizing around us. What will itmean to live our lives inside the bubble of our own story?
  64. 64. Technology Changes the Story: Little Red Riding 2012
  65. 65. Tech and Storytelling: Red Riding Hood 2012Once upon a time, there was a girl called Little Red Riding Hood, who traveled through the woods using Google Mapson her mobile phone to navigate the poorly-marked road. She was on a quest to deliver food to her sick grandmother,who had sent a message to the girl’s Facebook inbox requesting the best rated motza-ball soup on the Lower East Side.Along the way, a terrible wolf spots her and decides that he’d like to eat the girl. Using the 4G wi-fi connection on his5-inch phone tab, he begins searching popular recipes for little girl. He finds several on Pinterest alone.He approaches Little Red Riding Hood, she exclaims, “Oh, what a large touch screen you have!” She then posts arather artsy photo of the wolf on Instagram, to which she receives many tweets, texts and Facebook warnings in reply.In the meantime, the wolf checks in at her grandmothers house, becomes Mayor and swallows the old woman whole.He then plays Angry Birds Space, cues up “Hungry Like the Wolf” on Spotify, and patiently waits.When Little Red Riding Hood arrives, she notices that her grandmother looks suddenly very large and hairy – in starkcontrast to her most recent Match.com photos. The girl quickly consults Twitter, only to find her grandmother’s update“Being eaten by a wolf. Help!” Luckily for her, it had been retweeted so many times that it sat near the top of her feed –right next to the wolf’s recent update, “’Bout to eat sum grl. LOL. #YUMYUM”Little Red Riding Hood turns and runs out the door immediately, only to run into the Huntsman, who should have beenthere to help, as Bottlenose was putting all the signals together in a semantically cohesive fashion, but was simply toobusy episnorting season one of Game of Thrones on HBO Go, and really couldn’t be bothered.The end.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×