Presented live on (updated June 30th, 2023)
Register for our live tutorials
In this tutorial conversion copywriter Joanna Wiebe shows you how to wireframe a website using better practices in user experience design to wireframe landing pages for her clients.
Are you going through several rounds of copy revisions just to get buy-in from your clients? Don’t make your clients guess how your copy might look, show them. Wireframing your copy helps your clients clearly see how your copy will look to their customers and prospects. Once you start sharing your wireframed copy get ready for fewer rounds of revisions… and who doesn’t love fewer revisions?
Joanna Wiebe: Okay. Hello everybody. Welcome to Tutorial Tuesdays. It has been a couple weeks since our last tutorial. Sarah says, “Forever.” It has been. I have been traveling a lot for work. It’s been cool, but I’m finally back in my office where stuff gets done. Today’s tutorial is all about wireframing your copy.
Why do we wireframe copy in the first place?
If you’ve wireframed copy, I’d love to hear from you in the chat, if that’s what you do, so feel free to throw that in there.
If you’re new to wireframing, great. People are saying they raise their hand timidly, Todd says, and Amine uses Balsamic, which is very, very cool. Some people don’t even get into wireframing at all, so let me just tell you what wireframing is.
Cool, Emily is like new to the terminology. What is it? Very good question.
Wireframing is when you take the copy that you’re recommending to a client, or even for yourself if you’re writing your own copy, usually for web pages, like websites or landing pages, not often for emails unless you work with someone who has a really designed email, which isn’t even the kind that we recommend.
We’re Copyhackers, so we’re unlikely to show you how to wireframe an email, but wireframing landing pages and web copy for your clients is when you take the copy that you have and you organize it in a visual way on a page that then a designer can use and take and interpret to turn into copy that is more likely to convert in a visual form.
If you happen to send a copy doc over to a client, you send them a Google doc, you present ideally your copy to them, they see a Word doc, they see a Google doc. They have to figure out where everything is going to go, and after many, many, many years of presenting Word docs to internal clients and external clients as well, and having them go, like …
Because they’re busy thinking about how that’s going to look on the page.
“Is that headline too long?”, “Is that button in the right place?”, “Is that body copy too long or too short?”, “Are we getting to the point?” Things like that.
When you put that into a wireframe of a website all of those questions go away, and they’re like, “Oh, that’s how it will look.”
They can stop thinking about how it might look and actually just look at the copy itself and see, like, “Oh, okay.”
Now when they’re reviewing it their feedback is focused on the copy as it’s actually going to be, not…“mmmmmm is that right? Is that really distracted?”
Present your wireframe first, THEN send along your copy doc
Without fail, once I switched to presenting wireframes in my copy, back when I was at Conversion Rate Experts, once I started switching to sharing the wireframe and then afterwards sending along the Google doc or the Word doc, that was when feedback from clients went from “here’s round three of our feedback” to one very light round of edits. Like very, very light.
I mentioned this to other masterminders at a retreat last week, wherein one of my most recent review sessions where I presented the copy in the wire and then the client had three days to go into Envision and leave comments on it.
They left so few comments I was like, “did the team not know how to use commenting? Do I have to tell them how to turn comments on?”
Because there was no question in their mind.
All they had to do was think “Is this the page that we want to present to our customers and prospects?”
That’s it. That’s where they’re at. They’re not thinking about anything else, and once they see it and they get it, and as long as you do it right, then there’s that great buy-in, which makes your life so much easier.
Wireframing is showing what goes where to your clients
The challenge with wireframing for copywriters often is that not all copywriters think of how information should appear on a page. So, over many, many years I’ve been through a lot of user experience and UI training, so I’ve come to a place where I feel really confident wireframing.
You don’t have to have that. You don’t have to have all this training, you just need these basics.
You just need to know what to do and what not to do. So that’s what we’re basically going to cover today in today’s tutorial.
I use PhotoShop. I started by using Balsamic, I really liked it, but I write long-form sales pages a lot, and Balsamic’s one limitation when I was using it, which may have been resolved by now, Balsamic is also a great team in everything.
We love everything about Balsamic. But we had to move away from it because I was writing long-form sales pages that were 20,000 pixels tall, like they were huge. They were just going way beyond what Balsamic was made for, which was initially made for wireframing UIs for software in particular.
How to wireframe a website
Okay, so I’m going to share my screen. Keep on chatting. Loving the chats coming in.
Okay, so you should now see a blank screen in PhotoShop. I’m sure everybody can see that, so we’re cool. Let me know if not.
1. Start with a screen resolution that is a common size
What we’re looking at here is the basic starting point for a wireframe. It is a blank piece of paper, ultimately. I’m going to show you what we’re doing.
So when you first start your wire, start with a screen resolution that is common, so 1920 x 1080 is a common screen resolution.
So we start there knowing that our page is probably going to get longer and longer as we go. It’ll never get wider than that though, so we’re only going to work on the height of it, that’s cool.
We have this blank starting point, and now we get to take the copy that we wrote in the copy doc and put it into a wireframe. Again, great messaging hierarchy, really clear for clients etc.
What I’m going to do for the purposes of this tutorial is I’m going to walk you through a completed sample wireframe, so this has sample copy in it, a lot of lorum ipsum in it, it does not mean I advocate for lorum ipsum. Lorum ipsum is a tragedy for most copywriters when we see it. But, for the purposes of this you don’t need to see the copy itself, you need to see where the copy goes.
Okay, so this is the page. This is again a 1920 width. Let me just go in, the image size in 1920 x 1100 pixels, so it’s a very tall page. We’ll get into that, but it doesn’t matter how tall it is, does the copy work in the page that you’ve created? That’s it.
We’ve got the basics here. Let me slow this down. I’m just going to show you what we’re working with here. So we start with this space, the standard space, and because I’m not a designer, this is what I like to do. I add in this rectangle that tells me where to keep the copy.
So, I put that rectangle on the page. I have this rectangle that guides where my copy is going to go. All you’re really working with when you’re wireframing is black, white and gray. That’s it.
2. Keep it basic, clear and concise – you’re not a designer, you’re a copywriter.
So, we’ve got very light, very pale gray wherever possible. And you’re not giving more detail than you have to as a copywriter. So unless your client has brought you in to work on their global navigation and their site map and things like that, don’t worry about adding in details like their logo, their global nav, or any of that sort of stuff. Right here, I have a rectangle, a white rectangle up at the top of the page with a line underneath it, that’s where the global nav goes. Your logo will go in there, wherever your designer wants it to.
Again, unless your client has brought you in for that, don’t distract them with attempts to design things. You’re just putting the right information that they hired you for in the right order on the page.
Okay, now we’re dealing with this hero section. I have an X wherever I placed an image, and I recommend you do the same, you have a rectangle, like a box that shows a cross through it. Just drop that as a placeholder image into the space and make sure it fills the space the way you would recommend the designer do.
3. Give image recommendations where necessary (like the hero!)
Looking at this, we have got this hero section up here, which hopefully you can see my cursor going around it. That’s the hero section.
I’m recommending that a large image is behind that text.
When I present the copy I’ll tell the client that, we recommend a large image and usually you have a recommendation for that image, in this case we would have that recommendation. Unless you don’t, then just give guidance on the image you believe should be there.
Put that placeholder in there, okay? Have that there, talk them through it.
If you’re not a designer, have a visual swipe right next to you where you can just steal ideas directly from that.
Again, you’re not going to use color unless it’s for a button where you believe that there should be color, so everything you do in intentional, everything is black, white and gray, that’s it.
4. You need to control how the copy is presented on the page
Think about the font size. You have to be really realistic about the font size. This is where most copywriters get it completely wrong.
Headlines are chaotic messes. Headlines run the whole width of this page, right? This is what I see very often with copywriters. You need to control how the copy is presented on the page.
That’s where if you’re like, well I don’t know, have a beautiful website next to you and just try to do exactly what they’re doing, just take the images out and go focus on their typography, on how wide their headlines are, on how wide their crossheads are, and things like that.
Don’t make it up if you don’t know what you’re doing, essentially, just swipe from other people who know it really well.
So we have here the text that we’re recommending is going to be 20 points, right, a 20 point font here. Don’t worry about getting too deeply into this, the point that I’m making right now is when you go through and put your copy on the page, try to be consistent with your sizing.
So, H1 should always be the same size.
H2 should always be the same size.
H3 should always be the same size.
Body copy should always be the same size.
That will help your client not get distracted by visual inconsistencies. Again, this is why we keep things black, white and gray. We don’t want to distract people from looking at the copy. We’re just trying to help them understand the order in which things go.
So, we have this section up here. Cool. You don’t have to have it there. If we wanted to we could wire it so that we put this underneath it if that was what your copy was.
5. Think about the readers’ experience
An important point here is that the text doesn’t go the width of the page. That’s not our job. We don’t want the text to go all the way out to the far side of the page. You can’t read that kind of stuff, so think about the reading experience.
This is part of getting to know a little about user experience, but we’re digital copywriters, this is what we should be thinking about, right? How do people read our copy online? Not just is it persuasive?
It could be persuasive as humanly possible, but it’s spanning the whole width of the page, it’s too hard to read it, so make sure you’re intentional with your body copy.
As we get into it, think through how long your headlines should be. When you take your Word document and you try to turn a crosshead in your Word document into a crosshead on your wireframe, you’ll quickly be able to see the text that just keeps going and going.
A headline is too long sometimes, and this is also a problem I see with a lot of copywriters, especially those with a direct response background. They’re used to writing sales letters, and then they try to convert that into a world of writing sales pages or websites or landing pages.
When they do that and they don’t wire, their copy gets so long.
Once you put it in a wire, you’re like, “Oh wow. That crosshead that worked in a sales letter doesn’t work in this sort of space where there’s only two lines of height”.
It’s a long-established fact that a reader will be distracted by the readable content of a page.
6. Be ruthless when editing after wireframing your website copy
So once you put your headline into your wireframe, once you put your crosshead into your wireframe, once you put your body copy in your wireframe, you’ll see where you do need to cut or you need to trim things back.
Be succinct so that people can read, not because we’re trying to cut words, just because we’re trying to make it easy to consume the content that we’re producing.
Crossheads, for everybody who’s not familiar with that, this is a crosshead, we’re showing here. It’s a long-established fact this is a headline, right here.
If we move this, it is a long-established fact back up here, this is technically called eyebrow copy. Okay? This is a long established fact, eyebrow copy because it’s over … it’s the brow, it’s over the important thing. So it’s eyebrow copy, this is the headline, cool? Headline, eyebrow copy, crosshead and we continue on, this is body copy right here.
Images, again make recommendations wherever possible for your images. Be really thoughtful with them.
I see a lot of copywriters put in blocks, like I see very commonly a three column layout for copywriters, where they don’t know where the image is that will go next to each of those, or on top of each one of those body copies, or those little three column blocks.
Then it’s confusing for the client, who’s like, “Well what goes there?”
And if you don’t have an answer for that, you lose your credibility bit by bit in your review sessions, so when you make a recommendation for an image, make sure you have strong idea of what the client should put there.
If you don’t, ask yourself “should it be an icon instead?” Is this something people just know, like muscle memory type thing?
7. White space is your friend
When you don’t have an image next to something, next to a block of text, that’s okay. Allow yourself to have white space off to the side. That’s allowed, totally completely allowed.
You’re allowed to use white space as a copywriter too, in fact you ought to, but again we want to be careful that we’re keeping our crossheads always the same size and our body copy always the same size. I mean like the actual font size, like the type itself. And not spanning the whole width.
8. Blocking
Blocking is one last thing I’m going to get into before we kind of close this early wireframing 101 session up. Think through how you’re organizing information using horizontal lines, like this one here, horizontal lines and shading. So we’ve got two shaded areas here, one is lighter than the other.
Our job when we’re communicating to the designer there is for them to understand that they’re separate sections and they can interpret that how they want to, but you’re recommending that these sections stand out as independent sections. Don’t overdo it with striping or with horizontal rules.
Okay, so as you move down the page just keep following the basic rules of writing within a contained space, using image placeholders that are purely placeholders, but that you have ideas for.
If you don’t have an idea for what image should go there, it probably shouldn’t have an image or video or whatever. Think through what should support the copy that you’re writing. What visual or gif in some cases, or a video should support the copy that you’ve written?
Is it an icon, like we have here, we’ve got this section up at the top as we’re mid-way through the page, where we’ve got icons there as well, and these are larger icons, they’ve got like bigger placeholder images, or like little placeholders.
That’s really it. Keep your copy nice and tight. Make sure that you’re not trying to be a designer.
Your job is not to be a designer, and you’ll want to preface this when you present it to your client by saying, “I’m not a designer but I do organize information for a living that is actually a big part of commercial copywriting, so I’m making these recommendations for you based on better practices in user experience design.”
So, knowing that, make sure that you’re not crossing any lines into being designerly. You do not want to be designerly.
Just make your copy as readable as possible and really run it by other people if you’re not sure. Like the first few times you wireframe, run it by other people. Is this easy to read? What could I do better?
Just keep working on it ultimately, and we’ll share more next time we do a wireframing session.
Alright, we will see you next week. Alright, thanks everybody and we’ll see you on the next Tutorial Tuesday. Thanks guys.
