After working with a carpenter, you see the finished result. You ask for the blueprints to keep on hand.

“Blueprints? What blueprints?” the carpenter replies. “I just winged it.”

Your new house collapses.

You wouldn’t build a house without a blueprint, right? So, why would you create a landing page without similar plans? After all, you need a sturdy foundation to get steady conversions.

Think of a wireframe as your landing page’s blueprint. Let’s talk about this nifty planning tool and how you can make one yourself.

What Is a Landing Page Wireframe and Why Does It Matter?

A wireframe lays out the most important elements of a landing page without any stylistic formatting. Here’s an example from an Unbounce blog post on winning elements of a landing page:

What makes wireframes important for landing pages in particular? Landing pages have a single marketing-related goal. When you create a wireframe for a landing page, you get the chance to connect each section back to that objective. It’s much easier to plan how your sections support your main goal in advance.

Plus, landing page wireframes are repurposable for multiple campaigns—just tweak the section topics as needed.

The wireframe you’ll make today will have a little more detail than the example shared above. First, you’ll create a layout for your landing page’s sections. Then, you’ll add the most important elements of your copy and images.

How to Build a Landing Page Wireframe, Part One: Layout

Your wireframe’s layout will guide your visitors’ journey from click to conversion. It should lead them naturally through your content using the first two principles of conversion-centered design: creating focus and building structure.

Follow these tips to create a landing page layout that flows smoothly for your visitors:

• Develop an information hierarchy: Create a list of the sections you want to cover on your landing page, then order them by importance to your customers. Then, place your wireframe sections in a similar order.
• Set up a visual hierarchy: Humans naturally follow a certain visual hierarchy when they read a landing page. Set up your sections in a Z- or F-pattern—the two directions that people scan content in. 
• Keep your value proposition above the fold: If your landing page has a value proposition (it should), keep it in the first or second section. You want to place it where visitors won’t have to scroll down to see it.

As you figure out your landing page sections and their order, remember to include social proof in one of them. Testimonials, reviews, case studies, social media posts, and other evidence that people like your product go a long way on landing pages. Try placing it close to your benefits to back up your points.

How to Build a Landing Page Wireframe, Part Two: Content

Now that you have a solid landing page structure, it’s time to plan your page’s content. In this stage, you don’t need to have finished copy or images. Instead, you’ll figure out the framework for those elements.

Headline

I recommend finalizing your headline when you wireframe your content. Your landing page’s headline is one of the first elements your visitors will see. Plus, when you write your headline during the wireframe process, you’ll create a theme for the rest of your content.

So, how can you make sure your headline makes a good first impression and paves the way for content success? CoSchedule studied more than 200,000 headlines and found that the headlines that got the most engagement had many traits in common. Some of these elements included using action words and conveying clear benefits.

You can see how these practices add oomph to a headline on this Mixmax landing page:

This headline sums Mixmax up in three actions: decluttering your email, prioritizing your focus, and automating your day. In nine words, you understand what you can do with this app.

If you get stumped trying to come up with a compelling headline, try following a formula. Folks follow them for a reason—they put headline best practices into action. Popular headline formulas bake in key bits of info like your value proposition or call to action.

Copy

After you draw visitors in with your headline, you’ll need to keep ‘em glued to the screen with stellar copy. During this part of wireframe creation, you’ll map out the main messages behind your copy so you can write it more efficiently later on.

Not sure where to start? Try using an AI copywriting program to help you brainstorm your key messages. AI copywriting works well for generating ideas that you polish with general copywriting principles and your brand style. And right now, your wireframe content is all about broad ideas.

You can also try laying out your ideas by writing the headers and subheaders for each section. Check out the sub-heads in this Evernote landing page:

If you were laying out this feature section’s content, you would simply write the names of each feature. Then, when you dive into the copy later, you’d just need to summarize each feature in a sentence.

Images

Now that you have your overall layout and major content themes set up, it’s time to figure out where your main images will go. Images are critical to a successful landing page because they add visual appeal, break up chunks of copy, and guide the viewer through your page. But they only achieve these goals when they work in harmony with the rest of the page.

Look how images play into a landing page structure in this mockup:

This page alternates between images of dogs and text in each section to take you on a dynamic journey through its content. If the creator had added them as an afterthought, the structure wouldn’t be as strong.

As you build your wireframe, keep in mind that you don’t have to commit to specific images yet. Feel free to use a simple stock image or block of text to assign the space where you’ll put your pictures. Just make sure to follow the best practices for landing page images when you fill those spots with the real deal.

Let Your Landing Page Builder Do the Heavy Lifting

It can seem like a lot of work to build a landing page wireframe from scratch. Fortunately, the right landing page builder will save you a lot of that effort. You can use the wireframe knowledge you gained today to adjust your landing page templates to fit your vision.

Unbounce’s new Conversion Intelligence Platform will take a lot of the guesswork out of the process, with AI-powered solutions including Smart Builder, Smart Copy, and Smart Traffic allowing you to build and optimize your pages based on your audience and goals. Enjoy the benefits of a conversion-focused landing page layout informed by data.

Build your free WordPress website with Host2.us free hosting today!