8 Digital Storytelling Website Examples That Captivate Audiences

As web designers, we don’t just want to present your mission statement or selling point. We want to help you to tell a story to your audience. Digital storytelling is an essential component in making that happen.

As an approach to web design, digital storytelling weaves narratives into traditional web projects by using text, visuals, sound, and interactivity to tell a dynamic story. With a saturated digital space, it can be difficult to stand out from the crowd. This approach offers a compelling solution that allows for the thoughtful integration of your brand identity and story with technology to create an immersive experience.

What Is Digital Storytelling?

Digital storytelling is an approach to web design that aims to captivate your audience with an interactive and visually appealing experience. It relies on the use of digital tools and media to bring a narrative to life through a website’s design and content.

This approach emphasizes the user experience and high-quality visuals to create an engaging website for users. The physical act of scrolling through the web page prompts features such as interactive elements, motion effects, animations, and engaging texts. As a result, the user is brought within the story, becoming an active participant who can trigger a sensory experience.

In recent years, digital storytelling has become an increasingly popular approach to web design. Storytelling is, and always has been, the backbone of any web project. However, this particular method effectively integrates interactivity and animated elements to transform your website into an immersive and visually appealing experience. Not only does digital storytelling capture your audience’s attention, but it opens the door to a new world of digital possibilities.

How Is a Digital Storytelling Website Brought to Life?

A number of design techniques can be applied to create a visual experience that will create a long-lasting impression on your audience. Some of these include:

? Narrative Structure

A narrative or story is at the core of every digital storytelling project. These websites are designed in such a way that guides the user through a specific journey. This can be a linear storyline, with a beginning, middle, and end, or it can be broken down into segments or stages that are encountered through further exploration.

? Scrollytelling

Scrollytelling is a term given to the medium through which users experience digital storytelling websites. A simple function of a mouse can transform a website into a completely revolutionary experience. This technique involves the implementation of elements which are triggered by the act of scrolling through the page, either vertically or horizontally.

? Animation

Animated visuals and text are at the heart of the matter when it comes to digital storytelling. By adding animation, images, videos, graphic design elements and text are brought to life. Website typography can fade in and out, images can slide across the screen, and numbers can count up or down—there is a whole world of possibilities! All of these attention-grabbing elements add a layer of engagement that transforms a website into a fully interactive experience for the user.

? Audio and Video

To create an effective digital storytelling experience, it is always important to consider how the five senses can be activated. Both sound and video can be used as powerful sensory tools to enhance the storytelling experience, by adding depth, emotion, and immersion. The thoughtful inclusion of atmospheric sound, narrative, voiceovers, or rich narrative videos can make the website more immersive and engaging while creating an emotional impact.

Real-Life Examples of Digital Storytelling Website Design

Drug Test Innocence

Drug Test Innocence is an online research report which delves into the consequences of inaccurate field drug tests in the United States of America. The report utilizes horizontal scrolling as well as animated elements, such as an interactive map, to introduce users to the severity of the issue. The effective combination of high-impact visuals and typography creates awareness while also providing an engaging method of distributing the information.

Vestiaire Collective

The Vestiaire Collective is a Certified B Corporation that buys and sells pre-loved luxury and designer clothing. Through the use of vivid colours, striking graphic design elements, and scroll-triggered animations, the Collective implemented a digital storytelling approach in their 2023 Impact Report, to tell a story about their sustainability report. Additionally, users can access and download a PDF version of their Impact Report that presents information through a more traditional approach.

Frank Gehry and the Walt Disney Concert Hall

In 2023, the Getty hosted a two-part exhibition devoted to the design of the Walt Disney Concert Hall. Sculpting Harmony is an entirely digital exhibit which relies upon digital storytelling to pull together models, sketches, and photographs from architect Frank Gehry’s archive. Getty’s presentation is a beautiful example of how audio and visual elements can be thoughtfully integrated into a website to create a full sensory experience. Archival footage of Gehry, dynamic animated text, and symphonic audio come together to create an engaging journey into the home of the Los Angeles Philharmonic.

Brown Revisited

For historians and armchair experts alike, Brown Revisited offers a novel opportunity to experience a monumental court case. Through AI-generated audio, archival photographs and documents, and scrollytelling, users are transported into the courtroom of the landmark Brown v. Board of Education (1954) case. Spearheaded by Professor Jerry Goldman and supported by the Chicago-Kent College of Law, Cornell Law School, and Justia, the OYEZ Project revolutionizes historical education through the use of AI technology and digital storytelling.

UAID PLUS

UAID PLUS provokes users with a bone-chilling narrative, enhanced by striking imagery, graphic design, and audio. Based on real events, users are brought directly into the Russian invasion of Ukraine through animated text conversations between two fictional Ukrainians, Vasia and Alina. The website is an engrossing example of impactful digital storytelling, by providing a compelling narrative that ultimately encourages users to donate to the UAID Foundation.

Plank Can Make Your Digital Storytelling Website a Reality

Here at Plank, we understand and appreciate the magic of digital storytelling. In fact, storytelling has been woven into the bones of every web project we’ve developed. With new advances in technology and experimentation with interactivity in web design, we have welcomed this approach into our digital toolbelt. Keep reading to learn more about some of Plank’s real-life examples of digital storytelling projects.

CGU 100

When it came to celebrating their centennial, Claremont Graduate University (CGU) wanted to reflect back on their storied history in an engaging and compelling way. The result was a digital storytelling website that brings their story to life with imagery, memories, and interactivity. CGU’s history is exceptional—so we knew their website should be, too.

By using a digital storytelling approach, we were able to bring users back to the early days of the college, in an explorative and exciting way. We were also able to add pages to the mini site, including their community memories page which reconnects CGU alumni and shares their experiences. In addition, the site encourages contributions and an investment in the college that impacted so many alumni over the past 100 years.

From Vimy to Juno

Funded by Digital Museums Canada, From Vimy to Juno is an online exhibit that showcases rare archival imagery to educate students on Canada’s role in the First and Second World Wars. We worked alongside the Juno Beach Centre Association, in partnership with the Vimy Foundation, to create a responsive and engaging digital resource.

In the second part of a legacy project, we developed this online exhibit to ensure key historical events can be accessed at various educational levels. Historical records, personal testimonies, and digital assets are presented in a chronological timeline, with each milestone leading users on a path of sensory discovery.

The website was developed in accordance with our Ethical Web Collective to ensure an inclusive, high-quality design that puts the user first. We worked with Digital Museums Canada to offer a barrier-free experience regardless of the users’ ability or access to modern technology.

PAWCon Scrapbook

Plank Appreciation Week (PAW) has become a cherished part of Plank’s culture over the years. Starting as Plank Appreciation Day (PAD), PAW is an annual event that spans a week in September and invites team members to acknowledge and celebrate one another in intentional ways. In 2023, we took PAW one step further by hosting PAWCon—a two-day conference in Montreal with workshops and discussions hosted at La Piscine.

Afterwards, our team created the PAWCon Scrapbook, which is a digital storytelling project that exhibits the memories of our event in interactive and exciting ways. By dragging the page, users can explore various facets of the conference, including taking a peek at some of our informative and entertaining lightning talks, investigating the contributions of our Barbie Dream House competition, and seeing just what makes Plank… Well, Plank!

Want to learn more about how we can make your digital storytelling experience a reality?

Let's chat!