How do you write copy that matches design?

1 Understand the design goals

Before you start writing, you need to understand the design goals of the project. What is the purpose of the design? Who is the target audience? What is the tone and style of the design? How does the design support the brand identity and the user journey? Ask the designer these questions and review the design brief, wireframes, mockups, and prototypes to get a clear picture of the design vision and strategy.

2 Use the same language

One of the easiest ways to match your copy with the design is to use the same language as the designer. This means using the same terms, labels, and categories that the designer uses in the navigation, buttons, icons, and headings. For example, if the designer uses "sign up" instead of "register", you should use "sign up" in your copy as well. This creates consistency and clarity for the user and avoids confusion and friction.

3 Adapt to the layout

Another way to match your copy with the design is to adapt to the layout of the design elements. This means adjusting the length, format, and structure of your copy to fit the space and shape of the design components. For example, if the design has a narrow column for the headline, you should write a short and snappy headline that fits in one line. If the design has a large image for the hero section, you should write a concise and compelling subhead that supports the image.

4 Follow the hierarchy

A third way to match your copy with the design is to follow the hierarchy of the design elements. This means prioritizing the most important and relevant information and placing it in the most prominent and visible positions. For example, if the design has a clear focal point for the main offer, you should write a strong and clear value proposition that captures the user's attention and interest. If the design has a secondary call to action, you should write a supportive and persuasive copy that encourages the user to take action.

5 Test and iterate

The final way to match your copy with the design is to test and iterate your copy based on the feedback from the designer and the user. This means checking your copy for readability, usability, and effectiveness and making changes as needed. For example, if the designer suggests that your copy is too long or too vague, you should shorten or sharpen your copy to make it more concise and specific. If the user reports that your copy is confusing or misleading, you should clarify or revise your copy to make it more accurate and helpful.

6 Here’s what else to consider

This is a space to share examples, stories, or insights that don’t fit into any of the previous sections. What else would you like to add?