The Relationship Between Storytelling and Website Design

Storytelling is a medium we all find throughout day-to-day life. Sharing experiences from your trip to Cancún is a form of storytelling. In fact, much of life can be seen as the raw material for great storytelling. We like stories because they demonstrate ideas in new ways that we might have never thought about.

I feel that the rules of storytelling can be applied to digital interfaces and web design. The precepts of good storytelling are universal across all genres. You must understand how to capture interest and bring people along for the ride. Web design is more fluid because it’s not an archetypal story – but the general structure is the same. In this post I want to look at various similarities between good storytelling and good web design.

Hook Interest

Much like the first page of a great novel, you need to capture your reader’s attention almost immediately. There needs to be something in both works of art to draw people further into your work. It’s common for websites to use design elements, headings, photo sliders, and other large pieces to bridge the gap of new visitor to captivated reader.

whiteboard screenshot homepage design interface

The necessity of reeling people into your design plays a role throughout the entire visit. When people browse around to various pages they expect a similar type of mood, atmosphere, and language. This can also be expected in a good story and your website should aim to tell the most interesting story.

Start by asking how people might find this particular website. Is it from a Google search, or possibly links from other websites? What type of content are they expecting to find? Unlike some designers I do believe that aesthetics are important to the success of a digital interface.

Natural Flow

Navigation is a huge part of web design. In fact it may be one of the most important parts, because without a method of navigating pages your visitors are stuck in a rut. However you need more than just some links to each internal page. You need to generate a flow between each page, and especially between each navigation link.

ps photoshop etiquette website single page

Parallax websites do an excellent job of creating flow between each content section. When all your content is located on the same page it definitely simplifies the whole process. But it doesn’t matter how many pages you have, as long as they’re all simple to find and easy to maneuver. Natural flow comes from an understanding of whitespace, composition, and general design theory.

To understand flow just compare how storytellers guide the reader from one chapter to the next. You want to provide a similar navigation experience where visitors never feel confused or lost. It does require practice but it’s easy to master with time. Browse through some web design inspiration galleries to see how other designers build this flow.

Make it Personal

A reader typically understands that someone else(or a team of people) worked to produce a literary piece. This is the same of a website but most people do not understand how it all works together. If possible try to make each design a bit more personal so that visitors can connect with the the webmaster or company.

This doesn’t just imply using a team photo on the company staff page(although this is a nice touch). Let visitors know that the website represents the feelings of an individual or company. Provide an honest mission statement, client testimonials, a history of events, or anything which connects the digital website into the real world. People like reading stories because we all have stories to tell.

andrea mann portfolio fullscreen background photo

People can enjoy visiting websites for a similar connection. Granted most of us just need to gather information, but it helps to know that real people are on the other end of a website managing the domain & hosting fees. Give your visitors a reason to connect with the company or individual represented in the website. This isn’t easy but it goes a long way towards building a distinguished, recognizable branding.

Climactic Points

Each screenplay will have it’s climax and this is based around the typical 3-act or 4-act structure of storytelling. Web design provides a method of communicating information where some pieces of content hold more importance than others. You naturally end up with more climactic content which behaves like a conclusion in a series of events(or pages).

For example in a freelancer’s website the portfolio page would likely have the most thrilling, exciting points of information to each visitor. This doesn’t mean the freelancer’s blog or “about me” section has little value. But visitors will likely be more interested to see what this freelancer has created rather than who they are or what they blog about.

code and theory agency website layout

One huge difference is that storytelling requires readers to go through all previous acts before reaching the climax. Website design requires that you cater to everyone regardless of which page(s) they’re visiting. Try to make each page have it’s own climactic area of content – this keeps it all interesting and helps to maintain balance throughout the site.

Beginning-to-End Structure

If you’ve ever truly studied a TV show or fiction novel you will notice the story seems to conclude at just the right point. This is different for a website because there is no “final” page for visitors to end with. I find it’s best to ensure that every page reads like a short novel – from top-to-bottom or beginning-to-end it should have a feeling of completion.

This doesn’t mean you should be writing a short novel’s worth of text on the page. I’m suggesting to design the layout in a style where the heading lures people further down the page. By the footer your readers should feel like they’ve consumed every bit of pertinent information on that page.

atlantis world fair website design parallax single page

It’s tough to get this structure because each person will consume information differently. I’d suggest putting together larger blocks of content separated by headings or images. In this way you can provide context for people who might only skim your page and won’t spend time reading everything.

The most crucial point is to never leave anyone hanging around with extra questions. Obviously it is a good idea to add some contact information for visitors who do wish to ask questions. But if you can provide the important stuff in your page content then visitors can leave the site with a natural sense of closure.

While the two mediums of storytelling and web design do not directly correlate with each other, there are many overlapping ideas. Some of the most interesting websites can tell a beautiful story with the layout, interface, typography, color scheme, and language. As you practice designing more websites these ideas will become natural and more easily understood.

Jake is a researcher and writer on many design & digital art websites. He frequently writes on topics including UX design, content marketing, and project management. You can find more work on his portfolio and follow his latest tweets @jakerocheleau.

Leave a Reply

Your email address will not be published. Required fields are marked *

50 Free CSS-Only Icons for Website Graphics