Written by Jerry Cao

We’ve heard time and again that content is king, and for good reason. Placeholder text will only get you so far. Lorem copy is fine for low-fidelity wireframes and prototypes, but later on you’ll be designing blindly if you don’t know exactly what sits at the core of your design.

In this post, we’ll explain why you should design content first.

As we pointed out in the free e-book Web UI Design for the Human Eye, content is the foundation of all interactions. Words are especially important because they’re the only means of communication between you and your user.

If you rely too much on Lorem Ipsum, you might end up having a nonsensical conversation with your users. Content forms the building blocks of your design, not the decoration added afterward.

It’s Plain Good for SEO

Let’s get the hard stuff out of the way first — SEO.  As a designer, there’s a few things you should be aware of when it comes to search. For instance, Google rolled out the Panda algorithm update in 2011 to weed out sites with poor content.

Screen Shot 2015-06-03 at 7.14.42 PM

Photo credit: Google

Panda penalizes spammy and low-quality sites. That helped reduce the amount of sites using black hat SEO practices.

On the flip side, Google has another algorithm to reward sites with high-quality content. Known as the Quality Update, or Quality Algo, boosts sites with great content  in the search rankings.

So content is as important as ever – if not much more so – for good business.

Don’t Dress Your King Without Knowing His Size

However, content is something that’s also often disregarded by designers and managed as something of an afterthought. Lorem Ipsum is used as a placeholder during the design process with the real content added at the end.

As Kyle Fiedler points out in Smashing Magazine:

“By adding Lorem Ipsum to the design you are essentially dressing your king before you know his size.”

business-suit-690048_1280

Kyle says “Lorem Ipsum has distracted clients from design mock-ups for decades” and this has led to confusion between the designer, the client and the copywriter. As he correctly points out, Lorem Ipsum sometimes even ends up on live sites without anyone noticing (aside from the ever-vigilant user, of course).

Dummy Text Doesn’t Equal Context

Lorem Ipsum is a chicken and the egg problem. A designer won’t know the context of what they’re designing without the content — until way late in the process. If you’re working on a redesign, and there’s existing content, use that instead of dummy text.

Screen Shot 2015-06-03 at 7.16.50 PM
Photo credit: Bacon Ipsum

The design and copywriting process are similar. For example, a brand will often have an editorial style guide, a front-end style guide, and creative processes driven by the samecustomer personas. Ideally, designers, writers and marketers should work alongside each other on the copy. Because, as Google Ventures John Zeratsky points out, writing is very much part of the design process.

Now it’s doesn’t always work out this way. But there’s a few ways around this, asGatherContent suggests:

 

  • Write content yourself. Get as much information from stakeholders so you can dummy up copy. Don’t worry since a writer can punch it up later.
  • Design with existing content. If there’s old copy, as we said above, use it. The copy may not match 1:1 with the final copy, but it’s a great start.
  • Use competitor copy. If you must, and you have no other alternative, use the copy from a competitor. At the very least, it’ll give you some idea of what copy to expect. Be careful: replace the copy as soon as you can because you wouldn’t want to go live with competitor copy — you’ll get dinged for plagiarism.

 

Another reason not to use Lorem Ipsum is that a designer can insert the wrong amount of text. or example, she  uses two content blocks with Lorem Ipsum for the front page. It’s later discovered that the site is only going to have a title and subheader in that same space.

The design is then completely out of whack. And the designer ends up having to juggle things around at the last minute. The result? An imperfect design.

Advocating For a Content First Site

But what happens if the client won’t or can’t supply the copy upfront? You could write the copy yourself, as we suggest above, or even a service like Not Lorem Ipsum which keeps a stock of downloadable copy for various industries for you to use as a placeholder instead.

It’s worth explaining to the client and stakeholders that you need some copy in order to come up with a fantastic design. The copy doesn’t have to be the final draft. It can be rough and then cleaned up at the end when you’ve carried out the majority of the design work.

Photo credit: Barrel NY

This is especially important for responsive design sites. Yes, you can use media queries to serve only the content that you want, but what about those headlines that take up an entire mobile screen? Or pages that are far too long while others are too short?

Create a Content Inventory

First, make a simple list of all of the pages that the site will have and what content will appear on each page. Include a description of each content element and the average length for that piece  of content. You can share this with the stakeholders so they get a better understanding of why it’s important for you to have content during the design process.

We’ve found this free template by Maadmob to be quite helpful.

Screen Shot 2015-06-03 at 8.14.56 PM

Photo credit: Maadmob

Consider also providing constraints for the copywriter, such as:

  • Title length – the optimum is six words
  • Subheader – should be as short and snappy as possible
  • Body/page text – many people stick 300 words per page, but this will depend on the site and preferences of the client
  • Blog posts – these are going to vary in length, but you’re not designing for each and every page but rather a template that is suitable for all. Make sure that the sidebars don’t encroach when on smaller devices.
  • CTAs – consider the text to get users to click the CTA. Again these  should be kept short

If you do this, then you will give the copywriter a framework to work with and you can at least design with the content length in mind.

For existing sites, perform a full content audit to gain insight into the kind of content currently produced by the site.

Also bear in mind:

  • How popular that content has been with site visitors
  • Where the content is feeding from (does the site use a CMS, is it user-generated)
  • What content currently exists and what will be dropped (e.g. will the blog be maintained, is there a news section that can be discarded)

This should give you further insight into how site visitors interact with the content so that you can adjust the design accordingly.

Gather Content suggests this in the best way to go about creating a content-first approach and point out that:

“A good UX Designer reflects on these content insights and folds that thinking into their work.”

Collaboration is Key to Success

Collaboration on design projects is not just desirable, it’s essential. UX designers need to know what content is going to be on the site in order to create a design that is informed by it.

To do this, list all of the content assets from an existing site or for a new project based on other designs. Prioritize the most important elements in another list and lay them out in your early design mock-ups, sketches or wireframes. This positions the content early on as the most important aspect of the site. You can then work around it, rather than shoehorning it in later on.

If you approach all of your designs this way, then you should find that not only does it make the process easier for you, but it will also allow the content to do what it should – shine through as the central and most important thing on the site.

To explore more techniques of great UI designers, check out our free e-book Web UI Design for the Human Eye. The book teaches techniques spanning UX design, visual design, and interaction design with examples from 33 companies including Tumblr, Etsy, Bose, Google and others.