How to Present Your Copy Like a Pro and Save Time and Money
You’ve finished your copy.
Now, try to imagine how it’ll look like when it’s live on a landing page. Hard, right?
It gets harder.
Your client and designer have to imagine the same exact thing. The odds of that happening? Not good (be prepared for endless feedback and rewriting), unless…
You wireframe your copy!
A wireframe is a visual guide to elements on a page that conveys layout, content, and functionality. It doesn’t convey design. That’s the designer’s job.
With a wireframe, you can arrange your words in a way that maximizes conversions, and avoid the risks of getting some structures changed. You can organize your copy based on best practices in user experience design.
Copy should lead the design. Every sentence you write is there for a reason. But, you need to communicate that to the designer.
Start by sketching on a paper to see how your copy flows, or try different layouts on paper before choosing one. Then, use an online tool to wireframe your copy.
Best Practices When Wireframing Your Copy
- Use the actual copy instead of Lorem Ipsum.
- Use only white, black, and gray. You are not designing. You are organizing your copy the way it should go. Simplicity is key.
- Show information hierarchy through font by changing the size of the font and giving it a style (bold, italic). Two generic fonts are enough.
- Be consistent with font size. Use a size for your H1, a size for all your H2, and a font size for the body copy.
- Don’t use actual images or graphics. This helps avoid distractions and focus on how the copy flows throughout the page.
- To show where the image goes, use simple rectangles and squares as placeholders with an “x” through the middle of the box.
- Do the same for videos. Use a rectangle as a placeholder and a triangle as a play button at the center of the box.
- Use horizontal lines and shading to communicate to the designer blocks that are independent sections and need to stand out.
Wireframe your copy to avoid mistakes and narrative flow interruptions. Clients and designers clearly see how the page will look like when it’s live, making it easier to provide feedback. It saves a lot of time.