Storytelling in web design is becoming increasingly popular, and we should expect to see more of it in 2021. Along with personalization, which is also essential, designs take on a more narrative nature.
In addition, storytelling is a design technique that conveys messages to users in the most appropriate and meaningful way possible.
The more people who understand that your brand is important and honest, the more genuine its interactions will be. Designers and marketers should use storytelling to build genuine connections with their viewers, which will lead to increased interaction.
Moreover, consumers and audiences are even more captivated when you tell the story behind your brand or product. Users tend to follow the story rather than the brand or the product. You can also engage with the consumer on a personal level. You can appeal to their emotional side and forming 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. When you explicitly illustrate how your product or brand will bring value to the lives of your consumers, your conversion rate rises.
Moreover, above and beyond 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.
Also, tell a story with substance and truth to it. When your consumers come across your product or brand, make sure they have the opportunity to experience the story for themselves.
Your brand story can live on through positive product reviews from your customers, as well as word-of-mouth referrals that boost your brand.
Here are some examples of incorporating storytelling in design:
Web Design Elements That Can Help You Tell a Story
When telling a story in web design elements, you can use a variety of design elements. According to Elementor, you can use the following:
- Color
- Line
- Shape
- Values of light (and darkness)
- Form
- Composition
- Perspective
- Space
- Texture
These elements are not new. It takes imagination and vision to combine these elements that designers are so familiar with in order to tell a compelling story solely through imagery.
It gives these elements new life, transforming them into something the users haven’t seen before. 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 most visible 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
1. Animation
Let go of all the non-web design principles and elements that were once held in high regard. Additionally, to tell a story, combine colors, scaling, depth of field, manipulate perspective and point of view, brighten and cast shadows, and, if possible, add shapes.
Furthermore, 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.
2. Practicality
You can also create an immersive design by programming your design’s movements and activities to react to the actions of your users. Scrolling, for example, can initiate animations or transitions, while hovering over buttons can draw attention to a particular design feature.
3. Embedded Elements
Also include pro-grade images, stunning videos, and other multimedia 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. A high-quality image, for example, can lead to another landing page with a video. Whichever way you design, there should be a connecting pattern woven into the audience’s imagination.
Additionally, make certain that the message, feelings, and even the characters you use remain consistent during transitions and the like. A break in your continuity is a break in your story, making your narrative web design weak.
3. Story Development
Make sure that this first landing page needs to be compelling to draw the audience to the next link or act one of your narratives. Maybe you piqued their interest and they want to learn more about your product, so what should the next landing page they see be?
Make certain that you do not lose your audience at this stage. Further, if you promised to provide more detail about your product, maybe you can do so with a brief but concise video that gives them a glimpse of your product and how it can add value.
You can also add one or two more pages if appropriate, such as a page for those who have additional questions that lead to your FAQ page. It may be a chart or an interactive website. Make sure you have a convincing CTA or Call to Action for those who are interested in buying or viewing the information.
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 similar to Act 3, where the climax of the story is ideally a good link, or even better, a conversion (subscription or sale).
Some Examples of Narrative Digital Marketing Campaigns
1. Dove #ProjectShowUs
This particular Dove campaign is so visually appealing that it’s unlikely, regardless of gender identity, not to click on the photos or CTA buttons on the first page alone.
Dubbed as #ProjectShowUs aims to break traditional and constricting standards of what is beautiful. The gorgeous photos of confident women embracing their unique beauty demonstrate the website’s message that “Beauty is not determined by form, height, or color,” and show you—the user—that you, too, have your own unique beauty to embrace.
Above all that, 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. Finally, 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
Likewise, 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. Each layer responding differently to how the users scroll through the website.
Parallax scrolling creates depth, a user-controlled immersive interaction. It can also 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.
Moreover, 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.
3. Pampers #SharetheLove Campaign
The video above is compelling, especially since it uses the point of view of their children. The ad starts with the line, “Imagine if we saw ourselves the way our babies see us.”
Make sure your customers experience the story themselves when they come across your product or brand.
The movement wants to empower moms to rethink their internal dialogues to join other moms’ communities. It aims to celebrate their extraordinary role in their children and their families lives. These videos incorporated in their websites and social media channels are very effective in getting this narrative across.
You can also make the design immersive. You can use the movements and activities in your design are set to respond to your user’s actions.
Get Your Message Across With a Narrative Web Design
Improve our Web Design Team with Microsoft Tools
Improve your team with the best tools, like Microsoft Visio Standard 2019, a reliable diagramming and flow chart tool to communicate complex ideas and data to your team with powerful tools designed to help you work efficiently and create figures faster. With Visio, you hold the means to direct your business to better heights.
Buying software online is indeed integral in this digital economy. Do not shy away from upgrading your business tools today to continue thriving as a business or company.
