Hit enter to search or ESC to close

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

When designing a new digital element, 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 without layering in details like styling, color, or graphics. The goal of a wireframe is to focus on interaction and usability.

Wireframes are constructed with user needs and journey at the forefront. Wireframes are also a critical step in creating any digital element—from content offers and product pages to emails and interactive tools.

Wireframes help everyone 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

As important as it is, making sure you understand the user before you start working is still a step that is often overlooked. 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. 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 it 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.

To address that second category of leaders, 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 cases above 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, feelings, and the actions they need to take. 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 a 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, it’s critical in ensuring success. For an email, on the other hand, where there are many more limitations, it’s less necessary.

Ask, “How Will Users Experience This?”

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

Yes, but 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.

Start Wireframing

It’s easy to become siloed in marketing processes. The digital team crafts the requirements, the design team creates something beautiful, the copy team brings the messaging to life. 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 expectations, like if it’s 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. 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. 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 digital marketing (and non-digital too, obviously) 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?

Lynsey Johnson Team Photo at Element Three

Lynsey Johnson is "mostly a Hoosier," but she's a digital marketer through and through. Marketing leverages her love of reading and writing, but her skills in math – honed in school and her past work as a financial analyst – help her find the best ways to maximize our clients' digital spend. And she's also an expert gardener, as it turns out!