Add Product Copy to Mockups

There are two ways to texts to your design, lorem ipsum or real copy. Lorem ipsum is a placeholder text that has no meaning, while a real copy is a real content that is close to the final design. There is no clear cut on when to use the placeholder text or the real copy. It all depends on your design work and so let’s explore how you can use both of them in your mockups.

https://loremipsum.io/

Placeholder text

You might have heard of lorem ipsum since it is one of the post popular placeholder text. It has been around for over 500 years and we still use it today for the following reasons:

  • It allows designers to share designs with stakeholders early and get feedback or gather alignment on the direction of a product or design, before you spend too much time developing the details.
  • It 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.
  • It gives you 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 design takes time. Using lorem ipsum allows you to continue to design while questions about the copy are being sorted.

Despite its compelling reasons to use lorem ipsum, there are some disadvantages 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.

Placeholde text is often used in low-fidelity designs, like wireframes. You can use online generators like Lorem Ipsum by Lipsum or this one from loremipsum.io.

Real copy

Some designers opt to use the real copy from the beginning of the design process to aid the communication. Here are a few reasons why using real copy, instead of placeholder text, can be advantageous while you design:

  • Fewer adjustments to your designs later with real copy. For instance, there is no need 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 design also has its own downside too such as:

  • Using real copy early in the design process doesn’t save you from copy edits later. 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. With real copy, your team will likely to give you feedback on wording rather than the visual design and functionality of the prototype, which is more important in the that stage of developing the product.

Real copy is often used in high-fidelity designs like mockups. So you might need to start adding real copy to own app designs once you are in the mockups phase.

Placeholder vs real copy in action

Let’s see the difference between between placeholder and real copy in one my app design. What do you notice? Which one is it that you are likely to comment on words than visual elements?

Design with placehold text on the left gives you the ideas of how visual elements work together. In this case, texts doesn’t draw much of your attention. It is just a representation on how content will appear within the design itself.

Did you read the text for the design on the right? Design with real copy give 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

Well, there is no ground rule on which one to use in your design process. You can also choose to use both if it is neccessary for your design. The 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 is to be flexible and use what’s best for your design.

Good Luck!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s