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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.