El Monstruo: vanquishing the monster with a text
El Monstruo is a partnership between UNICEF and ING Direct to promote donations to schools in developing nations. The site takes you on an animated journey into the lives of a group of schoolchildren – who are being chased away from their school by a ferocious monster. As El Monstruo chases you to the precipice of a cliff, the interactive storytelling comes in. An option to donate €1.20 to the schoolchildren (i.e. UNICEF) via SMS appears on screen. If you choose to donate, the animation continues with a happy ending – if not, well… The monster is a simple metaphor representing the barriers many schoolchildren face getting their education, and involving the site visitor in this way gives them a more immediate reward for their generosity. It’s using interactive design in a way that really reaches out to people’s sense of empathy.Slavery Footprint: follow the steps
How many slaves work for you? It’s this simple question that’s the beginning of a journey through the chain of supply and forced labor in the modern world. Slavery Footprint walks you through how you could be supporting slavery, even without purchasing directly from companies that utilize sweatshops. They explain this chain of labour through interactive, scroll-through infographics. But rather than just explaining this process in theory, Slavery Footprints runs a quick survey that calculates how much you rely on slave labor, based on factors like the food you eat, the property you live in and the country you’re from. Slavery Footprint doesn’t just tell you a story about the modern state of slave labor – they use interactive design, data analysis and surveying to bring you into the story as a contributing factor. It’s a fantastic way to reach out to each site visitor on an individual level.Supple: SEO haves and have nots
Supple is a digital marketing agency that helps business rank better on Google through Search Engine Optimization. It follows that their page explaining SEO should be as engaging as possible for potential customers. Through smart use of illuminated hot spots, which visitors can click on to reveal key information about certain aspects of the page’s images and infographics, the site invites visitors to dig a little deeper into the world of SEO. There’s SVG animation to give the page dynamic vibrancy, and a sliding bar over some images that lets you take a look at the HTML behind an optimized site.Inception Explained
First things first: Inception IS a great movie. But it’s also confusing as hell. Luckily this website walks you through the plot with simple, interactive storytelling. The site color-codes each key character, and as you scroll down the page, the layers of dreams within dreams are represented one on top of the other. Captions pop-up, explaining each level, whose dream characters are in and other necessary information. This is a very simple example of interactive storytelling – the site lets you move through the story at your own pace. Which really, really helps with a movie as confusing as Inception!Coin: one card to rule them all
Is your wallet bursting at the seams with credit cards? Coin is a single card which you can upload and store all your credit cards on. Simply scroll through the stored cards, select one and then swipe, insert of tap-n-go as you would with any other card. The whole reasoning behind the product is fusing all your cards into one convenient place – and that’s a simple message that’s visually represented in an even simpler way. As you scroll down the page, a mess of cards stack together and transform into Coin. It’s neat, minimalist storytelling, and very convincing.Bellroy: slim your wallet’s waistline
While we’re on the subject of wallet-slimming, you might want to consider slimming the wallet itself and not just its contents. Bellroy wallets are specially designed to take up less space, even when they’re filled with the same amount of cards as other wallets. To show this, the Bellroy website gives their site visitors a sliding scale — from zero cards to ten — offering a side-by-side comparison between Bellroy and their competitors. Alongside a handful of other fantastic interactive animations, Bellroy’s site brings a bit of visitor involvement into what’s typically a very boring Us vs. The Competitors demonstration.Babel the King: it’s raining cats
Babel the King is an interactive story available through the iTunes stores. Combining text, audio, animation and interactive elements, the game takes children ages 2-8 into the wonderful world of Babel, a cat that’s jealous of the clouds and spends his days trying to annoy them. The website for the story/game offers a taste of what’s available from the download. As you scroll down the page, Babel falls through the sky alongside you and sheep trek weightlessly across the clouds. The website is bursting with movement and life, and offers a great case study in really synchronizing your website with the product you’re selling.Bon voyage: Akita shows us How Data Travels Around The Globe
An email can feel like it’s sent pretty instantaneously, but how does it actually get from one person’s computer to another? IT support service Akita has developed a step-by-step journey to explain how data travels around the world. The site allows you to scroll horizontally through the journey of an email, taking you from computer to telephone line to telephone exchange to data center, and more! It’s an effortless, interactive explanation of the movements data goes through to travel across the globe.Ben The Bodyguard
Ben The Bodyguard is an app for iPhone that helps you encrypt and protect private information on your device. The app’s branding centers around the character of “Ben”, a bodyguard with an unbeatable track record for protecting people. As you scroll down the page, Ben walks down a dark (and dodgy-looking) street as he explains the perils of letting your private information fall into the wrong hands. It’s great storytelling, with a simple premise (a privacy app personified as a bodyguard) with interactive scrolling to deliver the app’s pitch.Nissan Note
To sell their new car model, the Nissan Note, Nissan has employed scroll-down animation, reminiscent of an old-fashioned flip-book. Rather than running a video, the site displays a grid of panels displaying images that change slightly as you scroll down. The effect is that site visitors can create a movie at their own pace. It’s an interactive story about the car’s features and a family traveling through countryside to the city. Have a play around with it and see what you think!Every Last Drop: a trickling tale of water wastage
The website takes you through a single day of water usage, from the water you use in the shower to the total water used in the production of your clothes and food. It’s a simple, scroll-down story that takes you on an informative journey all the way into outer space! With so much water used in a day, the story ends on a poignant note that over a billion people don’t have daily access to clean drinking water. Using interactive storytelling to deliver a powerful message, it’s a great example of just what good design can teach us.The Boat: a harrowing tale of escape and refuge
Nam Le’s acclaimed short story collect The Boat has been transformed into an interactive graphic novel at sbs.com.au, throwing you into the world of a rickety boat fighting the full force of the ocean as it escapes from the horrors of the Vietnam War. Making use of text, sound design, illustration and animation, it’s a testament to what interactive storytelling can achieve. A memorable moment involves the text and illustrations themselves being tossed up and down the page as the characters depicted in them do the same on an ocean voyage. Immersive and emotional, this tale of survival simply must be experienced.Saijo George
Saijo George works an SEO Strategy Director for Melbourne based award winning marketing agency Supple. When he is not reading up on web design and digital marketing, he is either working on side projects OR playing Helldivers / Hearthstone / Call Of Duty. You can find him on twitter : @Saijo_George and LinkedIn
Read Next
LimeWire Developer APIs Herald a New Era of AI Integration
Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…
By WDD Staff
20 Best New Websites, March 2024
Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…
Exciting New Tools for Designers, March 2024
The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…
Web Tech Trends to Watch in 2024 and Beyond
It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…
By Louise North
6 Best AI Productivity Apps in 2024
There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…
By Simon Sterne
3 Essential Design Trends, February 2024
From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…
Surviving the Leap from College to Real-World Design
So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…
By Simon Sterne
20 Mind-Bending Illusions That Will Make You Question Reality
Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…
By Max Walton
15 Best New Fonts, February 2024
Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…
By Ben Moss
The 10 Best WordPress Quiz Plugins in 2024
Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…
By Robert Reeve
20 Best New Websites, February 2024
It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.
Everything You Need to Know About Image Formats In 2024
Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…
By Robert Reeve