In this article we analyze the anatomy of a great landing page wireframe and the elements you need to include. Bonus: the most common mistakes with wireframes.

Landing pages should have one primary objective. Which is to convert as many users as possible into leads or sales. And to do so, each landing page needs to feature several specific elements that are pivotal to its success. However, these elements can often be overlooked and the attention given to how the landing page looks aesthetically.

Landing page wireframes are used to create a ‘rough’ visual representation of how a landing page is going to look. They are created even before you begin thinking about how the page is going to look. Instead, this process is more about how the landing page is going to be structured which will then be used to lead the copywriting and the design. By wireframing effectively, you are ensuring that the page is focused on items of importance and that it’s optimized to convert.

The person that is responsible for creating the landing page, more often than not isn’t the designer or copywriter. So it’s really important that the wireframe really drives how the page is going to flow and the elements which are going to be included.

In this guide, I’m going to discuss the benefits of creating a wireframe for your landing page as well as some of the best practices.

The benefits of creating a wireframe

Creating a wireframe allows you to visualize your landing page early on in the process. Doing this will allow you to prioritize what’s most important on the page and create a structure that focuses on the primary conversion goal.

When landing page design is led by a designer, it can leave the requirements up to interpretation. Which isn’t what we want. We want the designer to be creative, but don’t want them to be choosing where on the page the customer testimonials should go. By creating a wireframe, it will put all of the various people involved from designers to copywriters, on the same page as you are.

It’s not uncommon for us as a conversion rate optimization agency to see this step frequently skipped by clients (before they come to us). With the brief for the landing page being sent directly to the designer. However, it’s unlikely that even though designers may have some experience when it comes to CRO, it’s usually a task more suited to a conversion optimizer.

What’s usually left is a page which looks great, but misses some of the fundamental aspects which transform the results of landing pages.

The anatomy of the perfect landing page wireframe

It’s really important to create your wireframe as early on in the process as possible. By visually seeing how the page's structure is going to look and flow, it will help you to understand what information is most relevant and how much information is really necessary on the page.

As mentioned above, there are some elements that your landing pages really need to include in order to give them the best chance of success.

Let’s start by running through each of them and discussing why they should be included.

Information hierarchy

Information hierarchy is the process of ensuring the most essential information is included on the page. We’re going to be deciding which information is most crucial to the user. We’re also clarifying that every piece of information that is on the landing page should be on it or not.

Could the landing page perform the same if not better without this information?

Visual hierarchy

Visual hierarchy on a landing page is the process of ensuring that the most influential elements on the page are given prominence. There are a few key principles that you should remember to make the most essential features stand out when creating your wireframe.

1. Size

The most important elements should be the biggest, so that they get the most attention.

2. Space

There should be plenty of space around elements to allow them to be noticed, especially your call to action!

Looks pretty cluttered in the first example, what about if we spread it out a bit:

You can see from just a small change, it removes the feeling of busy-ness and makes the call to action much more visually appealing.

3. Direction

Giving users direction in your design will encourage them to pay attention to the elements that you want them to look at and navigate through the page how you would like them to.

Notice how the Balsamiq Cloud landing page uses background colors changes to show new sections and employs a subtle downward arrow shape to guide users to continue scrolling.

Value proposition

This is how you communicate the value of your product or service to the user and should therefore have a clear visual prominence on the page.

It’s usually displayed visually in the form of a headline and subheadline. Often there will be a bulleted list to display some of the features or benefits too.

Copy

Your copy is what will do most of your selling on your landing page, so obviously this plays a big part. It’s vital here to make it clear what each part of the page is about so that the person writing the copy has something to work with.

We’re not telling them what to write, we’re simply giving them some direction.

Images and videos

When they are used correctly, images and videos will only add to your offer. Because of this, they can play a big role in the end result.

Balsamiq makes it really easy to include these in your wireframe, which can then be paired with a sticky note to include what you think the image should depict. Alternatively, you can define the precise visual asset to use.

Social proof

Social proof is what will be giving you credibility and trust in your product or service. This can be done using a range of different methods. We recommend using at least 2 of them:

• Testimonials
• Trust symbols
• Customer logos
• Awards & achievements

One clear call to action

Your call to action is how the user is going to transfer from being a user to a potential customer. Therefore it’s necessary to make them easy to be found. Again, we’ll follow the process of making sure that there’s plenty of space around it. Most importantly, we want it to look like a button, we don’t want any text links here.

We’d also recommend having the same call to action repeated above the fold and at the bottom of the page too, paired with a closing headline. That way a user doesn’t have to scroll all the way back up to click it.

Depending on the length of your landing page, you may want to include the button more than twice on the page. Possibly beneath sections that may be a logical point to ask the user to take the next step.

No links

Finally, we don’t want any distractions for your users. We don’t want them clicking through to another page on your site and forgetting about why they came there in the first place. There should be only one thing for the user to click and that’s a call to action.

You may also be required to show your privacy policy and terms and conditions, but these can be shown in a popup rather than taking a user off the page. Save links for your main website.

Common mistakes with wireframes

The biggest mistake that we see when people are creating wireframes are being too explicit in what they are telling the other people involved in the project to do. People like designers and copywriters are creative people and by restricting this, it’s only going to lower the quality of work that they produce.

The way around this, whilst still influencing the outcome is to be subtle about any suggestions that you make. So rather than telling the designer to use a particular color to make it stand out, suggest instead that the element needs a lot of visual attention. That way the designer won’t feel bound to your request.

We asked Leon Barnard, Balsamiq's Education Team Lead, what he thought were the biggest mistakes that people make when creating wireframes.

Too much visual detail

"Wireframes are meant to be rough. If you're thinking about fonts and colors, you're probably overlooking the overall experience and flow between screens."

Converging too soon

"Don't think of the final wireframe as the goal. Because wireframes are quick and easy to make, you should be creating a lot of them. Take a bit of time to explore different concepts as part of your process before narrowing in on a favorite."

Not using annotations

"Use sticky notes, arrows, and callouts liberally to add notes and instructions. There are some places where words are actually better than pictures, so don't be afraid to scrawl on your wireframes to add clarity."

And that’s it...

As I mentioned earlier, try to produce your wireframe as early on as possible. It will give you so much clarity and control over the landing page.

I really hope that you have enjoyed this guide on how to create the perfect landing page wireframe. If you have any questions or comments, please feel free to reach out.

Happy Wireframing!