Websites That Tell A Story

Ever since the fall of Flash and the rise of HTML5, we've seen a lot of developers experimenting with the possibilities of HTML5. One trend that has gained popularity is the creation of a story-driven website that takes viewers through a series of pages connected with story elements and creative navigation.

10 Story-Driven Websites That Will Blow Your Mind

Here, I have compiled a list of the best story-driven websites that will blow you away. Let's begin the journey:

Story-Driven Websites That Will Blow Your Mind

1. Find Your Way to Oz

This is a website for a new movie, The Wizard of Oz. It's a collaboration between the Chrome Experiment team at Google and Disney. The website will take you through a circus allowing you to play with objects inside the circus.

Find Your Way to Oz

2. Black Negative

This is a website that combines creative layouts with beautiful soothing sounds and interactive navigation. Each page contains its own navigation allowing you to experiment around and discover more content as you play around with it.

Black Negative

3. Pi's Epic Journey (Life of Pi)

This website illustrates the epic journey of Pi from the movie "Life of Pi". The whole experience is navigated using only the scrollbar so you can sit back and enjoy it. As you scroll down, you will see a series of pictures and illustrations in a comic strip layout. The content of the website consists of clips from the movie, facts and behind the scenes that viewers might find interesting.

Pi's Epic Journey (Life of Pi)

4. Ben the Bodyguard

Although this might be old, it is still a very good example. Ben the bodyguard is an iPhone app that protects users' data. As you scroll down, you will see Ben walking down the street explaining the use case scenarios and the benefits of the app. A very well executed website that serves its purpose very well.

Ben the Bodyguard

5. Hexaedro

This is a simple website with creative navigation and a very subtle way of telling a story. The story is driven by big images and outline illustrations.

Hexaedro

6. My Life in 20 Years

This is a very cool website that will tell the story of you, the viewer.. in 20 years. First you need to login with Facebook and it will use your Facebook data to predict what will happen to you in 20 years and present it in a fun way for you to enjoy. Trust me, you'll love this.

My Life in 20 Years

7. NASA Prospect

This is one of the websites that really pays attention to music and how it transitions between each scene. This website will take you through the life of an astronaut, drifting away throughout space. Each planet this astronaut lands on has its own unique music that expresses the story of the planet really well. I suggest you go through each planet slowly and enjoy the music.

NASA Prospect

8. ParaNorman

ParaNorman is the perfect example of how a comic should be presented on the web. As you scroll sideways you'll see text that annotates each scene. You can click on other characters to interact with them and converse.

ParaNorman

9. Google Guidebook

This website was created by Google and shows how you can get creative using Google's products such as Youtube and Maps. The website is presented as a guidebook. As you flip through each page, the content will fold in and form a page for you to interact with. Each page has its own animation and interaction.

Google Guidebook

10. Get Going – Drexel University

This is one of the university websites that I admire. Finally, an education institute that cares about design. This website will take you through the life of the students, each with one sentence of wisdom. Combining the perfect visual, words of wisdom and very subtle inspiring music, it's like you are really there.

Get Going - Drexel University

Conclusion

As you can see, it requires a lot of effort to design the right visuals and sounds in order to create an immersive storytelling experience. These examples have struck the perfect balance between visuals and sounds that I think not many have been able to do.

If this list is missing something or you have created the best story-driven website out there, feel free to share your experiment down in the comments below.