You are here

Web Design, Contributed

7 Design Elements to Improve Storytelling on Your Site

April 26, 2018

Update elements of your web design to enhance the story of your business and engage your users. 

There’s more to storytelling – at least on websites – than just words. While your content is important, the design and layout of your website contribute to the effect of your story on users.

You want your users to feel special. When you use specific language to attract your audience, you engage with them on a personal level.

In the first part of this series of articles, I discussed the benefits of storytelling on your website. 

In this, the second piece, I outline 7 design elements for your company to use to develop your user experience and strengthen your storytelling.

1. Structure Your Tone & Layout to Align With Your Story

Choose the tone and layout you use on your site to connect with your target audience and complement your story.

The right layout communicates that you understand who your customer is and how they prefer to engage with your company. 

The layout for Blackhouse seen below communicates refined taste and propriety.

BlackHouse Layout_Simple Tone

This tone of this image communicates simplicity but also is meant to highlight the high quality of their offerings (steak isn't in the picture on accident). 

With this layout and tone, you use your story to provide an impression on your users about your company. 

2. Consider Gamification to Increase Engagement

Want to attract users to your site and include them in your story? Play a game with them.

Gamification adds game elements to your story. Progress bars, reward points, and small games all make your website more interactive.

Users don’t want to just passively observe your story from a distance. Drawing your customer into the story with you allows them to identify with your brand.

The gamification model, illustrated here, shows how gamification creates longer lasting engagement and drives the user to keep returning to your brand.

For example, Dropbox rewards users who complete certain objectives, prompting a response from the user to return and try to “improve their score.”

DropBox Gamification

Source: Dropbox

Effectively drawing a customer into the story not only helps the user identify with your organization, but drives them to return on a regular basis.

3. Leverage Interactive Features to Retain User Attention

Small interactions on your website engage visitors. Interactive web design features contribute to your story through retaining user attention and interest.

Some interactive features you can work into your site include:

  • Hover features over an image to display text can be a nice way to incorporate more content.
  • Parallax scrolling, where foreground graphics move faster than background images, can be used to have aspects of your story pop up to readers as they scroll down your page.
  • Interactive icons surprise users and can add a fun effect to the website.

For example, Supercrowds plays with the location of icons to engage the reader.

SuperCrowds Interactive Features

Interactive features allow your content to stand out from the ordinary and motivate readers to pay attention to the story you are telling.

4. Be Creative Through Visualization

Sharing data creatively allows you to incorporate what once were boring numbers in a fun way.

Google’s Data GIF Maker, for example, is a fun way to make your content more visually appealing to your users.

Your visualization doesn’t have to be complex. It gives life to the words you are using to connect with your audience. If they weren’t interested before, visualization elements might attract them to your content.

5. Prioritize Responsive Web Design for More Traffic

Responsive web design means your site adjusts to the mobile device the customer is using.

Using responsive design allows users to consume your content on your website no matter what device they are using. Regardless of the story you’re telling, your need your readers to be able to follow it across devices. 

6. Use Your Site to Answer Your Customers’ Problems

Your website should provide a solution to your customers’ wants and needs.

One goal of telling a story through your brand is to have your customers discover a problem they don’t know they have. The power of storytelling lies in drawing readers to a conclusion.

Once you’ve made a clear and compelling case for why they need what you offer, ensure you have an easy way for them to access it.

SquareSpace Make It Fresh

Source: Squarespace

Squarespace presents a beautiful example of web design that creates an impression that your current design is lacking – a problem you didn’t suspect before seeing their “Make it fresh” motto.

7. Create a Site Where Everything Is Shareable

Today, users share everything on their social media, including the businesses they hire and the services they use.

Usie social media to promote a story audiences can associate with your business. Social media gives you the opportunity to engage with otherwise uninterested customers across social media platforms.

Your story may connect personally with a user, and you want them to be able to share it easily. Social media provides that opportunity. 

Incorporate social sharing buttons on your website so your users can quickly add you to their story and, in turn, promote your business.

Build Awareness of Your Brand Through Storytelling

Telling the story of your business engages your viewers and encourages them to keep coming back to your website.

Think about how you can connect your business with a narrative, and use the 7 design strategies above to strengthen your business’ story.


About the Author

Stephen Moyers Headshot

Stephen Moyers is an out of the heart writer voicing out his take on various topics of social media, web design, mobile apps, digital marketing, entrepreneurship, startups and much more in the cutting edge digital world. He is associated with SPINX Digital, a Los Angeles web design company & digital marketing agency. When he is not writing, he can be found traveling outdoors with his camera. You can follow Stephen on Twitter: @StephenMoyers