Once upon a time, we lived in a world where websites had screaming neon colors and an overabundance of text to entertain and educate us. The Internet (think Geocities…) was a bright and shiny new place for us to play and, as web developers, we did the best we could, considering the circumstances: HTML, low screen resolution, limited color sets, and nothing to really work from aside from real-life print examples and our imaginations.
Fast forward to 2016 and our story has come a very long way. Computers, mobile devices, smart TVs, and even some cars now keep us connected to the Internet 24/7.
And as the technological devices we use to access the Internet have developed, so too has our ability to create beautiful, effective, and unique websites. If you’re too young to remember what it was like in our not-so-long-ago and what it is like in our present day tale, take a look at this:
While Google’s look has always leaned toward the simpler side of things, you can see what a world of difference nearly 20 years has made. Whether it’s Google’s website or someone else’s, there is much more thought and planning put into the design of every piece of a website now… because we have the ability to do so.
For businesses, a website serves as its online identity and is often the first point of contact they have with prospective customers. To have a website come across as an afterthought or something shoddily thrown together could be just as detrimental as a marketing director answering a client’s call with “What do you want?” When executed the right way though, a website can be a highly effective marketing and sales tool.
With two decades of amazing advances in web design and development behind us and amazingly helpful CMS like WordPress at our disposal, businesses no longer have any excuse to not have an awesome-looking or well-functioning website. But is it enough anymore to just have a well-made website?
Your audience expects a lot more from you these days. You may be able to draw them in with a perfectly executed web design, but if the content doesn’t resonate with or intrigue them, you might lose their interest all the same. That’s why websites need to tell a story. What story, you ask? Well, that depends. What do you offer? How can you put your audience into the seat of the story, to make them relate to the story, to yearn to find out what happens (to them) in the end? The story is yours and you’ll need to find the best (and most creative) way to tell it through design.
Lightweight and fast, Hummingbird caches, minifies, combines, defers and compresses, making optimizations in line with Google PageSpeed, and turning your website into a lean, mean, speed machine.
There are many reasons why an author may write a story, but there is always one goal they hope to achieve: to get the reader hooked. It could be a bloody tale of revenge or a story about a little girl and her puppy walking home from the beach. It doesn’t matter what the underlying plot is, the author simply wants the reader to feel something about the story.
Businesses are no different when you think about it. Their goal is to sell a product or service that can help improve their customer’s lives in some way. You know this. That’s why you believe in your brand. But it can often seem difficult to get that point across to an online audience when all you have is a bunch of words and images on a website to work with. Those words and imagery can be extremely powerful in telling your story though, especially when carefully constructed.
Many businesses may see this and think, “I’m not a writer and we definitely don’t have a story to tell. We sell dog ice cream.” But that’s not true. Even the simplest of business models—from the independent freelancer to the large enterprise—have a story to tell. It just might not be their own.
Let’s say you are in the business of selling ice cream for dogs, you can think about your website’s story in a number of ways:
No matter which angle you take, it’s all about making a connection with your audience. That’s why businesses have websites: they want to virtually connect and communicate with their audience in the hopes of selling their brand. With the right story in place and with the proper design executed to tell it, you can bring your visitors out of the passive reader role into something more interactive.
Let’s take a moment to review the benefits of a storytelling approach for your website’s design:
Of course, all the benefits above can only be achieved if you’re willing to put in the time, effort, and creativity in order to create an interesting story that your audience can relate to.
Then the storytelling approach might not be right for you. And that’s fine. Just hold onto this article for future reference and jump back into it when you’re ready to go.
Any great writer, teacher, or even movie critic will tell you that there are five critical stages in a story’s plot. Regardless of whether you’ll be telling a traditional “story” (like in Story #1 above) or conveying your brand’s story through another approach, the goal should be to hit each five of these goals—and in this order—as your visitors traverse through your website.
We’re going to explain what the stages are, provide you with some tips for how to create your story in that stage, and also give you some real-life examples that execute this stage well.
“In the beginning,” “Once upon a time,” “In a galaxy far, far away”… These are all ways you’ve seen stories start out before. This is what is known as the Exposition or the setup of a story. You meet the characters, discover the setting, and realize that there’s something more going on than meets the eye.
For websites, this is where you will establish the conflict. While the word “conflict” may have a negative connotation to it, that’s not always the case in storytelling. Basically, it all depends on what you’re trying to solve for your visitors. Whatever it is, your website’s story needs to start there.
Talent Garden’s website is shown above. You can see that what they’re offering is a coworking space. For their website’s story, they’ve chosen to rely heavily on background imagery that speaks well to their audience: the freelancing community and other work-from-home individuals who want a place to work alongside others. They then use messaging that is very simple and clearly explains the “conflict.”
The next part of your brand’s story should deal with the actions arising from the conflict. Since the very beginning of your website (the top of the home page or the first part of a parallax scrolling site) dealt with the setup, it’s now time to build the tension around the conflict. This is what’s known as Rising Action.
When it comes to using design to tell this part of the story, it’s all about action cues. Whether you have an actual story to tell or you’re simply presenting your site’s visitors with a logical set of information starting with “This is the problem you face” to “This is how we can fix it,” you’re going to need to guide them through the storyline visually.
The National Geographic Channel’s Killing Kennedy website. The site’s design uses colorful sliding icons and text boxes to share the growing plot points and build up tension. You already know how the story between Kennedy and Oswald ends, but this site has done an amazing job in using design to guide the reader downward through the story and into the thick of the action.
The very middle of your story should be the climax or high point. So in the case of Mr. Bear’s story from earlier, you could reveal that dogs who receive ice cream during training remember commands 33% better than dogs who only receive biscuits. That stat should provide some sort of turning point in your story where visitors should feel surprised or shocked by the discovery.
Physical or emotional, you want the climax to elicit some sort of response from your audience, and you’ll want the design of your website to reflect that too.
From start to finish, the Make Your Money Matter website does an amazing job of telling the story of their audience’s pain. It’s in the climax though that they really outdo themselves.
The tension builds so wonderfully from the moment you start scrolling, that by the time you get to the climax, you might feel too nervous to fill out the calculator. But it’s a simple request—simply fill out two fields. And then all they ask of you is to click a button (with an ominous looking color). The resulting screen tells you how much money the bank made off of you. Whatever your resulting emotion, you won’t be able to help but feel compelled to continue through the journey to see what happens next.
Think about your website (or your story) like a mountain. The exposition would be the base of the mountain. The rising action would be your climb to the top of the mountain. The climax would be the peak. And then you’ve got to make your way back down to complete your mission. That is the falling action.
In the case of your website’s story, this can be any sort of action or steps that will logically direct visitors from your big reveal down to the final goal. Some websites lose it at this point and just start throwing random testimonials or social media feeds into what was previously a logical flow of information. Don’t interrupt your visitors’ train of thought. Make sure to keep them on track with the falling action.
La Moulade’s website is the epitome of minimalistic design. And to top it off, it has one of the best examples of falling action I’ve seen.
After quickly stating who they are and then bringing visitors to their climax (a bicycle bell rings to let you know you’re there), they guide you through snapshots from their creative portfolio. That’s it. Their falling action is just a portfolio. No words. All images. And it works! Whether you’re compelled to click on any of them to see more or just scroll to the end to find out what’s at the bottom, they’ve found a simple and creative way to hook you.
The final stage is the end of your visitors’ journey and the resolution of your story. Once your visitors have reached this point, there shouldn’t be any remaining questions. They understood the story, they realize why it relates to them, and they feel compelled to now take the action you’re requesting. The design piece of this will translate simply enough: give them a clear call-to-action that wraps up the journey and gives visitors an action they’ll want to pursue now.
Zensorium has a very simple product to offer, but that doesn’t prevent them from sharing their story through well-crafted imagery, simplified text, bright swatches of color, and a logical progression of information. You can see this very clearly in the structure of their home page.
There is a rotating banner that takes up two-thirds of the left side of the page. It goes through bright and yet calming imagery that takes you through the basics of who they are. On the right-hand side, however, the images stay put (unless you scroll downwards). That is their resolution. Their goal is for you to purchase their products. So by engaging visitors with a simple timeline on the left, the static imagery on the right becomes the most logical final step.
Developing a story for your website and brand doesn’t necessarily mean you need to create some off-the-wall character whose adventures your visitors will follow through the site–though that might be pretty cool, too. Storytelling is about creating a unique journey for your website visitors—a journey that reflects the experience they’ll have when they engage with you as a brand.
So take some time to really think about who you are and what story will be the most effective at getting visitors (and prospective customers) to relate to you. Then you can put all of these storytelling design principles into play.