Everyone loves a good story.
From movies to novels, to even a machine spinning in a circle, people love to find a special connection to a narrative that’ll drive them forward in life. Storytelling is nowhere near a new concept. Humans have used storytelling as a device for communication from the beginning of our existence. Verbal narratives have been around so long, it’s be impossible to date back their origins, but the first story written on stone tablets can be traced back! The Epic of Gilgamesh, the oldest written narrative, is said to be originally written around 2150 – 1400 BCE. This outdates Homer’s writing by 1500 years. When we look back and analyze The Epic of Gilgamesh, we find that the writer(s) conveyed themes and concepts that are still understandable in today’s society. Love. Friendship. Pride. Mortality. Why is it that a story from thousands of years ago can still be read and related to in the modern day?
Well, it’s simple really. Humans are naturally social creatures that will emotionally connect with anything that’ll allow for it. Even across generations, narratives will still find a way.
Let’s give it a try.
The rock in the image above is named Frank. He’s a family guy who would do anything for his rock wife, Roxanne, and two rock children, Skipper and Emma. Because of recent high winds in his area, Frank has been pushed around and separated from all his beloved family. It’s been weeks and yet Frank hasn’t been able to find his way home. All hope seems to be lost for Frank. He sits on the ledge of a cliff as the winds blow him closer and closer to the edge. Frank thinks his last thought and makes his final wish, then a strong gust blows in and he is sent tumbling over the edge. He rolls and rolls, hitting his head then his butt again and again. Finally, he lands on solid ground in front of a group of rocks and blinks rapidly as his dizziness goes away. Frank smiles with pure joy as he realizes the rocks in front of him are Roxanne, Skipper, and Emma. By some twisted luck and a turn of fate, Frank has been reunited with his rock family!
See? It wasn’t much, but you just emotionally connected to a rock. You were able to visualize his character, see his struggles, and understand his emotions.
So how can this method of communication be applied to other aspects of life, like technologies and marketing? Storytelling isn’t restricted to fictional narratives. Looking around, almost everything is aligned with its own narrative and uses the process of building a story to communicate!
Storytelling in Web Design
The design of a good website can tell a story. Moreover, you can use storytelling to design a good website. Outlined by Jerry Cao in his article, “Storytelling web design: some key techniques with great live examples”, effective narrative in web design uses visual aspects and interfaces to create a story that people want to interact with. This may sound like a difficult task, but Cao’s breakdown of the methodologies into four categories is really effective in explaining the use of storytelling in web design.
Narrative
Before designing a site, start with the story your brand has to tell. Was it started in a basement? Did it start as a joke between friends? How did you take your brand from concept to reality? A good brand narrative does three things:
-Keeps it simple
-Makes it emotional
-Lets it be real so it stays believable
A brand’s story that keeps to these guidelines will relate to a larger audience and attract attention.
The Big and the Small
Breaking down a narrative further, there are two parts to it. The Big and the Small. “The Big” refers to the broader elements of the story that provide a framework of your brands purpose that anyone can understand. Once someone becomes familiar with the Big, only then can they start looking into the details. “The Small” means the fragments of your narrative that provide extra elements that can’t be ignored.
Think of the Big and the Small in terms of a novel. The Big is the over arching story, the hero’s complete journey. What was accomplished by the end of the book? Katniss wins the Hunger Games. Harry becomes a Wizard.
The Small would be each individual chapter. What specifically did the hero do to accomplish their goal? Katniss made alliances, spent time training, and fought for what she believed was right. Harry learned spells, played Quittage, and explored his powers.
Only by understanding the full story, the complete narrative, then can we go back and understand how each step played an important role in the journey.
Design
Once you have a breakdown of your narrative and its pieces, you need to transfer that into your design. The website’s design should reflect the emotions your narrative has to convey. You also should use storytelling to influence a user’s decisions in your design. This can also be constructed much like a novel would be: The Setup, the Conflict, and the Resolution.
Setup: Introduce your brand at first glance. Explain to the user in one second what you are offering them. Take look at the website for Betsy Johnson, a fashion company that sells jewelry, handbags, and clothing. The homepage displays models wearing big flashy earrings, fun shirts, and unique bags. This communicates that the brand sells this quirky style of fashion.
Conflict: Design an emotion your users will feel. Betsy Johnson’s website is basically saying, “Look how cool the models look with our products! Doesn’t that make you desire to have them for yourself?”
Resolution: Include a call to action so the users interact with your site. Click to buy, continue browsing, or engage further. Anything of the sort to influence them deeper into your story. A popup message that offers me 40% off after browsing the site for only a few minutes? Sign me up!
Connect
Now, none of these aspects of a website’s storytelling will work unless you design for them to… connect! Use the interface to bring together your narrative and design in a way that naturally flows one piece into the next. By connecting everything seamlessly, you’ll tell a cohesive story that is communicated through your web design.
Storytelling in Social Media Marketing
This idea of a brand narrative doesn’t stop at the website’s design. Social Media is often used to communicate a story as well. To grow as a brand on different types of social platforms, you’ll need to connect with your audience!
Advertising uses storytelling methods to emotionally relate to potential buyers and get then to engage with the brand. Though the aspects of storytelling in web design can be applied to social media, there are different rules when it comes to social platforms and marketing.
Luke Fitzpatrick describes methods of promotional marketing though narrative in his article How to Use Storytelling to Connect With Your Audience on Instagram. His overall message can be broken down into four sections: Values, Image, Demographics, and (of course) Connect.
Values
The first key point in marketing is to communicate your values. Make sure there is a clear understanding of your brands mission… but this doesn’t mean including a paragraph long mission statement with each post. You must communicate this visually.
The example Fitzpatrick uses is Fenty Beauty by Rihanna. Most of their pictures and videos show off the wide range of foundation and concealer shades that they offer. With only a few posts, it’s clearly communicated to the audience that the brand focuses on inclusivity of all skin colors and making makeup for everybody.
Image
Once you have a brand image, stick to it. Keep your posts consistent by sticking to a color palette and a similar aesthetic with each post. This makes a brand’s social media account look clean and put together, as well as making it recognizable.
Demographics
By using analytics on Instagram or other social media, you can understand who exactly is viewing your page, interacting with your stuff, and enjoying your content. This information is helpful because you’ll know who your story is getting across to and then continue marketing towards these demographics.
Connect
By using storytelling in marketing on your social media pages, people will connect to your brand emotionally. This will make them more likely want to purchase from you. Connect, not only in the sense of your customer’s empathy, but also in the sense of a cohesive narrative that you want to convey.
Improve Your Storytelling Framework
Storytelling is not mastered overnight. In any form of narrative, the more skill you have in storytelling, the more clearly you’ll connect to your audience emotionally. Improvement comes with practice and knowledge of the integral elements of storytelling.
Earlier, I briefly mentioned the 3-part structure of a story (the Setup, Conflict, and Resolution) and how it could be applied to web design. Absolutely all narratives follow a similar 3-act structure. Understanding this concept is only the first step in improving your storytelling skills.
In his novel, Nobody wants to Read Your Sh*t, Steven Pressfield expands greatly on the 3-act structure by listing off a set of universal rules that a good story follows:
1) Every story must have a concept. It must put a unique and original spin, twist or framing device upon the material.
2) Every story must be about something. It must have a theme.
3) Every story must have a beginning, a middle, and an end. Act One, Act Two, Act Three.
4) Every story must have a hero.
5) Every story must have a villain.
6) Every story must start with an Inciting Incident, embedded within which is the story’s climax.
7) Every story must escalate through Act Two in terms of energy, stakes, complication and significance/meaning as it progresses.
8) Every story must build to a climax centered around a clash between the hero and the villain that pays off everything that came before and that pays it off on-theme.
Some of these principles may seem self-explanatory (Of course a story needs a hero and a villain, duh!) but that just means you’ve already committed them to your storytelling skillset! Next time you go to write a narrative, start by reading this set of rules again and you’ll find their application will improve your narrative greatly!
A Machine Spinning in a Circle
Narrative is everywhere. Often times it’s not noticeable at first. Look at this video of a machine spinning around in a circle, trying to collect a liquid spilling out of it.
At a glance, it seems to be a malfunctioning machine. It moves around to one area in it’s enclosure and pulls the liquid back inside it, but as soon as it moves to a new area the liquid pours back out. Honestly, it looks kind of stressed. The machine needs this liquid to keep on chugging, so it frantically goes around collecting it even though it’ll pour back out no matter what. If it stops moving for a few minutes, it may run out of the liquid and power down. Its effort seems pointless, but extremely necessary despite how redundant it actually is.
This machine was created by Sun Yuan and Peng Yu and its actually an art piece titled, “Can’t Help Myself”. Although it was designed to tell this narrative, it is not obvious at first. You won’t understand the meaning of the art piece unless you characterize the machine and write the story for it.
This only works because humans have a tendency to imply narrative anywhere. We are empathic beings that will relate to anything and almost everything.
Things that may not look like they’re telling a story often have an incredible narrative behind them. From web design to social media, anything story worth telling will come to fruition.
Storytelling is everywhere. As a skill, it can be used to emotionally communicate and connect with anyone. That’s the power that storytelling has to offer.
Reilly L
29 Nov 2022Hi Tina, I appreciated your story about the rock, Frank. It was a good way to get the reader’s attention. I think it is very important that we all look at the overarching story that our websites want to tell (the big) and combine it with little details that complete the story (the small). Storytelling can be a hard concept to master, but with practice, any writer can improve and be able to captivate an audience through a website. If anyone wants to dive more into the knowledge of storytelling, here is an article that I found; https://writers.com/the-art-of-storytelling#:~:text=For%20writers%2C%20storytelling%20is%20the,metaphors%20for%20the%20human%20experience..
Hanna Z
30 Nov 2022Hi Tina! First of all, I love all of the multimedia elements that you included in your blog. That makes it visually very appealing and more engaging for the reader. Storytelling is a very powerful aspect of writing that everyone should tune up their skills in. Including your very own story was such a great example of doing that! I thought that your section on improving your framework was very useful. I know for me that it’s easier to build a skill like that when I have a formula that I can follow. I found this article that also expands upon storytelling in web design that would be useful: https://tinyfrog.com/storytelling-in-web-design/
Genevieve F
30 Nov 2022Hey Tina! This was sucha. good blog post. I especially love all of the different images you used as examples in your storytelling in web design. The one that stood out to me the most was Fenty Beauty and values. There has been sucha. big contravorsey in the makeup industry surrounding shade range for such a long time. I think you’re totally right about how they use a wide variety of shades of foundation to show their company values and set a narrative about their business. GReat job this week! I found another blog about storytelling that might be fun to read. Great job again!!https://blog.hubspot.com/marketing/storytelling
Jared S
30 Nov 2022Hi Tina! I thought your blog post covered the topic perfectly! You demonstrated the basics of storytelling and then applied that to a website in a clear manner. A part that stood out to me was your description of how the example website used storytelling. I wouldn’t have thought of the images as creating a mood but you showed it very well. Here is another blog that talks about this same topic. https://medium.com/@flannerykj/the-craft-of-storytelling-in-web-design-46e17e9f2153
Jean W
1 Dec 2022Hi Tina,
Great post this week. I thought the story about Frank the rock was a great way to get us engaged in the blog right away, as well as a clever way to demonstrate the power of storytelling. I thought the blog was well organized and the video gave it an extra layer of multimodality which added to its effectiveness. I thought the section on values particularly interesting, and that in marketing, it is important to communicate the brand’s mission visually. I found this article on brand storytelling interesting:
https://marketinginsidergroup.com/strategy/brand-storytelling-defined/
Kenny B
1 Dec 2022Hey Tina, this was a really great blog post! As someone who’s working for a major in Writing, it’s nice to see the aspects of storytelling applied to web design, and how that can really enhance a website. Particularly with how you explained how narrative works on a website (keeping it simple, for example), and how you break down the bigger and smaller parts of a narrative as well. The discussion on storytelling in social media is quite funny to me, as it reminds me of various food brands on Twitter (such as Wendys), and how they’ve developed a unique identity and story around themselves on the site. Overall, I really liked this post!
Aiden P
1 Dec 2022Hey Tina, I really enjoyed reading this blog entry! You did an excellent job explaining the main points through different examples and modes of media. Giving a brief history on storytelling, providing a cute narrative about a rock, and including a video about a robot struggling to achieve its goals and keep itself alive were all great ways of keeping the reader’s attention and making them care about the subject! The visuals you included helped give us a better understanding on how storytelling is used in social media and marketing. I can tell you did a lot of extra research for this blog post, and I highly appreciate that. This was a fun read!
Emma C
1 Dec 2022Hi Tina, I enjoyed reading your blog post. I think it’s so interesting to discover that elements of storytelling are used in so many different fields and industries, I never really considered how story telling was a big part of web design. I really liked the style of this blog post, I like how it engages with the reader in a very friendly and down to Earth manner. It explained things really nicely without assuming what the reader knows and doesn’t know. The use of the machine video at the end was a great way to conclude the blog post and allow the reader to see a real visual example of what we learned.
Al G
1 Dec 2022I enjoyed this blog post a lot, especially the introduction. I wasn’t expecting the Epic of Gilgamesh to be mentioned in this class, but here we are. The power of storytelling across time really can’t be underestimated. This also applies to web design. I also enjoyed your anecdote about a potential story, a short example in which readers already got invested in something so minimal. I think this article provides some more insight on the general concept of the importance of storytelling in web design: https://elementor.com/blog/storytelling-in-web-design/
Bruna N
6 Dec 2022Hi Tina,
I really enjoyed your blog on storytelling especially since I’m a writer! I loved how you introduced the blog post with the story about Frank. It was a funny and interesting way to to show the impact of storytelling and set up the rest of your post. I agree that the emotional connection to a story is what makes it so influential and memorable. I found the section about the structure that every good story follows to be really informative. A story always needs some sort of unique concept and a climax that follows an inciting incident. Here is a link that talks more about creating stories https://jerryjenkins.com/how-to-write-short-stories/
James H
8 Dec 2022Hey, Tina. I really enjoyed your blog. I think it provided a lot of detail on how to effectively tell a great story. One thing that stood out to me was the numbered list that explained some of the important parts of storytelling. I like that you bluntly explained these aspects of storytelling. Most people are familiar with these ideas so you did not need to provide an in-depth explanation. Still, highlighting them ensures the audience is aware of their importance. Personally, this was a great reminder and I can look back on these details when I attempt to tell a story on my own. Another small note is that I really liked all the pictures and videos that you used to help add a visual element to your blog. I was interested in how you can successfully portray a hero in a story and found a blog from Book Cave that discussed the topic. Here is a link! https://mybookcave.com/authorpost/how-to-craft-the-perfect-hero-or-heroine/