This blog will help answer some of the questions you were wondering about wireframes.
- “What is a wireframe?
- “Why do I need one?”
- “How do I start?”
- “What do I need for it?”
Here is the beginning of it all.
What is a wireframe?
A wireframe is like an outline of how your website or landing page will look. This will be a schematic view of what your designer will use when designing your page. Wireframes provide the general and desired layout that you want and has the best content that you seem fit.
You need a wireframe.
Just like a rough draft, a wireframe gets your ideas out there and lets you see the possibilities you have.
It’s ok if you change your mind and it’s easy to change your wireframe too!
When I was learning about wireframes, everything made sense once I started to create one. So, I will encourage you to create one perhaps while you are reading this.
Starting a wireframe
Follow these beginning steps.
- Use a document program, such as Word or Google Docs
- Insert a 6×6 table to begin with (you will be able to merge and create bigger cells)
- Always have your logo on the top corner so that your brand is always there
Wireframe Components
It’s important to include some of these components on your website or landing page. You will see that some of these components are also the ones from my blog, Good Landing Page Practices for a Successful Ad Campaign
CTA:
There should only be three ways to exit the page.
- The back button
- The footer section which includes links to social media, about us, etc. that will be at the very bottom
- Following the CTA
You want them only focusing on the CTA, so make it stand out. Your CTA will need to be visible at all times so that when they are ready to take action, they will have it right in front of them.
The best practice is to place your CTA on every row of your wireframe and as much as visually acceptable after every component.
Don’t forget to put it on the same side. The reason for this is so that they
can anticipate and become familiar with the location of the CTA when they are ready.
Testimonials/Evidence:
These give you credibility and some proof that can help them trust you.
There are different ways that you can include testimonials and evidence of how your product or service has helped others in your wireframe, and this is all up to you.
The best practice is to include at least three items such as testimonials, a portfolio, or share who you partner with.
Hero Shot:
An image or video that showcases what they will be getting or could be looking forward to.
The hero shot is the first thing that they will see and should be placed before the first-fold. Make sure this catches their eye and will be interesting, especially if it’s a video.
The best practice is to include the hero shot next to your benefits in the top-fold.
Benefits:
What your product or service will do for them.
People will invest in something that will help them. Putting the reasons why they should invest saves you and them time.
Paired next to your Hero Shot will reinforce your product or service.
The best practice is to highlight the ones that will give them the highest results as a benefit.
Differentiation:
A must, MUST inclusion for this component is your value proposition.
Including this information in your wireframe locks in your credibility and shows them who they will be dealing with. People like to know who a brand is and what their values are.
The best practice is to answer the questions below:
- Who you are as a company (Your Value Proposition)
- What you will do or provide for them (What you give them)
- Why they should choose you over the competition (How are you different)
- How you will deliver what you have to help them (How you work)
The beginner’s guide to wireframes. Putting all of these components into your wireframe will look like you are a natural. I hope this helps you and I wish you luck!