7 Ways to Tell a Great Story with Design

Carrie Cousins.
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.
chimp

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.
beast

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

Conclusion

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

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…

15 Best New Fonts, February 2024

Welcome to February’s roundup of the best new fonts for designers. This month’s compilation includes some innovative…

The 10 Best WordPress Quiz Plugins in 2024

Whether it’s boosting your organic search visibility or collecting data for targeted email marketing campaigns, a great…

20 Best New Websites, February 2024

It’s almost Valentine’s Day, so this latest collection is a billet-doux celebrating the best of the web this month.

Everything You Need to Know About Image Formats In 2024

Always trying to walk the tightrope between image quality and file size? Looking to branch out from JPGs and PNGs this…