Storybrand Wireframe Template

Storybrand is a powerful tool to hone in your messaging strategy, but before we jump into our storybrand wireframe template, let’s talk through all the elements of a storybrand wireframe.

Going through the process of creating a Storybrand brandscript can even help you understand your business strategy better! But how do you take your brandscript and create a wireframe for your homepage? Before we jump into our storybrand wireframe template, let’s talk through all the elements of a storybrand wireframe.

WIREFRAME

A wireframe is a simple outline of your front page that shows the order of your page sections with the copy (headlines, bullet points, body text, etc) filled in, but with very few design elements.

You can draw out a wireframe in a notebook, use a program like Adobe XD (what we use), or even use Powerpoint as a way to organize your sections.

IMPORTANT NOTE: Your BrandScript determines WHAT you say, not the ORDER you say it. 

A common misconception is that the sections of your website design sections should follow the same order as your BrandScript (Character wants > Problem > Guide….) But that’s not true. There are no hard and fast rules for what order your content should be presented. It’s more art than science.

That being said, there are common types of sections that sync up with sections from your BrandScript.

• Hero Image Section
  This is the first thing someone sees when they land on your site. It includes your HEADLINE, SUBHEADLINE, and CALL TO ACTION button. You may also consider in your website design how your logo and navigation menu fit here.
• Value Stack
  This is usually three or four quick-hit value propositions that usually come from the Success section of your BrandScript. They are often accompanied by icons.
• About Us
  This section of your website design is usually the place for content from your Guide section. The goal is not really to tell your customers ABOUT your company (history, structure, bio), but instead to explain how your experience and expertise helps you understand and solve problems for your customers.
• Authority Signifiers
  Another Guide section. Display logos of companies you’ve worked with, or a testimonial from a client, or possibly awards that you’ve won.
• 3-Step Plans
  From the Plan section of your BrandScript. Ideally no more than three or four steps,  usually describing the process of how someone would start to do business with you, or the stages that you will engage in with your client to solve their problem. You might even have more than one PLAN on your page.
• Agreement Plan
  Another Plan section. This is where you describe your promise to the customer, or a philosophy behind how you do business so that you serve your customer well.

Other BrandScript elements
The Character, Problem, Call to Action, & Failure pieces of your BrandScript don’t usually have their own defined section on a website. Instead, they are sprinkled throughout the other sections as headlines, bullet points, call-outs, etc.

Storybrand Wireframe Template

Sometimes the most helpful thing is to see an example.

Want help Storybranding your website? Let’s talk.