The first step to building an effective website.
Like most business owners, you want the most value for your marketing investment. One way to do that is by creating a website wireframe before you start building your website. You’ve probably already read about it in Donald Miller’s book – Marketing Made Simple, but in this blog post, we will discuss the benefits of a website wireframe and how it can save you money. Plus, I’ll share with you my free website wireframe resource!
It’s the words you use that will sell your product or service.
The first and often hardest thing to do when building a website for your business is to determine what you want it to say. What words will you use to communicate to your potential customers to motivate them to do business with you?
I recommend using the Storybrand marketing framework. It’s a simple, step-by-step process that will help you clarify your message and ensure that every element on your website works together to support that message. Once you have your message figured out, it’s time to start wireframing!
What is a Website Wireframe?
When you wireframe a website, you essentially are creating a blueprint for your website. Using a wireframe tool provides a way for your to map out the content on each page and see how those pages will be linked together. Wireframing your website is an essential step in the website development process because it allows you to get a clear picture of your website before you start building it. Using a wireframe tool for your website can save you a lot of money, time, and frustration down the road.
Make key decisions before design.
Design can become very expensive without a clear plan before building a website. It’s always best to start with a goal in mind. After all, you wouldn’t hire a home builder and then just start building without some kind of plan, right? No. You would have a clear set of blueprints that the builders could follow, so you know precisely what you can expect before you build. It’s the same principle when building a website.
A website wireframe can save you time and money.
Creating a website wireframe before the design is helpful because it allows you to ensure that your website will say what you want it to say and do what you want it to do before spending any money on design.
What wireframing tools are available?
I’ve found that starting with a simple wireframe is best. The free wireframing tool I’ve created and used is a simple Google doc that I’ve made available for you to use. It lays out your website using a simple Storybrand website layout that perfectly communicates you and your business to your ideal clients.
Refine your ideas before designing.
The goal of a wireframe is not to get bogged down in the details but rather to focus on the overall structure of your website and nail down the exact words you’ll use. In addition, using a wireframe allows you to visualize how each section of your website will flow together and its message continuity. Because sometimes, ideas, no matter how great they may seem when you first think of them, don’t always communicate well when on the page. A website wireframe allows you to refine these ideas, so you can know your website’s message will work.
Wireframing website tools; simple or complex.
As I have said earlier, I prefer a simple wireframe over a more complex one. I’ve discovered the more detailed the wireframe is, the more constrained I felt when creating. I like to approach each website I design as a clean slate or blank canvas. Using a simple wireframe template allows me to write the story of the business I’m creating for and not feel as though I’m forcing the content to fit the design. I let the story dictate the design and not the other way around.
Free Website Wireframe Templates
Like many other Storybrand guides when I began, I initially used some of the more popular wireframe software and available templates and tools. But because most of the template layouts were already predetermined, I felt it was as if I was being told –Tim, you can create anything you want as long as it fits in this box.
A Website Wireframe should encourage creativity.
Ultimately I found the more complex wireframes stifled my creativity. So I decided to create my own wireframe. One that would provide me the freedom to create freely but also inform my clients of the “why” for each section of the wireframe and its role in the overall story of their business.
Free wireframe template for a Storybrand Website
The main sections of a StoryWorks wireframe to create a Storybrand website are:
- The Header – This is where you will display your logo, tagline, menu, and call to action.
- The Hero Section – This section is critical to the success of your website. Your hero section must inform your potential customer who you are, the solution you provide, how it will make your customer’s life better and how they can get it. All in 10 seconds or less.
- The Value Stack – List the top three benefits your customer will get by doing business with you.
- The “What’s at stake” section. – Use this section to remind your customer about the problem they want to solve and what is at stake if they don’t do business with you.
- The Lead Generator – Provide helpful information to help solve your customer’s problem in exchange for their email address. This allows you to begin a conversation and eventually nurture them into becoming paid clients.
- The Value Proposition – What are the top three areas you can help your client?
- The Guide – Explain to your customer that you understand their problem and what authority you have to help them solve it.
- The Plan– Provide a simple plan, 3-4 steps at the most, that helps your customer to take the first step in solving their problem.
- The Extended Story – This is your brandscript in long form. This is helpful for SEO as well.
- Failure – Part of your job as the Guide in your customer’s story is to show them the success they can experience by working with you, but also to remind them of the failure they are destined to find if they don’t act. Like baking, success should be flour; use a lot of it. But failure is like salt. All it takes is a pinch to add flavor. Remove the salt, and the story goes flat. I like to have a brief statement or image at the end of the website to remind your visitor of what failure they will see if they don’t take action.
- The Footer – With a Storybrand website, this is called the “Junk Drawer.” Like the drawer many of us have in our homes, this is where you would place any links or information that would get in the way of the overall story.
- Other optional sections would be price lists, services, features, or additional vital information such as the logo of businesses worked with, and testimonies of previous clients sprinkled throughout the site.
By creating these individual sections, you will know what will work and what areas need more thought before you spend any money on design. It’s much easier and less expensive to fix something on a wireframe than after the design process.
Give it a try!
If you haven’t used a website wireframe before, I highly encourage you to try it. Below is a link to the free StoryWorks Website Wireframe that I use with all my clients.
Once you have completed your wireframe, you can begin designing the website, so it clearly communicates your message.
I hope this blog helped explain the benefits of a website wireframe and how it can save you money. If you have any questions or need help getting started. I’m always happy to help where I can.
