Presented live on Tuesday, October 23, 2018
Register for our live tutorials
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?
In this live tutorial conversion copywriter Joanna Wiebe shows you how she uses better practices in user experience design to wireframe landing pages for her clients.
TRANSCRIPT
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?
Joanna Wiebe: 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 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.
Joanna Wiebe: 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.
Joanna Wiebe: 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.
Joanna Wiebe: When you put that into a wireframing 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 [inaudible 00:02:40], not is that right? Is that really distracted?
Joanna Wiebe: Without fail, once I switched to presenting wireframes in my copy, and this happened back when I was, I think, at [inaudible 00:02:54] Experts is where I first started doing this, 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.
Joanna Wiebe: I mentioned this to … we had a mastermind retreat last week and I mentioned it to the masterminders where in 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, which is what we use, we don’t have to get into that. We can get into that in wireframing 201, but not today. 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?
Joanna Wiebe: Because there was no question in their mind. All they had to do was think about 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.
Joanna Wiebe: Yeah, Amine says wireframing is showing what goes where to your clients. That’s a really nice simple way to put it. 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 we’ve been through a lot of user experience and UI training. I have, so I’ve come to a place where I feel really confident wireframing.
Joanna Wiebe: You don’t have to have that. You don’t have to have this huge, like, you’re been doing this for a lot of time. 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. Yes, Melissa says, viewer revision sounds amazing. Yes, it is amazing. This is actually a night and day kind of thing.
Joanna Wiebe: People are saying they use Balsamic a lot, great. Go ahead and use Balsamic. Ryan says he uses Sketch. Other people use other things. That’s cool. I use Photo Shop. 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.
Joanna Wiebe: So, Balsamic is great. Elizabeth asking can you do layouts with Air Story? Nope, that’s not what Air Story is designed for either. I use Photo Shop, which everybody on the planet cringes at. Why would you use that? Use Illustrator, use some other things In Design. I have trained myself on Photo Shop over many, many years so I’m going to show you how I do this in Photo Shop.
Joanna Wiebe: But, it’s not about using Photo Shop. It’s not about the tool at all. What I’m going to share with you is the actual system, the approach, that’s the point.
Joanna Wiebe: Okay, so I’m going to share my screen. Keep on chatting. Loving the chats coming in. Abrine says In Design is what [inaudible 00:06:30]. Okay, cool. Alright, so I’m just looking at things now because that just came purely to us. So I will share my screen. Okay, so you should now see a blank screen in Photo Shop. I’m sure everybody can see that, so we’re cool. Let me know if not.
Joanna Wiebe: 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, in whatever platform you use, I’m showing you in Photo Shop but whatever platform you use, start with a screen resolution that is common, so 1920 x 1080 is a common screen resolution, so we’ll look at this. That’s all I created was 1920 x 1080. Cool. That’s going to be, when it’s blown up to full size, it’s like a standard screen resolution, awesome.
Joanna Wiebe: 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.
Joanna Wiebe: 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.
Joanna Wiebe: Let’s switch over to … I updated by OS and it’s slowing everything down. 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.
Joanna Wiebe: 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. Someone out there is going to be, oh Joanna, here’s an easy way to do that, just turn on this setting in Photo Shop. But I don’t want to hear it. I don’t know anything about the details of Photo Shop. I use it as a copywriter who wireframes. That’s it.
Joanna Wiebe: So, I put that rectangle on the page. I know, Andrew, of course guides are your friend. I’ve had people send me Photo Shop files with guides on, I turn them off every time. I use the rectangle. 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.
Joanna Wiebe: So, we’ve got very light, very pale gray wherever possible, [inaudible 00:09:48] Sarah, wherever possible pale grays. 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 like, hey, this is where the global nav goes. Your logo will go in there, wherever your designer wants it to.
Joanna Wiebe: 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.
Joanna Wiebe: Okay, now we’re dealing with this hero section. I have 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. Balsamic has this a as a placeholder image as well. Just drop a placeholder image into the space and make sure it fills the space the way you would recommend the designer do.
Joanna Wiebe: Looking at this, we have got this hero section up here, which hopefully you can see my cursory thing going around it, it’s a cursor. That’s the hero section. I’m recommending that a large image be 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.
Joanna Wiebe: Put that placeholder in there, okay? Have that there, talk them through it. When you’re actually creating your wireframe, leave this rectangle that I turned on, you leave that there all the time as your guide. When you’re ready to share it, you just turn it off, and in Photo Shop you can just unview it. In other platforms like Balsamic you can just delete it, and I think you can also just hide it as well by clicking the eye icon.
Joanna Wiebe: Okay, notes here. When you are organizing your information, your copy on the page, do your best, if you’re not a designer have a website that you strongly like or your client’s existing website right next to you on another screen or in the other split of your split screen for your monitor, because it can be very easy for non-designers to run away with just throwing a lot of stuff on the page.
Joanna Wiebe: 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.
Joanna Wiebe: 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. But 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.
Joanna Wiebe: So we have here 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 if a headline, if this headline which we’re going to have as an H1, if this headline is 34 points, 34 points you can look right there, whatever size you use in Balsamic, if it’s large, extra large, whatever, make sure you’re consistent with that.
Joanna Wiebe: 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, okay, so 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.
Joanna Wiebe: 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. But 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?
Joanna Wiebe: 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.
Joanna Wiebe: 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, like we’re seeing here, and it’s a long established fact that a reader will be distracted by the readable content of a page when. That’s a good length.
Joanna Wiebe: 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.
Joanna Wiebe: 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.
Joanna Wiebe: Images, again make recommendations wherever possible for your images. Be really thoughtful with them. I see a lot of copywriters put in … good one, Emily. I see a lot of copywriters put in just 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.
Joanna Wiebe: 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, and that’s where icons we have here off to the side. I’m going to blow this up a little bit so you can see more, icons next to muscle tissue, immune system, memory, things like that. But otherwise we have a big image here with a recommendation on it for what that image should be.
Joanna Wiebe: 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.
Joanna Wiebe: Blocking is one last thing I’m going to get into before we kind of close this early wireframing, like this 101 session up, we can get into more details in the next wireframing session, but 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.
Joanna Wiebe: Our job when we’re communicating to the designer there is for them to understand that they’re separate section 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.
Joanna Wiebe: 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 giff in some cases, or a video should support the copy that you’ve written.
Joanna Wiebe: 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 go 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.
Joanna Wiebe: So, knowing that make sure that you’re not crossing any lines into being designerly. You do not want to be designerly. You want to use white space like a designer, you want to use blocking like a designer would. Beyond that, 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?
Joanna Wiebe: Just keep working on it ultimately, and we’ll share more next time we do a wireframing session. We will see you next week for our next Tutorial Tuesday where we’re bringing in a person from my mastermind, actually, Brad who is going to talk to us about writing emails for launches. So if you are working on launches coming up, or if you’re writing emails for clients seasonal campaigns, because ’tis the season, then you’ll want to attend that.
Joanna Wiebe: Alright, we will see you next week. Bethany says Brad who? I intentionally didn’t say. You’ll have to tune in. Alright, thanks everybody and we’ll see you on the next Tutorial Tuesday. Thanks guys.
