Home / Internet Marketing News / How to Wireframe a Landing Page: 6 steps

How to Wireframe a Landing Page: 6 steps

After watching The 21 Psychological Elements that Power Effective Web Design (Part 1), a MarketingExperiments reader commented and asked …

“What type of
information/content do you provide your designers with to create those initial
wireframes? When Flint was showing Meghan’s wireframes and talking about web
design in general, it felt like content would fill in the wireframe instead of
creating content and then creating wireframe for that content.”

And really, that spurts a bigger question — how do you wireframe a landing page? Here is a rough look at a process we use for our own websites at MECLABS Institute (MarketingSherpa.com, MarketingExperiments.com, and MECLABS.com). It’s not set in stone, it can vary based on the project, but I hope it gives you a few ideas for improving your own process.

(This article was originally published in the MarketingExperiments email newsletter.)

Step #1: Meet to
discuss the objective

Before anything is created, Meghan begins with a meeting
about the page’s objective.

“I often don’t have the specific content beforehand. But I
don’t need it. The more important thing to begin with is the objective,” Meghan
Brown, Graphic Designer, MECLABS Institute, said. “Even without specific content,
you know that there’s going to be a headline, images, call to action, etc. So
you design the layout based on the elements talked about from the objective

If you’re a marketer working with a designer on a landing
page or website, here are some questions you should answer in the objective

  • Who is the ideal customer?
  • What is the conversion goal?
  • What is the process-level value proposition? What other value propositions should be communicated on the page?
  • Who are your top competitors? (Observe their websites.)
  • Are there any examples of landing pages and websites you like? Don’t like?
  • What website will it go on?
  • Are there any brand guidelines?
  • Any specific functionality considerations?
  • How many pages are needed in the customer flow (e.g., a landing page with a thank you page, a five-page microsite, etc.)?
  • What elements need to go on the page (e.g., video, form, approximate amount of copy, etc.)?
  • When is the deadline?

“Talking about the objective is the most important part. A
key question designers will have as they concept layouts is how much time do they
have to work on these wireframes. I can whip something up in two days and it’ll
do the job, or I can spend a couple of weeks intensely focused on a bigger
project and be creative with the designs. It all depends on the business needs,”
Meghan said.

Step #2: Create pencil
sketch wireframes of the landing page in a notebook

In my early days as a copywriter, I used to concept with an
art director who would draw those ideas up on paper. We used to call them
“markers,” and that’s all they were, really. An idea drawn up on an oversize
sheet of paper with a bold, black magic marker.

You could tell I was on deadline for a campaign because the
walls of my office and my art director’s office would be littered with these
crudely drawn comps taped all over our walls.

Yes, we did have computers. QuarkXPress. Adobe Photoshop and
Illustrator. But we didn’t start there. We started with the idea— essentially,
the minimum viable communication of the idea.

So I love seeing Meghan walk around the office with her
pencil sketches of landing pages. I can’t help but think that something is lost
when we jump too quickly into execution and technology. Despite all the great
new marketing technology, it’s just a tool. Marketers win with better ideas.

After the objective meeting, Meghan creates low-fidelity
wireframes by doing basic sketches in her notebook.

“It’s faster for me to get my ideas down,” she said.

She lays out multiple ideas side by side — usually about
three if she is time boxing herself — making sure each one is categorically
different. For example, one might put more emphasis on the headline, one might
put more emphasis on a hero image, another might lead with a product image with
a headline and bullet points. “Most of the time, I get my bad ideas out first,
and then it leads to better ideas. I don’t want to start by going directly to a
program like [Adobe] Photoshop with a bad idea, sink the time in, and then have
to start all over,” Meghan said.

She usually only wireframes mobile pages at this point. “I start
with mobile because there is less space to work with, and it’s easier to
transfer content from mobile to desktop versus the other way around.  I draw wireframes for tablet and desktop only
if I have the time; otherwise, I just skip this part for later,” she said.

Step #3: Review ideas

Once she has settled on the general concepts in her
notebook, she creates much larger and a little more detailed versions to
present, using a pencil and a large pad.

Since these are still just pencil drawings, they are clear
ways to communicate the idea quickly.

The goal at this stage is to collaborate with stakeholders and decision-makers in a way that makes revisions and optionality easy. In fact, instead of redrawing the wireframes, sometimes Meghan simply adds sticky notes with new ideas to the pencil-drawn wireframes.

This is also an easy way to play with ideas and vet them out
further by giving greater clarity and specificity to what it would take to
execute the landing page or website.

For one, this helps developers get a better idea of what a
marketing director wants to build, to give a more accurate estimate of what it
would take to build that landing page, checkout flow, or website.

But beyond that, when an idea for an overall product or service is at play, it can help to sketch out a landing page for it — ideally, in combination with a competitive analysis — to get an early understanding of what the offering would be from the customer’s perspective and if it really sticks out in the marketplace. If this early workup instills confidence in the marketing and product development team, they may decide to invest in a value proposition workshop next to begin bringing the product to market.

Step #4: Create
high-fidelity wireframe on a computer

Once the entire team has buy-in on which of the three concepts
they want to move forward with and they’ve decided on any changes to that
direction, Meghan goes to the computer to make a high-fidelity wireframe using
a tool like Adobe XD. (Another tool you might want to consider, used by other
members of our team, is Axure RP.) At this point, she’ll make the single concept
in three sizes — mobile, tablet, and desktop.

“It’s halfway to an actual design. The goal at this stage is
to get the layout down and make room for copy,” she said.

To the original question from a MarketingExperiments reader,
this is where the actual content of the page comes into play. “This is the
stage where I start demanding copy and content — images, videos, icons,
everything. It’s hard to go further without it because you’ll have to adjust
the layout a lot based on copy length, number of testimonials, number of
images, etc. So the sooner I have the content, the faster the wireframe gets
done,” Meghan told me.

There is another round of collaboration, approval and
feedback at this stage.

Step #5: Make the comps
on a computer

After two levels of collaboration, Meghan is now investing
the time in creating a full comp of the landing page. After getting images and
editing them in Adobe Photoshop, she uses Adobe XD to create an interactive
prototype with real branding, images, colors, copy and whatever other content
is necessary.

She still collaborates though, making sure to get feedback
and buy-in along the way so she doesn’t waste time getting too far down the
road in one direction and get off base from what others on the team are

“I get three rounds of feedback at this stage. I fully comp the
mobile version and get feedback. Then tablet, then desktop. It may seem like it
takes more time to stop for feedback, but I’ve found it actually saves time to
get feedback after creating each comp,” she said.

Below is an example for the comps of an ecommerce flow on desktop. You can see the final page here, and how close at this stage the final comp is to the page.

Step #6: Give full
design to the developer(s)

After the feedback, Meghan makes the final rounds of changes
and creates final files to give to the developer(s) — grouping together the
assets and elements a developer would need to build the page, making sure all
the images are the optimal sizes and resolution for web design on different
device types, and providing the CSS slices.

That is an entirely different topic, and if you’re looking for information on the technical aspects of website redesigns, you can find it here.

The main thing for the designer and marketer to be concerned
about at this stage is a fidelity review. Don’t just hand it to the developer
and walk away. Do the final designed pages accurately reflect what the team was
trying to make? On all device sizes?

And now, a few caveats

Caveat #1: Is one version
of a landing page enough?

For simplicity’s sake, this article focuses on wireframing
and designing a single landing page. If you engage in A/B testing for
conversion optimization, it may be the landing page you test against the

But if you don’t have a control and want to engage in
testing, you would want to create at least two (if not more) landing pages to
test as treatments. You can follow the same process, just multiply the number
of options and pages created.

You can get a behind-the-scenes look at creating an A/B test here.

Caveat #2: Not every
landing page requires this intense work

I don’t want you to think every page we create has this
intense of a process. Or even a wireframe at all.

For example, for some landing pages, we’ve created a template in Instapage that we reuse. Here’s an example.

In fact, if you don’t have design and development resources
while you’re starting out, this might be the best option for you. “For
marketers doing it for themselves, use a tool like Instapage, or another
webpage builder. It saves you so much time,” Meghan advised.

Related Resources

MECLABS Institute Landing Page Optimization on-demand certification course — Designed to help teach you the science of landing page optimization without the cost of hiring an expensive consultant

Research-Backed Landing Page Templates to Scale Up Your Testing Program

The End of Web Design: Don’t design for the web, design for the mind

The post How to Wireframe a Landing Page: 6 steps appeared first on MarketingExperiments.

Click Here For Original Source Of The Article

Ads by WOW TRK

About Daniel Rodgers

A lot of news that you will not see in the paper. A lot of technology that is coming out that will not see in the paper.

Check Also

10 Crucial Steps for Launching Your B2B Podcast Into the Wild

Hey, friend, have you heard the good news about podcasts? 

Given the most recent stats, it’s highly likely you have. Over half of all Americans over 12 years of age have listened to at least one. Podcasts have well and truly hit the mainstream. In other words, the gold rush is on for brands looking to connect with a highly-engaged, long-attention-span audience.

However, getting a podcast up and running isn’t as simple as publishing a blog. We recently published an entire B2B podcasting webinar to walk you through the entire process, from conception to publication. This post will zero in on the choices you need to make and the steps you need to take to release your podcast into the wild.

B2B Podcasting Launch Checklist: 10 Steps

Sure, you could just upload your audio to your web server, add an RSS feed, and call it good. But if you want people to actually find and listen to your podcast, there are a few extra steps you should take. This checklist will help your podcast find an audience and start building a subscriber base.


#1: Choose Your Hosting Platform

A podcast syndication platform makes it easy to publish your podcast and get listed in directories. Think of it like WordPress is for your blog — it hosts the files, makes them look pretty, and makes it so people can find them.

Most platforms will also give you embed codes for embedding episodes in blog posts or on a landing page. You’ll also get stats on how many people are downloading episodes, and on what program they’re listening.

We prefer Libsyn as our hosting platform. Podbean, buzzsprout, and Blubrry are also solid options. They all have a free tier of hosting, but you’ll want to pay a few bucks a month for bandwidth and analytics.

#2: Upload Your First Three Episodes

Podcasting is all about establishing a regular cadence (more on that later). But for launch, you’ll want to have at least three episodes ready to go. There are a few reasons for publishing multiple episodes for your debut:

  1. One episode may not be enough to convince people to subscribe. 
  2. Multiple episodes show you’re committed to keeping the content coming.
  3. Most importantly, Apple podcasts requires at least three episodes to qualify for their “New and Noteworthy” section. 

So before you publish, have at least three episodes completed, and be ready to follow up with more at your promised publishing cadence.

#3:  Register with Podcast Directories

Podcasts are peculiar in terms of content delivery. Your hosting platform makes the files available, but most people will listen to your podcast on their chosen podcast app. Each app maintains its own directory — think of it as a search engine for podcasts. 

Your podcast needs to be listed in their directory, or people won’t be able to find you. I recommend registering with at least these six:

  1. Apple Podcasts
  2. Google Podcasts
  3. Stitcher
  4. Podbean
  5. Spotify
  6. TuneIn

Each of these sites will ask for the RSS feed of your podcast, which your hosting platform will generate for you.

I created a podcast tracker to keep track of all these directories — sign up for the webinar and you can download it for free.

B2B Podcast Tracker

#4: Promote Internally

Gaining visibility on a podcast directory is tricky business. Apple and Google are where the majority of your listeners will be, and each employs an algorithm to promote podcasts in search results and feature pages.

How do you get an algorithm’s attention? Engagement! Start by promoting your podcast to all of your employees. Encourage them to subscribe on Apple or Google, give a rating, and write a brief (and honest) review. What’s more, draft some social messages and encourage everyone to promote the podcast to their networks, too.

That base level of initial engagement will help your podcast start finding its audience.

#5: Activate Your Influencers

Most podcasts are Q&A-style interviews with influential guests. If your podcast includes influencers in your industry, make sure they know as soon as their episode goes live. Give them the tools to promote the podcast easily:

  • Sample social messages
  • Social media images in the correct sizes
  • Embed codes

If your podcast doesn’t feature influencers, it’s worth re-evaluating your strategy for your next season. Influencer content not only is more valuable to your audience, it’s an indispensable channel for promotion.

#6: Publish Blog Posts

The one downside of audio content: It’s not super crawlable for SEO purposes. Granted, Google has started to auto-transcribe episodes and add them to search results, but the technology is still in the early stages.

To truly get some SEO juice from your podcast, we recommend embedding each podcast in a blog post. This example from the Tech Unknown Podcast by SAP* shows how simple it can be. All you need is an introduction, a few pull quotes, some key takeaways, and a transcript.

#7: Add Paid Promotion

As with any content, you want to use every tactic available to make sure it gets seen by your target audience. That’s especially true with podcasts, since podcast search engines are incredibly competitive.

Targeted, paid social promotion can help establish your subscriber base and get your new podcast some much-needed visibility.

It’s also worth considering cross-promotion on other podcasts. Consider both paid advertising and trading guest spots with a podcast that shares your target audience. 

#8: Solicit Listener Feedback

Ratings and reviews are essential to your podcast’s success. They’ll help provide social proof for new listeners and boost your search visibility in podcast directories. 

The best way to get ratings and reviews? Ask for them. Make it part of each episode’s sign-off. You can even encourage thoughtful reviews by reading the best ones on future episodes. You will engage your listeners and solicit more reviews at the same time.

#9: Keep Up Your Cadence

As with blog content, there’s no single “right” frequency to publish a podcast. Some of my favorite podcasts publish weekly, biweekly, or even monthly. The best cadence for your podcast is “However frequently you can reliably, regularly publish quality content.”

Choose your cadence with an eye to long-term sustainability, and tell your listeners explicitly how frequently you’ll publish. Whether it’s “See you next week,” or “PodcastTitle is a monthly podcast that…” listeners will find it easier to make your podcast a habit if you stick to a schedule.

#10: Repurpose, Repurpose, Repurpose

In my last post on the content marketing benefits of B2B podcasting, I mentioned that podcasts are a content machine, and I’ll say it again. It’s easy to finish an episode, publish it, then forget it and move on to the next thing. But don’t do that! 

Pull snippets of audio content for social media. Turn them into short videos, too: Add a still image or a simple looping GIF for visual interest.

Use your transcriptions as fodder for future blog posts, quotes for influencer marketing, or even a stand-alone asset. 

Any way you can reuse that content can help bring more listeners to your podcast. What’s more, putting the content in a different medium can reach an audience who might not be into podcasts (yet). 

Check, Check, One Two

Launching a podcast is a little trickier than launching a new blog, especially if you’re new to the format. But if you follow this checklist, you can make sure your podcast is available on all the right channels and is ready to start attracting an audience.

Need more podcasting help? Check out our B2B Podcasting Webinar. In addition to learning the Four P’s of podcasting success, you’ll see me make this face:

B2B Podcasting Face

*Disclosure: SAP is a TopRank Marketing client.

The post 10 Crucial Steps for Launching Your B2B Podcast Into the Wild appeared first on Online Marketing Blog - TopRank®.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.