Industries

Features ↘

Solutions ↘

Inspiration ↘

Learn

Visual Storytelling:

Start Building More Engaging Content

Memorable, meaningful, and highly engaging, visual storytelling is the narrative technique powering the web’s most interesting content.

Astronomical object, Rectangle
Drinkware
Material property

What is Visual Storytelling?

At its simplest, visual storytelling is a fancy term for the narrative technique of “showing, not telling”. Within web design, it’s the practice of using rich visual media such as graphic illustrations, photographs, video, and animated charts to tell immersive stories.

Since people respond to visual stimuli at a much faster rate—and on a more personal level—than just text alone, visual storytelling is a great tool for turning complex information into easily-digestible, engaging stories.

Naturally, this has made it a very attractive tool for digital marketers. Executed well, visual storytelling can produce captivating narratives and engaging digital experiences that resonate with audiences on a highly personal level. Often used for marketing initiatives, it’s used in everything from raising brand awareness, to generating sales and driving website traffic.

The Rise of Visual Storytelling
on the Web

Widely popularized by publishers like the New York Times in the early 2000s, visual storytelling on the web stands in direct opposition to “fast”, clickbait content. It’s a long-form, intentionally “slow”, and indulgent content format designed for long attention spans. With a focus on craft, quality, and meaning, visual storytelling has quickly been adopted by content marketers to engage readers and communicate a premium brand identity.

“Snow Fall” — The New York Times editorial that pioneered visual “scrollytelling” web content

Visual storytelling in and of itself isn’t a new concept—it’s been around since people first took pigment to stone and created stories on cave walls. Yet, within modern web design, it’s constantly shifting and changing. Web creatives are increasingly moving away from static visuals and the “H1, H2, paragraph text, single image” format that has dominated corporate web design for years.

Thanks to advances in web creation platforms, more people than ever are launching immersive visual experiences on the web, full of engaging animations and micro-interactions. As highly engaging pieces, these often involve a level of reader participation and personalization that other digital marketing formats simply can’t achieve.

Popular Visual Storytelling
Techniques for Web

There are so many ways to tell a compelling visual story on the web. With the right tools, you can easily experiment with different visual and graphic media, as well as slick animations, micro-interactions, and transitions. Here are a few of the most popular techniques you’ll want to familiarize yourself with.

Parallax Scroll

Background elements move at different speeds to foreground content, creating instant depth and perspective. Take this to the next level by using a full-width background video.

Video Scroll

Make sure readers see your most engaging content by triggering videos to play on scroll.

Before & After Sldier

A simple but effective way to gently introduce interactivity to keep your readers engaged.

Parallax Scroll

Background elements move at different speeds to foreground content, creating instant depth and perspective. Take this to the next level by using a full-width background video.

Show / Hide

Engage readers with elements that appear or disappear on click. Great for pop-ups and quizzes.

Animated Charts

Turn quantitative data into a visual focal point as readers scroll through. A must for stats-heavy storytelling.

3D Elements

Bring instant wow-factor (and another dimension) to any web design.

Visual Storytelling Example Formats

You can draw on visual storytelling techniques to make any communication instantly more engaging—from advertorials and annual reports, to campaign landing pages and product demos. These visual storytelling examples showcase the creative ways content marketers across industries are tapping into the format.

Awareness campaigns

Create visually-driven campaign stories that inform and educate while putting audiences in control of the narrative. In this example, pieces of content are revealed as you click through multiple page journeys at your own pace.

Product explainer stories

Present company history or product info in an interactive timeline format that takes audiences through a visual chronological journey.

Immersive editorial

Bring longform stories to life by breaking up large blocks of text with stunning images, videos, and animated infographics to improve flow and readability, while drawing attention to important info.

Advertorials

Combine diverse visual elements, from video to parallax scroll, animated text and even a horizontal scrolling section as you move through the page.

Digital graphic novels

Graphic novels are a perfect example of visual-driven storytelling. On the web, you can amplify illustrations with scroll-triggered animation.

Photo essays

Play with image carousels and scroll animation to turn a block of static images into a dynamic display—lingering on those you want your reader to sit with.

Annual reports

Play with image carousels and scroll animation to turn a block of static images into a dynamic display—lingering on those you want your reader to sit with.

How to Create a Visual Storytelling Site

Visual storytelling on the web used to require a lot of time and expensive developer resources—meaning only organizations with the biggest budgets could afford to produce them. As a specialist skill set, this also meant creative direction and control was often outsourced to external creative agencies.

Thanks to advances in the no-code development space, creative teams of all sizes are now able to quickly create compelling visual stories in-house for a fraction of the cost, with complete technical and creative freedom.

Tools like Vev allow non-technical content creators to create visual storytelling websites by dragging-and-dropping visual storytelling elements and animations. They also allow technical creators to weave in custom components without coding the basic stuff from scratch.

Discover More

Vev is enabling a new generation of creatives to craft and publish interactive websites without knowing any code.

Build a Visual Story Like the New York Times


The New York Times is renowned for its visually-driven editorial content, which makes effective use of scrollytelling video and parallax image techniques. We had a go at recreating one of their pieces in Vev—without coding a thing.

Plan the visual content design from the get-go

What comes first, the design or the written content? Unfortunately, design is often an afterthought. In the case of visual storytelling, design and content go hand-in-hand. The design aspect should be considered much earlier in the process to ensure the visuals and text align and compliment each other.

Keep a consistent visual style

It may be tempting to include a multitude of visual media into your digital project—you can’t go wrong by infusing a bunch of images, audio, navigational icons or 3D animations into text-heavy content, right? Actually, adding visual elements for the sake of bringing some movement or depth to your content can backfire if you don’t consider the overall picture. For best results and increased audience interaction, keep the visual style consistent. Follow UX/ UI best practices, ensuring all imagery and other media elements work well together, and that the visuals actually align with the story itself.

Foster reader participation

Get readers involved like never before through playful micro-interactions that let them direct the story. Scroll progress indicators, clickable icons that carry you through the narrative, or interactive visual prompts allow the reader to become an active participant in your story’s “journey”. Bonus points for examples that create multiple pathways readers can choose to go down.

Use movement and transitions

Gone are the days of static text blocks accompanied by a solitary image or two. An interesting navigation brings fluidity to your story. Strategically add breaks and transitions such as video scroll or parallax scrolling to divide dense content blocks into easy-to-read sections that ease the narrative flow.

Web Design Best Practices for Visual Storytelling

Ready to create your own visual story? Before you jump in, have a quick scan of these best practices to ensure you don’t confuse, overwhelm, or bore your readers.

Plan the visual content design from the get-go

What comes first, the design or the written content? Unfortunately, design is often an afterthought. In the case of visual storytelling, design and content go hand-in-hand. The design aspect should be consider1ed much earlier in the process to ensure the visuals and text align and compliment each other.

Keep a consistent visual style

It may be tempting to include a multitude of visual media into your digital project—you can’t go wrong by infusing a bunch of images, audio, navigational icons or 3D animations into text-heavy content, right? Actually, adding visual elements for the sake of bringing some movement or depth to your content can backfire if you don’t consider the overall picture. For best results and increased audience interaction, keep the visual style consistent. Follow UX/ UI best practices, ensuring all imagery and other media elements work well together, and that the visuals actually align with the story itself.

Foster reader participation

Get readers involved like never before through playful micro-interactions that let them direct the story. Scroll progress indicators, clickable icons that carry you through the narrative, or interactive visual prompts allow the reader to become an active participant in your story’s “journey”. Bonus points for examples that create multiple pathways readers can choose to go down.

Use movement and transitions

Gone are the days of static text blocks accompanied by a solitary image or two. An interesting navigation brings fluidity to your story. Strategically add breaks and transitions such as video scroll or parallax scrolling to divide dense content blocks into easy-to-read sections that ease the narrative flow.

Don’t ignore text

While not the main focus, text itself can be shaped to fit the art direction and visual style of the story. It can absolutely supplement a visual story, provided that typography best practices are not ignored.



Keeping Visual Storytelling
SEO-Friendly

In the current digital landscape, visual narratives are a sure-fire way to stand out from the crowd. Yet, if they offer a terrible user experience or aren’t SEO-friendly, they won’t do your marketing initiatives any favors—especially since page load times are directly correlated to conversion rates. Here are a few best practices to tick all the UX and SEO boxes.

Optimize images, GIFs and videos for web

Visual files tend to be quite heavy and can seriously impact your site loading speed. Compressing them is a simple way to make them web-friendly. You can do this by resizing images, choosing a different file format, or changing the compression rate. It may involve a bit of trial and error, but eventually you can figure out which image compression format works best for your website.  

You can also use data compression tools for animated visual elements, such as GIFs and MP4s, to reduce file size. When creating GIFs, stick to shorter animated image loops, fewer frames, keep the size under 8MB, and the quality at 420p or 720p max.

Apply lazy loading

Lazy loading simply means that images and videos won’t fully load on your website unless the user clicks or scrolls over it. By utilizing this technique, you can improve page load times, minimize the effort web browsers need to decode images, and reduce data/bandwidth for users visiting your site.

Remember visual file meta-data

It’s important to remember that search engines like Google can’t crawl visual media. This isn’t to say that you should cut down on visual elements in your content, but you need to take the right steps to make sure your website is crawlable. Give your visual media keyword-optimized file names, and always include alt-text in your video and image descriptions so that your website shows up on Google’s radar.

Test page speed and performance

There are loads of tools out there to test your website’s performance to see if it meets Google’s standards. The fastest and easiest one is WebPageTest—simply enter your website URL and select the type of test you’d like to run. Google Lighthouse is another great tool for checking your website’s performance. There are countless metrics you can test on Lighthouse, including performance, SEO, best practices, accessibility and PWA (Progressive Web Application).

Optimize images, GIFs and videos for web

Visual files tend to be quite heavy and can seriously impact your site loading speed. Compressing them is a simple way to make them web-friendly. You can do this by resizing images, choosing a different file format, or changing the compression rate. It may involve a bit of trial and error, but eventually you can figure out which image compression format works best for your website.  

You can also use data compression tools for animated visual elements, such as GIFs and MP4s, to reduce file size. When creating GIFs, stick to shorter animated image loops, fewer frames, keep the size under 8MB, and the quality at 420p or 720p max.

Apply lazy loading

Lazy loading simply means that images and videos won’t fully load on your website unless the user clicks or scrolls over it. By utilizing this technique, you can improve page load times, minimize the effort web browsers need to decode images, and reduce data/bandwidth for users visiting your site.

Remember visual file meta-data

It’s important to remember that search engines like Google can’t crawl visual media. This isn’t to say that you should cut down on visual elements in your content, but you need to take the right steps to make sure your website is crawlable. Give your visual media keyword-optimized file names, and always include alt-text in your video and image descriptions so that your website shows up on Google’s radar.

Test page speed and performance

There are loads of tools out there to test your website’s performance to see if it meets Google’s standards. The fastest and easiest one is WebPageTest—simply enter your website URL and select the type of test you’d like to run. Google Lighthouse is another great tool for checking your website’s performance. There are countless metrics you can test on Lighthouse, including performance, SEO, best practices, accessibility and PWA (Progressive Web Application).

Shapes, Yellow, 3D

Ready to Start a Visual Story?

Play with Vev’s pre-coded visual storytelling components to get started. You can create as many projects as you like for free, adding a plan when you’re ready to share your story with the world.