Why You Need to Create Landing Page Wireframes.

My 7th grade English teacher was slightly annoying.

She had this rule of making us write up an outline every time we had to submit an essay or story. The outline was for our eyes only, she didn’t even bother to review it but she made sure we wrote one before we started writing the Real Deal — yes, that’s a capital R and a capital D.

And so I spent a whole year drafting outlines for every piece of writing I handed off to her. Sure, I was annoyed at first but with each outline I wrote I understood the logic behind the exercise, and by the end of the year it hit me, outlines made the execution so much easier.

Yes, you spend some initial time doing something you don’t think is important because you know exactly what you want to write, but while you’re drafting the outline you can actually see on paper what things are going to look like, and this makes you look at the big picture.

Wire frames do the same thing for your landing pages.

Basically, wire frames are to landing pages what outlines are to essays. They make things easier by allowing you to visualize what you want to create.

What’s a landing page wireframe?

A wireframe is a visual guide that represents the skeletal framework of a webpage, it is a way to design a landing page on a structural level. Creating wireframes for your landing pages helps you:

1. Visualize the landing page from the start.
2. Prioritize content and build structure.
3. Easily align copy and design.

Your landing page will only fulfill its conversion goal if the page design and copy harmoniously work together. When you give one more importance than the other the results are catastrophic for your conversions.

Visitors won’t convert on a page with good design but bad messaging. But, they will also not click the call to action button of a page that’s designed horribly but has good messaging.

To create landing page wireframes think about your information hierarchy first, as it forms the basis of your skeletal design.

What’s information hierarchy?

Information hierarchy refers to the structure and priority given to pieces of information on a web page. Information hierarchy differs from the more commonly known visual hierarchy — while the latter maps out how user’s will look at the page (which element they’ll see first and which they’ll see at the end) the former organizes information/message on the page.

When creating information hierarchy answer the following two questions:

1.What information is most important?
2. How much information is necessary?

Answers to both these questions help you determine the length of your landing page and how the information will be laid out on it.

Creating an information hierarchy beforehand helps you determine how much information you need to include on every page screen. As presenting users with too much information in one screen can cause cognitive load which decreases the chance of conversions.

Think about who your users are and what you want them to do before you create your landing page wireframe and information hierarchy.

Creating a logical information hierarchy allows you to create a compelling story on your landing page.

Now isn’t that something you want to do?

If you’re looking for some wireframe inspiration, check out this Instapage post.

Create your landing page in steps

Landing page creation is a marathon not a sprint, just because you’re creating a one-pager doesn’t mean you need to rush it, take your time and follow the right steps to create a landing page that has the power to engage audiences.

Wondering what the steps of creating an optimized landing page are? PSSST: it doesn’t start with the page headline, but with an awareness stage, come back next week same time, same place to find out more.

Clap away if you liked what you read. All claps will be hugely appreciated. Follow me on Twitter if you want to read more content like this — because there’s a lot more where this came from.