Design vs. Content: Collaboration Comes First

It seems that in nearly every web project, a variation on the following chicken-or-the-egg discussion occurs:

Designer: “I can’t design the site until I see the content.”

Client: “I can’t write the content until I know how it will look, and how much of it I should have.”

This debate has raged on for years, with many good articles weighing in on the issue.  Boiling it down, there are two main questions to address:

1. Is either side right?
2. More importantly, how do we bridge this impasse?

Illustration by Jim O’Neill

Chickens or Eggs?

Since I am a designer, it’s no surprise that I usually take the “content first” side.  My reasoning: How can I give visual form to a message, if I hardly know what the message says?  Sure, I can start by using a client’s brand identity and attributes to convey the appropriate visual character. But the content is the reason that the site exists; it needs to kick ass, grab someone’s attention, and persuade them to take some action, all within a span of seconds.  Those words and sentences need to be written well, and they need the design to back them up – not the other way around.

An exception to my usual approach occurs in UX design for applications.  Often, the content in those scenarios is actually microcopy, tiny bits of content whose job is to gently allay a user’s fears or uncertainties about the task they are performing.  Microcopy is extremely contextual, and therefore is designed alongside the visual layout, not before it.

Overall, Web professionals in many realms have sided in favor of content preceding design.  However, as Joanna Pineda rightly points out on Matrix Group’s blog, content generation takes a long time, and it’s just not realistic to insist that all the content be written before the design phase begins.  Which brings us to our second question:  How can we help website owners to start writing good content before they ever see a design mockup?

Hatching Good Content

To be honest, the best answer starts with “Hire a content strategist.”  This is someone who can expertly guide the process of determining not just what to say, but through which channels to say it, and how it will be managed.  (Check out our interview with content strategist Margot Bloomstein to learn more.)  But hiring such an expert is not always in the cards, which means that the UX design team needs to provide a content strategy framework to serve as a starting point.  Here are my favorite 3 tools in that framework:

1. A simple, one-page set of guidelines on How to Write for the Web. Writing for the Web is hard, and it has its own unique requirements.  It’s amazing how much good a brief set of guidelines can do. Take a look at Jakob Neilsen’s section on Writing for the Web on UseIt.com for some useful starting points.  We like to include certain tried-and-true tips such as:

• Use inverted-pyramid paragraph structure (front-load the crucial information)
• Ensure that your headings and subheadings are relevant and search-friendly
• Make information specific and geared toward helping the reader complete a task.

2. A set of content templates (even rudimentary ones). Content templates are fill-in-the-blank documents meant to provide a consistent structural framework for composing content pages. Erin Kissane’s article “Content Templates to the Rescue” on A List Apart is a great explanation of why they’re useful.  Each template answers the question “How should I structure the content?” for a certain type of page.

For example, a template for pages in a section called Our Services might contain a space for “Intro paragraph,” with a note such as: “2-3 sentences; states what we provide with this service and who we provide it for.” It might then include spaces for “Supporting paragraph” and “Feature list” with similar notes. Even suggestions about formatting can be useful here, such as “Intro paragraph will be set in larger type than the content that follows.”

Content templates are not meant to blindly shoehorn all the content into a single, rigid mold.  Ideally, basic templates will reflect some general best practices, and will spark discussion between designers and clients early on about how much content should be on a page, how it should be laid out, and how that layout might affect the words themselves.  The templates can then evolve to suit the project’s specific needs.

3. A homework assignment for the client: “Look at successful websites that you admire, and learn from how they do it.”  This time-honored approach works as well for writing good content as it does for making good design. Looking at great websites is inspiring.  More than that, it can yield 2 practical benefits:

• Expanded knowledge of the different formats and layouts available – different ways to approach a product tour, a Contact page, etc.
• Insight about what makes a particular piece of writing succeed.

To look at one example: the subheading on the FreshBooks.com homepage reads “The fastest way to track time, organize expenses and invoice your clients.” I’d bet that a team of people agonized over this sentence. It works because the word “fastest” zeroes in on the number one pain point for their customers: Invoicing takes up too much time. This focus permeates the rest of the site’s content, and then works its way into the design: for faster scanning, the must-read phrases throughout the text are highlighted in green.

Both in One Basket

Many people have answered the Which Comes First question with “a little bit of both.” This sounds like a cop-out, but it is true in spirit. While at least some content ought to come before anyone makes the design, it should come after the whole project team discusses the upcoming design, specifically the relationship that the words and the visuals have to one another. This discussion must be baked into the project schedule as early as possible, with enough time to build appropriate content templates and learn from research about other sites. That way, even if the design phase proceeds while the content is still under construction, the content will not be an afterthought – it will be informing the design as it must, yielding a far more powerful result.

Please leave a comment with your opinion about this debate, and any useful ways you’ve found to solve the perennial chicken/egg dilemma.