Skip to main content

Pseudo content that makes sense

If you work in the design or web world, chances are you’re familiar with pseudo content. This is using dummy text to represent real content in a design, either to avoid distracting readers with the written content, or when that content hasn’t been written yet.

You’ve probably seen it before - the most famous example is the latin-based Lorem Ipsum text, but there are hundreds of variations and alternatives.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The standard Lorem Ipsum passage, used since the 1500s,

On several recent projects, I've found myself having to build sites from designs that are still using placeholder content, and more than once I've been handed 'finished' designs for complex web apps or e-commerce sites where the use of pseudo content makes elements of the design difficult or impossible to understand by anyone receiving them cold.

An example: I'd been brought onto an e-commerce project that was just entering development. The design for the product template included a label which contained only an icon and a few words of placeholder text.

It was only after talking to the designer and client that I discovered that their products actually came in quantities designed to last a specific length of time, and this label represented that duration. Behind the vaguely worded label, lurked another feature requirement!

Using real content on this element wouldn't have changed the fact that there was an undocumented requirement on the project, but it would certainly have brought it to my attention sooner.

So long, ipsum

When it comes to designing and building websites, then, I think that pseudo content hinders more than it helps. However, we've all had design reviews where the reader focuses in on a tiny turn of phrase in the copy, potentially derailing the entire process.

I started wondering if there was a way to solve both problems. A way to make clear to people working on the project what all the elements were for, while at the same time staying in the background during design reviews etc.

In an ideal world, we'd go into every project with the content all finalised, but in real life there are times where this isn't possible.

Sometimes deadlines mean a project has to be started before the content is fully written. However, designing and developing before the content has been thought through correct content can be a recipe for disaster.

In the worst instance of this that I've been involved with, this has resulted in senior management insisting a site be completely redesigned right before launch, because the content that was ultimately created didn't match the design that had been commissioned and signed off months earlier.

Drumroll please

The solution I hit on was surprisingly simple, and can be easily slotted in to existing scoping/planning phases of a project.

When wireframing templates and user journeys, take the time to flesh out in detail the purpose of every piece of content. Then instead of using latin text in the design and build, write a short sentence describing the purpose of the content and repeat that for the estimated length of the content.

It doesn't have to be perfect, or even well-written. It just has to describe what the content is intended to do, to make it easier for people working on the site to parse.

Here's an example using a fairly common pattern - a home page hero area. It's a large full-width header image, with content overlaid. In this case, the content is a title, which the client wants to use to reinforce the company tagline; a lede paragraph, which will introduce the company's build-your-own monthly consultation packages. The last element is a call to action button encouraging users to book a consultation.

Assuming the content isn't ready, here's how we might typically set this up.

Lorem ipsum Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio excepturi ab labore. Magnam assumenda tempore facilis, eligendi illum ullam. Lorem ipsum   →
Lorem ipsum
Lede paragraph
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Odio excepturi ab labore. Magnam assumenda tempore facilis, eligendi illum ullam.
Lorem ipsum

However, this is pretty vague. The designer keeps having to refer back to the scope document to remember the purpose of the elements, and anyone else seeing the design will need it explained to them. It's additional mental load we could do without.

Here's an alternative, where the content describes its own purpose:

Company tagline. Company tagline. Highlight build-your-own subscription packages. Highlight build-your-own subscription packages. Highlight build-your-own subscription packages. Book consultation   →
Company tagline. Company tagline.
Lede paragraph
Highlight build-your-own subscription packages. Highlight build-your-own subscription packages. Highlight build-your-own subscription packages.
Book consultation

Hopefully you'll agree that this version makes for a clearer, easier to parse design. It has other benefits too: it reduces the mental load for everyone working on the project; it removes the need to try and pressure the client into getting their content written sooner; and it also works pretty well as a guide for the copywriter who actually has to create the content. Not bad for a relatively small amount of work.

Of course, in an ideal world we'd always have the real content in place before ever starting to design. But in the messy, rushed, imperfect real world, this approach can go some way towards mitigating the problems of having to start a project before all the elements are in place.

If you enjoyed this, there's a number of things you can do:

For more of this kind of thing, subscribe to the RSS feed.

Send any comments or questions to [email protected], or use the form on the home page.

And if you're feeling particularly generous, please like, retweet or share this post on Twitter. It really helps me out.