Free StoryBrand Wireframe Tool

The best way to create StoryBrand wireframes

  • Save time with StoryBrand-ready layouts

  • Get an impressive, professional look

  • Easily share + gather feedback

See how it works! ☝️

 

Hi, I’m Ben! 👋

I’m a StoryBrand Certified Guide and the founder of StorySite. We help people create awesome StoryBrand sites with our website templates.

 

What is a StoryBrand wireframe?

A website wireframe is a rough layout of a website that includes the written words that will be used on the site. A StoryBrand website wireframe is a specific layout that includes all the components that most companies should include on their homepage. The goal of the wireframe is to communicate clearly and cause the reader to take action. It is your blueprint to building a storybranded website.

 

About StoryBrand 💡

StoryBrand is a company founded by best-selling author Donald Miller that promotes the idea that being extremely clear in your marketing is the best strategy to grow your business.

 

What are the sections of a StoryBrand wireframe?

There are 10 sections in a StoryBrand wireframe. Each one is designed to guide the reader through a story.

It’s not a story about you or your company.

It’s a story about your reader. They’re the hero, and you’re the guide that helps them win.

Let’s take a look at the recommended sections:

 
StoryBrand Wireframe Header Section
 

The Header Section

As you can see in this screenshot of our wireframe tool, the header of your StoryBrand wireframe should include:

  • Your logo at the top left

  • A large, clear statement of what your customer wants. (e.g. “Stay on top of your finances”)

  • A clear description of what you do as a company (e.g. “Bookkeeping and financial forecasting for restaurants”)

  • A call to action button (e.g. Schedule a Consultation)

  • An image showing a happy customer experiencing success using your product or service

 
 
The Value Stack section on a Storybrand wireframe includes your clients 3 successes laid our horizontally right below the header.
 

The Value Stack Section

The value stack should list three simple successes that your customer will experience if they choose to work with you.

The purpose of this section is to help readers see how your company can make their life better. This helps increase the perceived value of your product or service.

 

Here’s an example of three successes:

  • Stop stressing

  • Stay organized

  • Save time

 
StoryBrand wireframe stakes section contains a bulleted list of problems your client can relate to.
 

The Stakes Section

In this section we want to show the reader that we understand their problems and how critical it is to solve those problems.

Here’s an example of problems your customer is experiencing:

  • Your receipts aren’t tracked properly

  • Tax time is always a headache

  • You’re afraid you might run out of cash reserves

  • You don’t have time to deal with it

 
 
The Value Proposition contains your services. Here its three vertical columns with an icon/image above a title, brief description, & CTA.
 

The Value Proposition Section

The purpose of this section is to present the value that you can provide to your reader. This could include a few of your services, or it could be three benefits of working with you and a single sentence about each.

Example value proposition:

  • Bookkeeping (with description)

  • Financial Forecasting (with description)

  • Monthly Check-Ins (with description)

 
 
The guide section of a StoryBrand wireframe uses testimonials to demonstrate experience in a classy way..
 

The Guide Section

In this section we want to show empathy for our reader and demonstrate that we are the experienced guide they need in order to succeed.

What to include in the guide section:

  • Empathetic statement (e.g. “We understand that finances can be overwhelming”

  • Customer testimonials and photos

  • Alternatively you could show logos of clients you’ve worked with, press logos, or certifications

Remember, the goal is to show that you have the authority to solve their problem without bragging about yourself.

 
 
Packages and pricing section show package options, the details for each and the price, along with a CTA button.
 

The Packages & Pricing Section

If you display your pricing or packages on your website, here’s an opportunity to do so. If not, you can skip this section.

 
 
StoryBrand's Plan section, aka a How it Works, lists three simple steps letting people know what the process look like.
 

The Plan Section

The goal of the plan section is to make the next steps to work with you as clear as possible. People feel more comfortable when they can see what’s going to happen next, and will be more likely to take action.

Here’s an example:

  • 1. Schedule a Consultation

  • 2. Choose a package

  • 3. Get on top of your finances

StoryBrand recommends that you make the third step a positive success so it’s easy for the reader to see the steps to getting to where they want to be.

 
 
The explanatory paragraph section has a title, a short paragraph, a CTA button and often a team photo.
 

The Explanatory Paragraph Section

This section is a short paragraph where you state the problem that your customer faces, the solution to their problem that you offer, and the success they’ll see when they work with you.

Here’s an example of an explanatory paragraph:

“At Acme Bookkeeping we understand what it’s like to feel stressed about finances. That’s why we created hassle-free bookkeeping services. So you can stay on top of your finances and focus on what you do best.”

 
 
Lead Magnet section offers your clients a free resource in exchange for their contact info for re-marketing purposes.
 

The Lead Magnet Section

This section is designed to help you capture the email address of your reader. Even if they’re not ready to buy from you now, they may be interested in a free resource you can provide.

The idea is to create a resource that helps solve a problem that your reader is experiencing. You can follow up with an automatic email sequence to up-sell them in the future.

Examples of lead magnet titles:

  • 9 easy tips to keep your restaurant finances in order

  • 4 unexpected ways your restaurant can increase profits

  • Self-evaluation: Our 15-point restaurant finance checklist

 
 
The footer often contains your logo, social media icons, and links to other top pages on your website to make navigation easy.
 

The Footer (aka Junk Drawer)

StoryBrand recommends that you put any additional pages and links into the footer so that you don’t distract readers with too many options in the top navigation.

The idea is that the reader will scroll down the page and read the copy instead of jumping around your website.

This is the perfect place to add your internal page links, privacy policy, social media links, copyright info, and more!

 
 

Best practices for creating a StoryBrand website wireframe

Clarity is better than creativity

Remember that it’s more important to be clear about what you offer than to impress readers with big words or clever puns.

Keep it short

Err on the side of writing less, not more. Most people tend to write more than they need to on their websites. It’s ok to go into more depth on other pages of your site, but a StoryBrand wireframe needs to be concise and to the point.

Focus on the words, not the design

It’s easy to get distracted by picking fonts, colors, and images when you’re building your wireframe. Try to stay focused on writing the words. Once you have the words finalized, then you can think about the design of your site. Doing both at once can be confusing and slow you down!

Get inspired by others

If you feel like you’re stuck, check out this collection of awesome websites built by StoryBrand Certified Guides. The password is betheguide. Browse by industry, and you’re sure to find some ideas on how to make your wireframe better!

 

Create your own StoryBrand wireframe with our free tool

We’ve created an easy-to-use free tool that has all of the StoryBrand-recommended sections already laid out and ready to fill in with your copy!

Here’s how to get started:

1. Get free access below

2. Watch this tutorial video if you get stuck. Enjoy!

 

A quick tour of our free StoryBrand Wireframe tool and how to use it.

 

How to turn your StoryBrand wireframe into a real website

When you’re done creating your wireframe you’ll want to turn that clear message into a beautiful website.

Here at StorySite, we’ve created a collection of StoryBrand-ready Squarespace templates that can help you go live, even with a limited budget.

Here are a few of our latest template designs:

 
 
 

Looking for something more custom?

Our main agency, Knapsack builds custom Squarespace sites for businesses all over the world. Our designers are familiar with StoryBrand and will make sure to build you a gorgeous website that makes you proud.

Check out these examples of custom StoryBrand websites we’ve built for businesses like yours.