Add product copy to mockups

Just like in any industry, there are some things in the UX design community that aren’t always agreed upon! One of those debates revolves around the copy, or written text, that’s used in designs.

You’ve already learned that placeholder text, such as lorem ipsum, can be used as a filler in designs. However, some designers prefer to use real copy as they design, even in wireframes. Let’s explore how you can use both placeholder text and real copy in your own mockups.

Placeholder text

One of the most popular types of placeholder text is lorem ipsum. As you might remember, lorem ipsum has been used as placeholder text for over 500 years! As UX designers, we still use lorem ipsum today for a few very good reasons:

• Using placeholder text allows you to share designs with stakeholders early, in the beginning stages of development, before your designs are finished. This is especially important when you need to get feedback or gather alignment on the direction of a product or design, before you spend too much time developing the details.
• Placeholder text, like lorem ipsum, is great to use during the ideation phase and when creating your first wireframes, when you want to focus on the layout of designs, not the copy.
• Using placeholder text provides you with more time to develop copy. If you’re working with dedicated UX writers, or if you need to develop your own copy, coming up with the words to include in designs takes time. Using lorem ipsum allows you to continue to design while questions about the copy are being sorted.

These are pretty compelling reasons to use placeholder text in your designs! But there are some ways that using placeholder text can be disadvantageous for designers, too:

• Placeholder text might confuse stakeholders or even distract them from the design.
• If your design is sized and adjusted to fit placeholder text, changing that text in later versions of the design can affect the overall layout.

As a good rule of thumb: Placeholder text is often used in low-fidelity designs, like wireframes. If you need to generate placeholder text for your own designs, you can use online generators, like this Lorem Ipsum generator by Lipsum or this one from loremipsum.io.

Placeholder text can be a great place to start your designs, but what can real copy add to the design process?

Real copy

As you design, you’ll start to envision what the app will look like and what it will communicate to users. Some designers feel passionately that real copy should be used from the beginning of the design process to aid in this communication. Here are a few reasons why using real copy, instead of placeholder text, can be advantageous while you design:

• Using real copy from the start of the design process can lead to fewer adjustments to your designs later. For example, you won’t have to resize design elements to fit the real copy.
• Thinking about real copy early in the design process provides more time to get feedback on copy-related design choices. Your design and copy work together to form one user experience. Creating design elements and copy together, from the beginning, can make them more cohesive.

Using real copy in your designs seems like a great idea! But there are also some disadvantages that need to be accounted for, such as:

• Using real copy early in the design process doesn’t save you from copy edits later. As you’ve undoubtedly realized, UX design is a highly iterative process! You may change the copy in your designs just as many times as you change the designs themselves.
• Humans are drawn to words. Real copy in a prototype can distract stakeholders from commenting on design choices. If you email a low-fidelity prototype to your team with real copy included, you will likely get notes about the words you chose, instead of the visual design and functionality of the prototype, which is more important in that stage of developing the product.

As general guidance: Real copy is often used in high-fidelity designs, like mockups. So at this point in the design process, you’ll probably want to start adding real copy to your own app designs.

Placeholder text and real copy in action

Let’s check out a mockup of an app that shows the difference between placeholder text and real copy. These mockups are for a recipe page on a cooking app. The design on the left uses placeholder text, and the design on the right uses real copy. What do you notice?

In the design with placeholder text, on the left, you might notice yourself focusing more on the appearance of icons, the spacing between elements, or the colors that are used. This mockup provides users with a general idea of how content will appear within the design.

In the design with real copy, on the right, did you read the titles of the recipes that are listed? The advantage of using real text is that you have a better understanding of the information the design will include and how that information will be organized. But, you might be less focused on the design elements that are used.

Choose between placeholder text and real copy

You may have convinced yourself by now that both of these options are the right way to go. And that’s okay! This, like many areas of UX design, is something you get to decide on your own.

Another option? You might want to use a combination of placeholder text and real copy. In the recipe app example above, you might choose to label the icons in the navigation bar with real text, like favorites, explore, profile, and search. But you might also choose to describe recipes using lorem ipsum. This type of combination is pretty normal, so feel free to explore with your own designs.

Keep in mind that using placeholder text or real copy in your designs might depend on the product you’re designing, the preferences of your stakeholders or clients, and even feedback from your teammates. In some cases, it might be better to design using copy that has already been created, and in others, you may not worry about copy at all. The most important part of adding copy to your mockups is to be flexible and use what’s best for the product you’re designing.

Sources: Google UX Design Professional Certificate

Coursera | Create High-Fidelity Designs and Prototypes in Figma