7 Ways to Tell a Great Story with Design

Default avatar.
March 20, 2017
7 Ways to Tell a Great Story with Design.

A website is more than just a place to hold information about your app, portfolio or products. It should tell a story to engage and delight users. (That’s one of the key elements that will help them stick around.) While a good story might start with an idea on pen and paper, it comes to life thanks to the design.

1. Engage with Imagery

The design should visually engage the user. Start with clean, clear visuals. Stellar photos, interesting illustrations or videos that wow will help grab attention and make a first impression. But the concept of show, don’t tell” doesn’t stop there. The story should be filled with imagery, both visually through design techniques and with the words on the screen. Develop a color palette that speaks to the story you are telling, with elements that drive users to completing a goal or task in the design. A good story will help lead users along the way. The design should be an obvious visual match. coffee

2. Develop a Character

In website design, we talk about user personas a lot. It’s a key part of the development process. Take it to then next level with a character in your story that users can identify and identify with. The character can be real and travel throughout the design, or can be perceived as a voice in the content. A great example of character development is from email platform, MailChimp. Freddie, the company’s cartoon mascot and logo pops up throughout the design, in the blog and in promotions. The character does a few things for the company: 

  • First, the character helps clarify the company name. As mimicked in a widespread ad campaign, there was some confusion about MailChimp.” Seeing a chimp next to the words can make it clearer.
  • The character helps showcase the fun nature that the company portrays. The tone and visuals are light and simple.
  • Freddie provides the company with a story when they don’t have a lot of other things to talk about in promotional aspects. How did the chimp come to be? where did his name come from? and so on. The character helps keep the company story fresh and moving forward.

3. Invite Participation

Add value to the design with interactive elements paired with common actions. Add touches of animation to buttons that users need to notice or help drive the eye to certain elements with directional cues such as arrows or images that lean” toward that an interactive element. Consider other effects that can keep users engaged with the story. Parallax scrolling, for example, is a highly engaging way to help encourage movement on the screen. That’s one of the reasons this technique is so popular. A good story doesn’t have to be complex. Humaan advances their story with simple hover animations paired with team photos to help you meet the people behind the company. It’s simple and effective. (Note the staff photography as well. Fun poses and facial expressions let the character of each team member shine through.) humaan

4. Design a Game

One of the hardest parts of telling a story is actually developing it. If you don’t know where to start, a simple game can help you focus and even provide a fun avenue for users. The trick to adding a game to the design is to keep it simple, short and provide some type of reward for the effort, such as a coupon code or virtual badge. It doesn’t have to be the Pokemon style game you are probably thinking about. Consider Dropbox. Getting extra space in your cloud storage account is the goal for many users. Inviting others to use Dropbox, logging in from multiple devices and connecting email accounts are among the gamification tools the company uses to give users more storage. The game is simple, there are rewards for success and it has helped create a crew of loyal Dropbox users. For users that don’t want to play the game or can complete enough tasks, Dropbox offers a paid plan to skip ahead and win immediately. (That’s the other trick to a game-style story; users must be able to win.) dropbox

5. Make Microinteractions Meaningful

Think about the tiny elements in the design that users will interact with. Social media websites in particular drive so much engagement because they create simple experiences with microinteractions. As a refresher, microinteractions are tiny moments when a user engages with a design. Every time you change a setting, send a message, log in or like a status you’ve witnessed a microinteraction. From clicking the Instagram heart (and watching it turn red) to tapping to retweet, these feedback loops are what keep users coming back. Meaningful microinteractions create a demand for the design. It adds a level of function for users that makes the overall experience worthwhile. Microinteractions also make a design helpful or desired. Connect these moments to the key goals of your website. It can be anything from allowing users to share a product they just purchased to adding something to a wishlist to signing up for an alert. robot

6. Create a Narrative

Every story has a beginning, middle and end. If your website design doesn’t represent this story flow, users can get confused or lost. Here’s the simplest of formulas: 

  • Beginning: Logo and headline. Let users know who you are and why they are on your website.
  • Middle: All of the supporting narrative that makes you special. What can you do for people who are on your site? What should they expect?
  • End: An obvious call to action such as a form, ability to make a purchase or link to something else.

7. Keep the Storyline Simple

This might sound counter to the advice in No. 6, but the story needs to be simple. This isn’t a 1,500 page volume. A simple storyline is one that you could explain in 5 seconds or less. The story should grab users right away, leave an impression and make them want to return. Yes, you can do this with a beginning, middle and end. Upstream does this all on the homepage – users can scroll for more of the middle” of the story, but there’s a glimpse of all three parts on the home page. The visuals and text tell a story of need and helping people with Upstream there to help. There’s a get involved” button on the screen and the visual is so striking that you want to help. The story is simple and effective. Users are more likely to remember it … and you. up


When you are designing a story, the most important thing to remember is that your story should be yours. Don’t try to be something you are not. Users are more likely to connect with authenticity than a made up narrative.

Carrie Cousins

Carrie Cousins is a freelance writer with more than 10 years of experience in the communications industry, including writing for print and online publications, and design and editing. You can connect with Carrie on Twitter @carriecousins.

Read Next

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…