Content-First Design, is it Important?

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. This article looks at the importance of content-first design.

Why a content-first design 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. This approach is more efficient and produces 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:

Design-first
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. Taking a content-first approach could have easily prevented this. 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.

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

In conclusion

Being able to look at content as a whole allows us to make informed decisions about how flexible or rigid a design can be. While we read and understand content, we also examine how it is written and identify consistent elements. 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.