Incorporating Storytelling Strategies in Web DesignMayleen Meñez
Storytelling in web design is growing increasingly popular, and we will see more of this design trend in 2021. Along with personalization, which is also essential, designs take on the form of storytelling even more.
Storytelling is a design technique that brings messages across to users in a most relevant and meaningful way.
The more people know that your brand is valuable and authentic, the more real its interactions. Designers and marketers should use storytelling to establish real connections with their audiences that eventually translates to higher engagements.
When you set the story behind your brand or product, consumers and viewers are even more captivated. Users prefer to follow the narrative, not just the brand or the product. You would interact personally with the user by reaching out to their emotional side and building a personal bond.
So make sure you’re able to tell the story of why your brand or product has come to be and what value it brings to your customers. It increases your conversion rate when you clearly describe, through a convincing narrative, how your product or brand can add value to the lives of your customers.
More than the story you’re sharing, make sure your brand or product will back up what you’re saying. Your product or brand must be able to walk the talk, so to speak.
Tell a story with substance and truth to it. Make sure your customers experience the story themselves when they come across your product or brand.
Your brand story should live on through your users’ positive product feedback, including word-of-mouth referrals that boost your brand.
Here are some examples of incorporating storytelling in design:
Design Elements You Can Use to Tell a Story with Web Design
You can use various design elements when telling a story in web design elements. According to Elementor, you can use the following:
- Values of light (and darkness)
These elements are not new. It takes creativity and vision to incorporate these elements that designers are so well aware of to tell a compelling story just with imagery.
It gives these elements a fresh breath, so they take on a different form not seen before by your users. With these usual elements, web design storytelling aims to create something unique and widely compelling to keep its users glued to the website’s content.
This storytelling is best seen in social media posts. A brand’s social media account is simply a curation of a brand’s story, told in such a way that it evokes users to click, like, share, and buy.
Some Design Techniques for a Narrative Web Design
Take all the non-web design concepts and components that were once set in value and let them loose. Mix colors, brighten and cast shadows, manipulate position and point of view, use size to tell a story, and incorporate shapes if necessary.
Your creativity and ingenuity are the only limitations when envisioning how you can deliver the website’s set goals with out-of-the-box storytelling.
You can make the design immersive, where the movements and activities in your design are set to respond to your user’s actions. For instance, scrolling can trigger some animations or transitions, while hovering over buttons can highlight a certain design element and the like.
3. Embedded Elements
There should be a clear visual map when you use different mediums, so the story remains clear and your website does not become cluttered. For instance, a high-quality image can lead to another landing page where a video is shown. Whichever way you design, there should be a connecting pattern woven into the audience’s imagination.
Ensure that the message, emotions, and even the characters you use remain consistent amid transitions and the like. A break in your continuity is a break in your story, making your narrative web design weak.
3. Story Development
This first landing page needs to be compelling to draw the audience to the next link or act one of your narratives. Maybe you got them interested to learn more about your product, so what should be the next landing page they will see?
At this point, make sure you do not lose your audience. If you promised to give more information about your product, maybe you can do so with a short but clear video that gives them a glimpse of your product and how it can add value.
You can add one or two more pages if necessary, like a page for those who have more questions leading to your FAQ page. It can be an infographic or an interactive page. For those interested in purchasing or seeing the details, make sure you have a compelling CTA or Call to Action.
Your CTA needs to lead the users to that point in the story where they are left with no choice but to take action and get some resolution to their situation.
This is like your Act 3, where the story’s climax is hopefully a successful connection, or better yet, a conversion (subscription or sale).
Some Examples of Narrative Digital Marketing Campaigns
1. Dove #ProjectShowUs
This Dove campaign is so visually compelling that it makes it irresistible, whatever your gender orientation maybe, not to click on the images or the CTA buttons on the first page alone.
Dubbed as #ProjectShowUs aims to break traditional and constricting standards of what is beautiful. Its claim that “Beauty is not defined by shape, size or color” is clearly shown by the gorgeous images of confident women embracing their unique beauty and showing you–the user–that you have your own unique beauty you can embrace too.
The campaign is authentic, unique, and real, much like what the website says it aims to give. It sparks enough curiosity in the readers to click on every image that shows women showing real-life versions of beauty. At the end of a user’s encounter with the website, it will not be surprising if the user becomes a believer in their own beauty and, consequently, support this brand and its products even more.
2. Nissan Note
We see a new approach to narrative or storytelling web design in the Nissan Note campaign: parallax scrolling. It enables you to see the different layers of a design, with each layer responding differently to how the users scroll through the website.
Parallax scrolling creates depth, a user-controlled immersive interaction. It can increase visitor engagement and curiosity, drawing them through your brand’s narrative seamlessly.
Any kind of immersive or interactive design is very powerful because it gives users the feeling of control of their site interaction.
The car brand Nissan Note‘s Japanese site uses parallax scrolling to convey their product’s story powerfully. Users will definitely scroll down until the end to see what happens in the end. It tells a compelling story about a car for the entire family.
Image Source: Nissan Note
If you were in the same country or had access to purchase this car, you would probably be calling the company by now or digging through the site for prices and contact information.