Design

Why content comes first

4 min read
John Moore Williams
  •  Jan 13, 2015
Link copied to clipboard

If you’ve worked in web or product design, you’re familiar with the debate over what should come first: design or content. Here are some practical reasons why content should come first.

Now, I’m a content strategist, and yes, I believe that content—or at least, a concepting meeting with your content peeps—should always come first, but this isn’t a partisan stance. I don’t believe in the primacy of content just because that’s my trade, my area of expertise, or my passion.

I simply think content first is the right way to do things.Twitter Logo Here’s why.

Putting content first speeds production

Copy usually goes through several rounds of grilling, and each one typically means revisions. First, the designer has some input, either about specific wording, or the way the copy works—or rather, doesn’t work—with the design. Then it goes up the ladder, where more comments trickle down, leading to further iterations.

This isn’t hugely problematic, but it does slow things down, and can cause problems with versioning and record keeping. After all, every time someone asks for a revision to copy that’s already in a design, I have to update my copy document—and the designer has to update the source file, save out mocks, etc.

Plus, every step in this process increases the chance for miscommunication, crossed wires, and, in the worst-case scenario, the wrong copy getting published. In-context comments (like those InVision offers) can help, but all this back and forth can still slow the production process.

Now imagine the copy was all approved before you had to throw it into the mocks. Wouldn’t that be magical?

The right copy needs the right design

All the best creative—whether it’s a print ad, landing page, or workflow—represents a harmonious union of parts. The design and copy play off each other, each enriching the other till you can’t even consider them separately, but see them as parts of a greater whole.

Consider this classic Volkswagen ad. Every word, every design element—they all speak to the message the agency’s trying to drive home. They work together to tell you not just to buy a VW, but also to reconsider basic notions you’ve had drilled into your head all your life (“think big!” and “drive a fancy car” being the operative ideas here).

Words could achieve that alone, but there’d have to be a lot more than 2 of them to do it. Design alone might be able to achieve it, but I can’t think of how. (Granted, I’m not a designer.) Working together, copy and design play off each other to convey a complex concept almost instantaneously.

Okay, you’re thinking, but that’s print design—where words traditionally do a lot more work than in a user interface (UI). I hear you, but I also believe that words do a lot more work in UIs than you might think. It can be hard to find examples of this sort of harmonious balance, but I can think a few sites do it super well. Virgin Air, for example, makes space in their purchase flow for brief messages about your destination that create real delight for their users. And that’s the sort of thing that can have huge brand impact.

Squarespace’s much-lauded landing page for version 7 breaks what’s actually a whole lot of copy into several pages, each with a full-screen background, large, delicately set headline, and a paragraph or so of body copy. It’s beautiful (though the copy’s a little more feature-oriented than I’d like), but its greatest achievement is the way the design reflects the brand—the interface promises to be simple, beautiful, and focused. Just like this experience.

Content creates understanding—in research, and after launch

Let me explain through an experience I had at LinkedIn.

I was working on a high-stakes, long-term project that took several months, two rounds of extensive user testing, and numerous rounds of internal review. We were building a marketing site with ecommerce and content elements.

During user testing, we identified a problem with the lower half of the site’s homepage. Here, the design displayed a mosaic of images with links to various types of content—recent long-form articles, video tutorials, product walkthroughs, etc. The problem was that, at a glance, it wasn’t at all clear what these tiles were.

As a solution, I suggested creating a set of categories for these content types and displaying the category name in the same location on each tile. During one of my sweeps through the product, I went ahead and added sample labels—without asking design and without having fully defined the categories. Cheeky, I know. But in my defense, I had mentioned the idea and it seemed to fall on deaf ears.

In the next round of testing, the difference was dramatic. People suddenly grokked the lower half of the page at a glance—and loved that important real estate had been devoted to content.

Granted, this is a case of content swooping in to solve a design problem after the fact. But I can pretty much guarantee I would’ve proposed the exact same solution if they’d come to me first.

Design is communication

Think about it. Most design problems are communication problems. And most interfaces are designed to facilitate interaction between people.

A book designer works to decide how to wrap a ton of information into a tidy package. Designers at Facebook, Twitter, Airbnb, LinkedIn, and many more design to help people communicate more quickly and easily. Apple’s iPhone 6 landing page exists solely to let people know there’s a new iPhone and give them reasons to buy it.

Few things we do don’t involve communication at a vital, instrumental level.

Design is communication. And you can’t communicate if you don’t know what you want to say.Twitter Logo

So the next time you start a design, ask yourself what you’re trying to sayTwitter Logo and how you’re trying to say it. And make sure there’s a copywriter in on the conversation. (If you can. If you can’t, try these 10 copywriting tips for designers.)

Want more on this topic? Check out the thoughts of Luke Wroblewski, Jeffrey Zeldman, and Justin Jackson.

Collaborate in real time on a digital whiteboard