Designing with real content (aka no more Lorem Ipsum)

Designing for digital services.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. You may recognise the “padding text” used by fab and groovy designers to illustrate how their design may look (it’s crap, ain’t it?)

Design should be a balance between form and function, and a key part of both those elements is the copy. Often, when the design is delivered the copywriter or client writes twice as much content, or not enough, and your lovely layout is ruined?

This is a familiar story, and extends beyond text to using glossy placeholder images. At the worst it destroys the design and the very best you can expect is jumbled mess of whitespace, copy and poorly placed images.

It’s easy with WordPress, too

There should be no excuse when producing prototype sites, WordPress is simple enough for the copywriter to add the new content directly into the framework. However, how often does that happen?

Typically, the design agency produce glorious run-outs in full colour, using a square aspect ratio, fully populated with dummy content – impressive looking but not a fair expectation to set, or even possible to deliver.

It might take days of careful design and object curation just to watch a client wipe out all the design elements and UX thinking with their real copy.

It would be a lot easier if we could use real content rather than “Lorem Ipsum” but that rarely happens. What you can do though, is agree a content strategy (you should have one of those already) upfront. As part of this there will be rules around how messages are communicated, length of reading blocks, accessibility on mobile etc.

We call this a content bible, and every piece of content should adhere to it. The bible will accommodate the various elements required on the site (we call them objects) and whilst open to interpretation, it’s a small step to the creation of wireframes.

Using wireframes also frees up the designer from stressing about colours, keylines, fonts and backgrounds. It becomes about the function of the object. It’s also a good stage to share the thinking with the stakeholders, without getting caught up in the world of personal preferences, colour-prejudice and device obsession (we’re obsessed with retina mobile devices at the moment).

Objects are easily translated onto responsive grids, thereby ticking the responsive box, even if your designer doesn’t understand responsive. In fact, you can force the designer to think in single-column terms (we call that mobile first).

By Agapito Cruz