3 Dynamic Web-based Stories

The web is a pretty exciting right now. The significant and unprecedented change and improvement we’ve seen in the past two years is astonishing. There is a new level of interaction that was previously only achievable by using Flash. We’ve been unshackled from relying upon proprietary software to make significant interaction possible, and the web today is much better off because of that change.

A particularly impressive trend I’ve noticed in the past year is how people are starting to approach digital storytelling. As an open and collaborative environment, the web has the potential to change the very way we tell stories. Just think about it — at this point, there are probably millions of people who read almost entirely on their portable wireless devices. I have personally started to pack away my collection of books because I almost exclusively read on my iPad. The ability to have my entire library with me at all times is seductive. It’s never been easier to find, buy, and read books.

Storytelling goes beyond books, though. An interaction-friendly web allows for a new way to experience stories. Here are a few web-based stories I’ve found particularly impressive:

Mega Shark Story

Mega Shark is the story of a shark who finds himself ostracized because, well, he is a gigantic scary shark. The story leads you through Mega Shark’s quest to make a friend. The illustrations are gorgeous. The art style is lush and vibrant, emerging you in a stunning undersea world.

Mega Shark screenshot

The story looks just as good on iPad as it does on a desktop or laptop. The transitions are smooth and natural, evoking the feeling of flipping through a children’s book. It’s easy to imagine sitting down and read this story to your kid (or niece/nephew, in my case).

Mega Shark Screenshot 2

Mega Shark is, as far as I can tell, one of the first stories to be created, not adapted, for screens. And it succeeds — boy, does it succeed. It has proven that maybe there’s a very successful future for children’s books on the web. Not just as ebooks, but as living, breathing, interactive entities in their own right.

However, if you do intend on reading this story to your kids, you might want to read it through all the way first. Just because, you know. No spoilers, but it’s good to know in advance what you’re sharing with your kids.

The next story is definitely not for kids.

Hobo Lobo

Hobo Lobo of Hamelin is an ongoing, slightly risque and overall pretty bizarre take on the Pied Piper by Stevan Živadinović. It’s a parallax style site which responds very beautifully to gestures (though is sometimes a little too sensitive), at least on my Mac. Unfortunately it doesn’t work very well on iOS, but Stevan admits that with some effort it wouldn’t be too hard to make work well on all devices.

One thing this story takes advantage of that Mega Shark didn’t was the ability to play sound and subtle animations to help captivate readers. Which some of the mechanics of the story need a little refining, it’s an interesting take on telling a story using the advantages of the web to enhance user experience.

Hobo Lobo of Hamelin Screenshot

Stevan was kind enough to write up an entire tutorial based around how he created his story, so if you’re intrigued or interested in doing something similar you should give it a read.

The last example today is probably the most impressive case of storytelling on the web I’ve encountered.

Why the Sky is Far Away

Why the Sky is Far Away (Pixel Fable) is the web adaption of a Nigerian Fable about — as it says — why the sky is far away. It tells the tale of how Aondo, the Sky, fell in love with a beautiful woman and how that leads to him fleeing far away from the earth. This story is significant for a few reasons, the first of which is cultural:

This project comes from the concept of Afro-Futurism. As a topic, Afro-Futurism is rooted in history and African cosmologies, using pieces of the past, both technological and analog, to build the future. It is concerned with African consciousness, especially in the Diaspora, and it explores the methodology of liberation.

Pixel Fable Screenshot

But Pixel Fable isn’t just culturally significant, it’s also technologically significant. The project is a hybrid solution of many different available web technologies. Like Hobo Lobo, it also uses parallax to help enhance and control the flow of the story. It has a bright, enchanting illustrative style that blends texture, geometry and photography. Pieces of illustration blend together, hide and appear as you progress through the story.

The most remarkable aspect of the story, however, is what’s called augmented reality. At the beginning of the story, you’re prompted to print out augmented reality markers. At specific parts in the story, you’re instructed to hold up each marker to your webcam.

Pixel Fable Screenshot 2

When you hold up the markers and play the augmented reality segment, the marker you’re holding gets transformed on camera into a part of the story, effectively bringing you into the story itself. (If you aren’t using the markers, there’s a video you can watch of someone demonstrating.)

With this fable, storytelling has transcended beyond written and spoken word into something integrative and immersive. It’s a beautiful example of the incredible capabilities of the web as a platform for storytelling, and it’s only the beginning. Just think of what might be possible for future stories on the web.

Have any other good examples of digital storytelling? Feel free to share.

Leave a Reply