How To Build the Best Wireframe for Your Website

If you’d like your website to convert visitors to customers, you need to start with an effective website wireframe.

Sure, the aesthetics and design of your website is important. After all, these colours, images and motifs convey the “feel” of your brand.

However, it is the words that you place on your website which determines if a visitor will click on a Call-To-Action (CTA) button or do business with you.

In this article, you will learn how to wireframe a website with the winning framework taught by StoryBrand’s Donald Miller and Dr J.J. Peterson in their book Marketing Made Simple—A Step-by-step Storybrand Guide For Any Business.

(You can download an entire copy of the eBook for FREE here or buy one from any store.)

What is Role Should Your Website Play?

A critical part of the sales and marketing funnel in digital marketing, your website or landing page should be a place where you sell your customer a product that solves their problem and makes their lives better.

Ask yourself these questions BEFORE you design your website:

Who are the customers whom you’re targeting?
What is the problem that you solve for them?
How does your customer feel after you solve their problem?
How does a prospect buy your product?
What value can you add to your customer’s life when he or she buys your product?

The best way to incorporate these elements is to wireframe your website.

Introducing Website Wireframes

A website wireframe is a skeletal framework which lays out the different content sections and functions on a website before it is designed.

It is often laid out as a long digital document (or a long piece of paper) which includes the text, boxes, illustrations, buttons and other components of your website.

I like to use a simple Google Doc to create a wireframe—multiple parties can work on it, and you can easily write all the text you’d like or incorporate visuals that are appropriate. However, you can also use tools such as wireframe.cc, Balsamiq, Figma or others.

The beauty of a wireframe is that it helps you to get feedback before you spend time, money and energy on designing a website.

Here’s an example of how a website wireframe looks like:

Courtesy of mockplus.com

The Nine Sections of a Winning Website

So how do you build a website that—to quote Miller and Peterson’s book—helps to “increase sales time and time again?”

According to their book, it involves these nine sections:

The Header: This is the first few words at the top of website which conveys your offer
The Stakes: The section where you explain what you are saving your customers from
The Value Proposition: What are the benefits that your product or service provides? List them down
The Guide: Here’s where you introduce yourself as the brand or person who can solve your customer’s problem (read my Storybrand review for more info on this.)
The Plan: Tell your prospect what they must do to do business with you and solve their problem
The Explanatory Paragraph: This is a long-form BrandScript in which you invite your customers into the story—its also where you put in your SEO keywords
The Video (optional): A video can help communicate your message to those who prefer to watch then to read.
Price Choices (optional): Consider listing down the different products or services which you offer—or the categories if you’d like
Junk Drawer: This is the most important part of your website because you’re going to list everything you previously thought was important

Let’s dive into each of these sections below.

1) The Website Header

First impressions last. The first 10 seconds that a visitor lands on your website will determine if he will stay or go.

To keep them reading and scrolling, make sure your website passes the grunt test—answer these 3 questions in the header:

What do you offer? Describe your product or service succinctly.
How will it make your customer’s life better? Highlight the strongest benefit.
What does he need to do to buy it? Include a clear and direct CTA button.

Put all these together into a single statement, and include a clear and direct CTA button. You may also include a “Transitional CTA” which is a CTA to a lead generator (eg “Download eBook” or “Watch Video” or “Get Sample Content”).

Here are some examples:

Injury lawyers committed to helping you get your life back –> [Book Call]
Turn your Facebook, Instagram and LinkedIn accounts into money makers –> [Schedule Consultation]
Boost your energy and transform your health without drugs or exercise –> [Book Session]

You can place these elements in a design that looks like this, with the CTA buttons in the Z-shaped direction where the eyes are drawn to:

Courtesy of Marketing Made Simple book

Beyond these, do also consider the images here—avoid sliders (ie carousel images) which have been shown to have little effect. Instead, consider looping images (silent film) ensuring taht your text floats over the images in a fixed position.

Here’s a good example from WordPress—notice the image of the elderly gentleman whom they’ve used? What message are they trying to convey here?

2) The Stakes

Also known as the “Failure” section, this is where you describe what happens if your prospect chooses not to do business with you.

Describe the pain that they stand to experience in terms of the following:

Continuous embarrassment
More time wasted
Lost business or social opportunities
Lack of energy
Confusion and chaos
Loss of status
Not reaching their potential
Lagging behind the competition
Being ridiculed in life or at work
Inability to achieve positive results

List them down as bullet points or use icons to represent these problems or pain points. Here’s how we’ve communicated it on the Cooler Insights website:

3) The Value Proposition

This is a description of the value or benefit which your customer can get from you:

How they can save money
How they can save time
How they can improve work/ life
How they can reduce risk
How they can increase sales
How they can strengthen quality
How they can simplify their life
How they can avoid hassles

The more specific and visual you are here, the better it can be. And yes, it helps if you can put in a Headline here to exemplify your core value.

Here’s a good example from WordPress’s website:

4) The Guide

This is the section on your website or landing page where you’ll want to exhibit both empathy and authority.

The one-two punch of empathy and authority ensures you can connect with your audience while demonstrating competency. This is important to build trust in them.

To communicate authority on your website, use the following:

Testimonials—keep them short and scannable, and try to make them specific to the problems your business solves or the value you bring
Logos of companies you’ve worked with
Simple statistics on your business growth
Media mentions and features

Here are examples of great testimonials from FreshBooks website:

Here’s an example of authority-building logos from our Cooler Marketer website:

See another example of statistics below from Shaws Preschool:

What about empathy? To resonate with your client, complete this sentence: “we know what it feels like to ________________.”

Here are some examples:

As a small business ourselves, we know how challenging it is to grow online against larger competitors
I know how it feels like to be passed over for a promotion because I’ve experienced it in my own career
Like you, we’ve had sleepless nights worrying about our online sales—until we did this…
We are ladies and gentlemen serving ladies and gentlemen (guess where this came from?)

5) The Plan

This is where you provide a 3 to 4-step plan for your customer to take. Doing so helps to communicate to your customer that doing business with you is as easy as ABC!

Here is an example which involves three steps, and could be used for a fashion retailer of office apparel:

Give us your measurements
We will mix and match styles for you
Dress to impress

Here’s another example from the StoryBrand folks themselves:

For an added boost, you may wish to include subtitles below each step to describe their benefits.

6) The Explanatory Paragraph

This is the section where you’ll put in the Search Engine Optimization (SEO) elements on your website. It is a long-form text that does the following:

Identify who your customer wants to be
Identify what they want
Define the problem setting them back
Position you as their guide
Share a plan they can use to solve their problem (which includes your product)
Call them to action
Cast a vision for their lives

Here’s a sample explanatory paragraph format that you can use.

At _________ [your company name], we know you are the kind of people who want to be ___________ [ aspirational identity. What kind of person do they want to become?]. In order to be that way, you need ___________[As it relates to your product, what does your customer want?]. The problem is ________[What’s the physical problem holding them back?], which makes you feel ________[How is that problem making them feel?]. We believe ___________[Why is it just plain wrong that anybody should have to deal with that problem?]. We understand __________[Include an empathetic statement]. That’s why we __________[Demonstrate your competency to solve their problem]. Here’s how it works ______________[What’s your three-step plan: step one, step two, step three]. So ___________ [Call them to action], so you can stop __________ [What negative thing will happen or continue to happen if they don’t order?] and start _____________[What will their life look like if they do place an order?].

As this is a fairly long-form piece, you need to write and rewrite it until it reads smoothly.

Here’s an example taken from the Marketing Made Simple landing page.

Another example of an explanatory paragraph is to answer your customer’s objections. This can be done in an FAQ style.

7) The Video

This is a supplementary portion to help communicate your sales pitch. The idea is to repeat the same words in your video that is on your page.

Here are some best practices suggested by the book:

Keep it short: At best, it should not last more than 3 minutes
Hook the viewer: Grab the attention from the first 10 seconds of your video, and state the problem your customer experiences as soon as possible
Consider a longer version as a lead magnet: If you’d like to collect your customer details, consider including an opt-in form in exchange for the video where you’ll teach something
Video title: Make sure that the title grabs their attention, eg “How we’ve helped over 3,300 trainees improve their marketing”

Learn more best practices in video creation here.

8) Price Choices

This is another option for companies that have a fixed cost on their website. For those who don’t, it may be useful to bundle your products or services into different packages.

Studies have shown that people tend to choose the middle option if they’re given three price points.

Here’s an example of how this can be presented from BuzzSumo:

9) Junk Drawer

Now this is where you’ll put everything else which you previously thought was important! And they’ll include many of the navigational sections such as the following:

About Us
Employment
FAQs
Privacy Policy
Media

In short, it is the footer of your website.

Conclusion

Building an effective wireframe for your website helps to transform your landing pages into sales-growing platforms.

Thanks to Marketing Made Simple, we now have a more effective method of building landing pages that helps to improve conversions.

To learn other techniques and strategies to improve your website conversions, do read these articles: