How to Use Text in Wireframes

Text content is a vital part of any product. When you're in the early stages of product development and don't have relevant texts yet, you can begin with text blocks — containers or squiggles. They can help you define the dimensions of text containers, decide on headlines, and represent the general idea of the content organization on a page. 

Every designer has used lorem ipsum at least once during their career. Dummy text is a combination of modified Latin words that work as placeholder text and is expected to be replaced by the actual copy. On the plus side, it can be useful in wireframes that are in the early stages of planning and brainstorming ideas.

On the flip side, dummy text doesn't provide enough detail and may result in multiple adjustments in the future.

Dummy text should be used only as long as necessary, and it's better to start using real text as soon as possible. For example, during user testing or a presentation to clients, wireframes with real content allow everyone to get a fuller picture, evaluate content in context, and review the look and feel of a future product. Plus, it results in more elaborate feedback.

Additionally, the Balsamiq tool allows you to see an actual character number if you have limited space for text blocks. That's how your copywriters and developers can see the limit and write and align content, respectively.

When designing for mobile and web, ensure your wireframes illustrate how the text would display responsively on various devices. There are a few things to consider, like appropriate font size for body text, line length, and height. When it comes to wireframing, the most important thing is making the text wrap and maintaining the hierarchy.

• Headlines: Use truncation and add an ellipsis (…), making sure users can still view the full title on hovering or seeing tooltips. There must be at least 4 characters of non-truncated content in a truncated string.
• Text blocks: Use truncation and the "Show more" button to indicate that people can view overflow content below the fold or on another page.^[1]

When a product or service is intended to go global, the localization process should take place. Ideally, localization involves more than translating a product and implies text adaptation to fit culture, tastes, and styles. The wireframing stage allows designers to foresee and address specific technical localization issues early in the process.

• Layout: If your product is aimed at countries with right-to-left languages, display it in wireframes. Otherwise, users who don't read in a traditional F or Z-shaped pattern would find your website less user-friendly.
• Space: Certain languages, like German or Russian, need more space than English.
• Different formats: It's not a secret that different countries and cultures have established rules of writing dates, currencies, phone numbers, and other data. For example, Americans use an MM-DD-YYYY date format, while Europeans stick to DD-MM-YYYY, and Chinese work with YYYY-MM-DD.

When you're working on how to fit your content nicely and escape text clashing or overflowing, think outside the box and consider edge cases. Simply put, edge cases are anything that can and probably will go wrong during product presentation, user testing, or further development stages.^[2]

• Error texts: Errors will happen inevitably, and you should indicate where a notification or field validation message will appear.
• Character numbers: Consider scenarios when text blocks are empty, have a small amount of text, or have too much text.
• Accessibility: Make sure your product is available to all users, and your wireframes include alt text for images, links, and buttons.