 This month’s newsletter is by Christopher Silvestri. He wrote an article about SaaS Website Design for our Wireframing Academy in the past, and is a freelance conversion designer & copywriter whose job is to bring research-backed UX design and copy together, to help his clients convert more prospects into customers.
It’s not very common to think about UX and copy as two sides of the same coin. More often than not, UX is a phase in the design process and copywriting is a totally different one — something that comes later in the process and is disconnected from the other steps.
One way to work on UX and copywriting together is to learn to wireframe your copy. Chris will show us the why — what are the benefits of wireframing copy — but also how to do it, with a step-by-step guide and examples from projects he worked on. And there’s one more treat for you, our inner circle: an e-commerce template he created that you can reuse for your purposes. You will find it below.
In the next few weeks we’ll publish this content on Balsamiq Wireframing Academy. Any feedback to improve it is welcome! You can also reach Chris directly on Twitter or LinkedIn. 😊
|
|
Wireframing website copy for product people, by Chris Silvestri
|
|
As a product person you wear many hats every single day.
You might write content for your website in the morning, then move on to answering emails, then again to designing a new feature. Just to finish it all up with brainstorming a solution to a problem that’s been on your mind the whole day.
It’s a lot.
And to top it all off, you have to also explain — to the whole team — what you’re working on and why it’s important.
Writing is a big part of a PM’s role, and when you can’t combine your design chops with effective, conversational writing, getting your team on board with your ideas becomes yet another tedious, challenging item on your to-do list.
|
|
Why should you learn how to wireframe your website copy?
|
|
Working both on my own as a conversion copywriter, then with an agency as a UX designer and then as a jack of all trades at a usability testing startup, I’ve seen and tried a lot of things.
And I have to say, I don’t envy product people.
You know that both UX and marketing copy are important (and are desperately trying to convince everybody else about it), but when it comes to the actual in-the-trenches work, every time you share your sketches or Google Docs — hoping the words you so meticulously mulled over get excited nods — it’s a leap of faith.
You know you need more people to know about your product, but that top-of-the-funnel website copy never seems to get the attention it deserves.
What can you do about it?
You can learn how to wireframe your copy.
As a copywriter myself, I can tell you wireframing is our secret weapon to get better results out of every word we write.
Wireframing helps you in multiple ways:
- You are able to talk confidently with the stakeholders or the designer about the whys behind your work.
- Designers are less likely to interpret, change, and move copy around.
- You realize when a piece of copy doesn’t fit and when you should edit it.
- You understand whether the copy flows well section after section.
- You think more carefully and critically about the words you write and the visual elements supporting them.
- You help the other party visualize the final copy and save yourself hours on pointless edits.
Wireframing copy as a skill is not only invaluable for your execs and team, but for your career.
That's because when you present your copy in wireframes, you show others that you thought about every single detail and are prepared to back it up, line by line.
That's how good converting copy should work anyways, right?
|
|
What I wish I knew when I started wireframing
|
|
I first started wireframing a bit after I learned copywriting. I was lucky enough to stumble on Joanna Wiebe’s (Copyhackers) work and I became a believer in conversion copywriting.
That said, my very first wireframes were pretty bad.
There was not really much consistency, not enough white space, alignment was often not great, I used too many colors, and there was no such thing as margins or padding for buttons. All of this contributed to taking the focus off the copy and into the flashy but awkward layout.
|
|
|
My wireframing in 2018… and in 2021
|
|
It's all about making your copy stand out while giving enough direction for how the content should be consumed.
Learning and practicing the basics of good design + copy will put you in the top 10% of product people out there. And it will help you communicate more effectively with designers/developers when needed.
|
|
How to wireframe web copy — Step by step
|
|
1. Wireframing comes last
|
|
You don't want to jump into wireframing as soon as you start a project. You know 80% of the work is research and gathering the data you need to write your copy. That's what should always come first.
And even once you've got your research done, you shouldn't write your copy directly into the wireframes right away. That would be like multitasking. Writing copy and thinking about all the design principles takes 2 different thought processes.
We humans are not good at that. This is why you should...
|
|
2. Write your draft in a text document
|
|
I start getting an idea for the structure I want to give the copy in Google Docs. Using good formatting and tables is pretty much all you need.
To get ideas for the layout of each section, I use sites like Dribbble and generally keep a swipe file of good designs, especially ones that worked in converting me.
As a rule of thumb for deciding on layout and copy placement, always ask yourself these 3 questions:
- What does my potential customer/user expect to see on the page?
- What do they need to see to move forward?
- How should I present this information to them, so they can consume it as easily as possible?
|
|
Often I will also add comments to specific sections of the copy to provide more context. These comments can be anything from ideas on functionality or alternative copy and testimonials.
|
|
3. Pick your tool and get your wireframing library ready
|
|
When you're wireframing, you don't want to think about the technicalities of using a specific tool. You should be able to think of a visual element, and add it to your wireframe in 1 or 2 clicks.
Being efficient will allow you to keep your focus on the copy. That’s where having templates or a library of visual elements ready to use in your platform of choice comes in.
|
|
4. Translating the text document into a wireframe
|
|
Once you have your copy document ready and roughly pre-structured, it is time to move it into a wireframe.
I always start with a width of 1440 pixels for my page and keep it fairly long to start (5000 pixels). Here it's important to also create a content container for your copy. I usually go with around 1200px.
To do this in Balsamiq I just add a rectangle, lock it in place, and whenever I need to see the container lines, just turn the border from hidden to ‘Square’ from the Inspector:
|
|
This container will help you make the copy easier to read and neatly organized.
Also keep in mind that for good readability, your sentence length should be no more than 75 characters (50-60 is ideal). A quick trick to always check this in your wireframes is to have this string handy to copy-paste:
"abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz"
3 alphabets is 78 characters, so always make sure that at your font size/style, your line is shorter than that.
If you’re brave enough, you can also create the mobile version of your wireframes. This requires more practice and learning about responsive design, but it’s insanely valuable for designers. I usually do it, especially when I know the client’s traffic comes for the most part from mobile devices.
Remember, our mantra is “remove any guesswork”.
|
|
Editing should be part of your writing process. Wireframing makes editing even more efficient and focused.
That’s because once your copy is inside wireframes, you’ll clearly see which pieces are too long or which don’t flow well. The formatting and sizing constraints you gave yourself when creating these basic designs act as signposts for your editing process.
The rule of thumb here is to avoid changing styles or trying to force your copy where it clearly doesn’t fit. If you think it needs rewording, this is the best time and place to do it.
|
|
You've got your nice looking wireframe and powerful, research backed copy ready to show.
Before you do that, let's make these wireframes objection- and revision-proof.
At this point you want to add any notes on your thought process or questions you'd like others’ input on, to the wireframes.
|
|
It's just a matter of clearly and concisely explaining your decisions and when necessary, referring to the research that drove them.
|
|
7. Presenting your wireframes live
|
|
You might think this is an optional step, but I would highly recommend you to go through it. Presenting your wireframes on a live call with your team members and execs, will allow you to shortcut the approval process and also give you the chance to really dig deep into the why behind your decisions.
If you've done the work, you should be confident about it and this is your chance to prove it.
|
|
Wireframing is not only a great way for you to make sure your hard work gets implemented the way you planned it, but it's also the best way to bridge the gap between copy and design.
And in turn make the internet a better place.
Designers should design with difficult data. And what's better than real, research-backed copy for it?
|
|
Product news
|
 |
|
|
Our monthly release schedule is working well. We did a bug-fix-focused release, and are working on several exciting features, both for the Wireframes editor and Balsamiq Cloud.
Speaking of which, if you are interested in helping us test SAML authentication in Balsamiq Cloud, please reply to this email and we’ll set you up!
|
|
Wireframing Academy news
|
 |
|
|
We’re excited about the breadth of this month’s additions. We know that everyone has a preferred way of learning, so hopefully there’s a little something for everyone.
We added a follow-up course to our recent course on designing navigation. This mini-course is called How to Design Page Layout, also by Donna Spencer.
We also added 4 new guides to our UI Control Guidelines: Steppers, Sliders, Links, and Breadcrumbs. Lots more are on the way!
Lastly, our next webinar is right around the corner! September 30th at 10am PDT / 1pm EDT / 7pm CET. Our own Billy Carlson will be talking about Content-First Design with Wireframes. If you happen to miss it, don’t worry, we’ll be posting the recording to our webinars page.
|
|
We’re trucking along nicely, always working ON our company, not just IN our company. 😊
Right now we’re excited about our upcoming virtual retreat at the end of October!
|
|
That's it for this month!
|
|
Is there anything you would like for Chris to add or change before publishing it on Wireframing Academy? Are there other topics you would like to read about, that we may ask some experts to write about? Just hit “Reply” and let us know!
See you next month, with more behind-the-scenes news from your friends at Balsamiq!
|
|
 |
Francesca for the Balsamiq Team |
|
|
|
|
|
