Why Content Should Come Before Design

Writing Content

New app on the horizon? Planning a new website? Refreshing your company literature? It’s understandable to be excited by the prospect of seeing design concepts proposed by your designer. As a result, something equally as important is often overlooked… Content. Were not just talking about copy. Content covers an array of media including copy, graphics, videos, data, calls to action and even audio.

Why a content-first approach?

Design-first or content-first? A debate that’s raged on since before the existence of chickens…or eggs? Most designers prefer a content-first approach and for good reason. Fundamentally, design is a vessel used to deliver content in a logical structure to guide users towards a point of action, usually in relation to marketing or business goals. Without content, design is a leap in the dark.

If we were to design without content, we may not know the key message you’re trying to communicate or even where to encourage interaction. Beginning the design process armed with content inspires us to create a visual hierarchy that directs users to the key message or call to action.

Content-first streamlines the design process

Don’t feel discouraged if a designer asks for content first. It’s a more efficient approach in the long run and yields better results. In the past, we’ve been guilty of agreeing to begin a design project without content. We often see requests such as…

“Can you use placeholder to create the design first and we’ll provide the content after we’ve seen the concept?”

This design-first approach can lead to a many issues. Naturally, as designers we would choose placeholder content that complements the design to show the concept in its best light. This, however is not representative of real content. Lets use the ‘Meet the Team’ example to highlight the issues faced when taking a design-first approach. If we started to design without content, here’s how it might look:

How a ‘Meet the Team’ section might look following the design-first approach.

Nice! Now lets throw some real content in there. Ah, all of a sudden the design doesn’t work so good. The job titles are different lengths and the word counts aren’t consistent, subsequently, the columns lengths are oddly uneven.

Design-first - Adding Content
How the design-first approach might look after inserting real content.

We’re now left with 2 options. Stick with it knowing that the design isn’t as effective as it could be or start over again — which would essentially be a content-first approach as we now have real content.

We wouldn’t want to be in either of these positions. It could have easily been avoided by taking a content-first approach. If we had, we may have placed the entries below one another. This would resolve any column length issues and allows adequate space for longer job titles.

How a ‘Meet the Team’ section might look following the content-first approach

Being able to look at content as a whole allows us to make informed decisions about how flexible or rigid a design can be. Not only do we read and understand content, we take a step back to analyse how it’s written and identify consistencies. We can then strategically position content in the design.

In the Meet the Team example, our real content didn’t have consistent word counts per entry meaning a column layout wasn’t a good choice. However, if the word counts were consistent, a column layout may have been more appropriate. The only way we can know this for sure is by approaching the design with content first.