Which comes first: the design or the copy?

This chicken-or-egg situation is one every designer ends up in at some point.

Designer: Hey, I need to know what copy is going on this page so I know what to design for...

‍Copywriter: But I need to know what the design will look like so I know how much to write for each section...

It’s web design stalemate that moves forward one of two ways:

• The designer goes ahead and creates a page layout that looks visually balanced using Lorem Ipsum then the copywriter “fills it in” with the real stuff.
• The copywriter goes ahead and writes a doc of copy that the designer then has to design around.

In the former situation we usually end up with a design that looks nice, but isn’t at all optimised for communicating a point. Consideration was given to visual hierarchy, but not content hierarchy. It won’t be an effective marketing page, and it’s the epitome of simply “making things pretty”.

In the latter situation the copy is written in a way that reads well in a document, but may not have the most compelling information architecture because visual hierarchy wasn’t considered alongside the content.

So if both directions produce less-than-ideal results, which should come first?

My answer is neither design nor copy. It’s content.

Content is different to copy. Copy is the exact words that end up on the page, content is an outline of what points need to be communicated. And both the designer and the copywriter need this in order to create an effective marketing page.

A designer can take a content outline and start grouping information to form the user experience of the page; arranging content into a design wireframe to decide on the hierarchy that gives a visitor what they need to know in order to feel confident clicking the sign-up or ‘buy now’ button.

For a copywriter, the content outline acts as a brief. They know what they’ll be writing about and that no matter what words they choose to use; these are the points to be communicated. They can begin crafting sentences around certain points to figure out the best language to use while the designer is getting the visual wireframe in place, and then write the final copy based on the wireframe (or push back on the wireframe if they’ve figured out a certain point needs much more space to be explained).

Creating a content outline

So, who creates this important content outline then?

You might be lucky enough to work on a team with product marketers who are researching competitors and figuring out what features should be talked about on a page in order to convince someone to sign up. That research would then become the content outline.

Or maybe your copywriter is the one who usually does this research and instead of jumping straight into the copy, they could provide a content outline first that you can both discuss from an information architecture perspective.

Or maybe there is no one on your team whose job it is to make this content outline. In which case, you need to do it yourself.

This is the situation I was in for many years. I took on the competitor research, product knowledge and user insights myself to create content outlines for the marketing pages I was designing. And rather than feel disgruntled about the fact that I was having to do something other than moving pixels around, I embraced it. Because writing content outlines made me a better designer.

I have a better understanding of our target audience, our product, and the competitor landscape because of the time I spent researching for content docs. This knowledge fed in to design decisions I made across our whole marketing site and gave me invaluable context for everything I was creating. So even if in your company the research is handled by someone else, I strongly recommend you get involved and collaborate on it.

Content is often a collaboration, and as designers we shouldn’t expect to be handed everything we need to design an effective page on a platter. Sometimes we have to get our hands dirty and dig for it.

We can’t design effectively without content. So to do our jobs well, we need to make sure that we get the content before we put pen to paper or draw our first gray rectangle.

‍