A version of this article appears on Medium.

There’s an age-old debate between the content team and designers (or creatives) on which should come first—content or design. Most often content creation is one of the last phases, but before development, of the project lifecycle. The information architect (IA) or user experience (UX) designer decides the framework, creatives make killer designs, and the content team fits copy into the already agreed-upon parameters.

Using this process flow not only creates a disconnect between deliverables, but it leaves a lot up to client interpretation during review. The dilemma: content wants a say earlier in the process to have their work prioritized rather than remaining an afterthought. Why can’t we have our cake and eat it, too?

What is content’s purpose?

Content is the reason why you surf the web for hours and hours—to learn about anything imaginable. In order for content to effectively communicate value propositions and give you the information you’re seeking, content must be presented in an easily digestible manner. This isn’t just about the words themselves; it includes design for an overall enjoyable user experience. But without good content, there’s no reason to interact with any website, aside from ogling over design and fancy user interface elements.

Why content before design?

Every project begins with the strategy phase. This phase is all about collecting resources and information to set the project up for success. So adding content to the mix is the perfect fit. Here, the content strategist can determine what content should be kept, discarded, or repurposed through a content audit and decide on an appropriate voice and tone for the brand. A traffic analysis also helps determine the most important content to a website’s users and aids in the overall structure.

To clarify, when I say “content before design,” I don’t mean final, approved content; I mean realistic sample content. You can either create this content from scratch based on gaps in the content audit or revise copy from the current website or other marketing materials. As a result, UX gains a sense of how much content to account for in their wireframes, and designers have a clear understanding of the tone and style direction. Are you starting to understand why developing a content strategy before design is crucial?

Time to role-play for a second. Place yourself in a client presentation meeting. On the screen is a high-fidelity wireframe of the homepage. You think you’re wowing the client and they’re all-in. In truth, they can’t get past the placeholder copy (e.g. “This is a really, really long headline”) to visualize their homepage. Without context, the design is an empty shell. Using proto-content in its place allows for content and design to be evaluated together. So, my friends, let’s retire lorem ipsum… forever.

Let’s recap.

Beginning with content encourages the team to work together early on in the project. Not only can designers use realistic content, but clients can better visualize the final product. There is one caveat to my philosophy: the content team and designers need to collaborate on certain page elements, such as headlines, to establish character limit guidelines and direction. It’s a check and balance against what sounds good and what looks good.

[blockquote cite=”James Box and Ellen de Vries in Content Strategy: A Guide for UX Designers by GatherContent”]“Content can no longer be painted on or poured in. Instead, a piece of content is active and alive. It has a life-cycle that may have begun long before the design process has even started. In the past designers got away with a container-first approach. Responsive design has spurred a content-first mindset.”[/blockquote]

What about you?

Are you thinking about implementing or have you implemented content before design? Tell me your thoughts or challenges!

We’ve played around with a few content gathering tools: GatherContent, GoogleDocs, and the archaic Word doc method. What tools do you use to collect and organize content?

Content Before Design: The Fall of Lorem Ipsum

Sketch Wireframe Template