From Email to Landing Pages, Here Are the Keys to Creating Great Wireframes

A lot goes into the creation of a new digital element for your brand’s web presence, whether it’s a totally new website or a landing page template or something in between. Large or small, one of the most important parts of the process is planning. You need to know where you’re going before you start trying to go there—one of the best ways to do this, once you have concepts in mind and are ready to start to really build, is through the wireframing process.

When designing, a lot of terms get thrown around: wireframes, high-fidelity wireframes, low-fidelity wireframes, mockups, prototypes. And while I’m not going to dive into every single difference between them all in this post, I do want to talk about what makes a successful wireframe at the most basic level.

Define “Wireframe”

Just so we’re all on the same page, a wireframe is a static visual representation that focuses on the goals, layout, behavior, and content of the asset you’re creating without layering in details like styling, color, or graphics. The goal of a wireframe is to focus on interaction and usability, not to get deep in the weeds around the final aesthetics of the asset.

Wireframes are constructed with the user’s needs and their journey at the forefront. They help everyone involved in the project—from creatives to digital marketers to the stakeholders who will approve the final direction—visualize the end result, they clarify features, and they keep the team aligned—when they’re done right. Here’s a few things to keep in mind when creating wireframes for your next digital offer.

Understand Your User

Yeah, this might sound obvious, but it’s still a thing that plenty of marketers forget about, or just neglect to think about either due to budget issues or simple hubris. When timelines get crunched or budget gets slashed, extra research is one of the first things to go, especially when the value isn’t obvious or your team feels like they’re already experts. With user research, it’s easy for business leaders to fall into two categories:

• We know our customers really well—what do you need to know? We’ll tell you.
• We’ve defined our business goal for this asset, so design around that.

There’s a few issues that arise from that type of thinking. First, if you’re a business leader, you probably do know your customers—but only from a certain vantage point. You understand pain points that your product or service solves, and how what you provide measures up against your competitors. But you might not have a clear picture of how your users think, what they like, and how they interact with your product.

On the other hand, designing around the business goal can actually hamper the user experience. Suddenly, the design is reflective of someone who knows the company/industry/product/service really well. Your users might not. In other words, what’s clear to you might be confusing to others.

Both of those cases lack a true understanding of your user—their preferences, knowledge, technical capabilities, and research process. That’s why, before you put pen to paper on wireframing, you need to make sure you have identified your user and you know their thoughts, their feelings, and the actions they need to take. One great way to make sure you have all this knowledge is by doing real brand research. It’s a bit of work, but believe me, it’s worth it.

Identify the user goal on the page—what do they need to accomplish? Read something? Understand a process? Fill out a form? Make a call?

Then, once you’re actually ready to start wireframing, identify the user goal on the page—what do they need to accomplish? Read something? Understand a process? Fill out a form? Make a call? By defining your users, you are able to then create a user journey, which is the path that a user takes to reach their goal on your website. These journeys inform the content by allowing your team to think about how to design something that enables the user to achieve their goal as quickly and easily as possible.

By crafting user stories and journeys, the design naturally becomes user-centric.

Admittedly, knowing how much user research to do and when to do it can be difficult. If you’re doing a full website redesign with a big budget, it’s critical in ensuring success and you’ll have the resources to get it done. For an email, on the other hand, where there are many more limitations, it’s less necessary and you can rely a bit more on research you’ve done in the past.

Ask, “How Will Users Experience This?”

You might be thinking to yourself, “Lynsey, didn’t we just cover this?”

Yes, but really no.

More specifically, what device will the user be using? Desktop, mobile, or tablet—the combination of device, asset, and desired action will impact how the asset is designed.

For instance, each email service provider (ESP) has its own set of rules and restrictions. Understanding the top platforms and devices users are reading emails on will help your design team know how to best organize the information—columns, full-width text, image heavy, etc.

Create a Content Brief

A content brief is a high-level document that describes the intended audience and purpose of the asset, prioritized objectives, user conversion goals, and general direction and considerations for copy and design.

Think of it as a guiding document that ensures everyone knows what you’re creating, why you’re creating it, and who you’re creating it for. If you’re planning (that is, wireframing) a new asset, it gives you all the information you need to succeed.

Start Wireframing

It’s easy to become siloed in the individual marketing processes that go into the production of an asset. The digital team crafts the requirements, the design team creates something beautiful, the copy team brings the messaging to life—but they all do their parts of the work on their own. What you end up missing out on is the ability to collaborate—blending the ideas and perspectives from each respective discipline.

To that end, I would recommend that your entire (relevant to the project) team meets to wireframe. Get a room, get a whiteboard, and get to work.

Begin the meeting by outlining project expectations, like if you’re creating a certain number of website templates or an email layout. Review the requirements—your user stories and journeys, the goal of the page, and any additional considerations (timeline, development environment, etc.). Then, start drawing on the board, and always be sure to wireframe both desktop and mobile environments.

When you feel that your drawings are in a good place, then you might redraw them within a software tool—like Cacoo or Invision—to make sure they’re presentation-ready.

Use Real Content

I’m not talking high-fidelity mockups, but I am talking about putting a name and purpose to placeholder content. This means that when you wireframe, skip the lorem ipsum as much as possible and replace it with temporary headlines, copy, and whatever else you can. When you’re presenting your ideas, the stakeholders involved need to be able to truly grasp what the page is going to do—after all, that’s really the point of the wireframe.

Your designer might not like it, but the last thing you want is a beautiful wireframe with content blocks that actually don’t serve a purpose when you bring it to life. The content obviously doesn’t have to be perfect, since this isn’t the actual copy that will go on the final page. So don’t spend hours and hours crafting the perfect turn of phrase. But be clear about what a button is asking the users to do, what the goal of a text paragraph is, and why each element exists on the page.

Start Smart, Finish Strong

The best way to ensure your marketing works is to plan well. That doesn’t just mean jotting down a few notes—it means going through the whole process of researching, ideating, and building a good, solid wireframe. It’s the foundation you need to build a robust piece that will do exactly the job you need it to do. Measure twice, cut once, right?