Design vs. Content: Collaboration Comes First


By Jim O'Neill

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?
Chicken and Egg

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.

Twitter Digg Delicious Stumbleupon Technorati Facebook Email
  • http://www.elevatecom.com Mark Baizen

    Great post Joe! You reference FreshBooks.com highlighting their “must-read” phrases in green for faster scanning. Do you find this to be a recommended practice from the UX perspective?

    • http://www.twitter.com/joebaz Joe Baz

      Thanks, Mark. But the credit actually goes to Jim. I accidentally forgot to change him to the author when I posted his article on his behalf! :-P

    • http://www.twitter.com/oneill_jim Jim O’Neill

      Mark: In general, we do recommend highlighting key phrases in some way, to aid readers in skimming the content (we set certain phrases in bold here in our blog for this purpose). Always in moderation, since too much highlighting defeats the purpose.

      To me, FreshBooks’s use of green highlights is tipping slightly toward the “obtrusive” end of the spectrum, but it works — skimming down the page, I thought, “Hmm, if I were trying to evaluate this service quickly, these phrases are exactly what I’d want to read.”

  • http://www.lofwebdesign.com Jeri Hastava

    Practical advice is so refreshing. Thank you! Regarding client homework, I would qualify #3 slightly from personal experience.

    Asking clients to evaluate “successful” websites can be a minefield if they don’t yet fully understand from a content/UX perspective what makes a website successful. It can be so subjective.

    I like the idea of “steering them in the right direction” right from the start by providing several examples of successful sites for them to “study,” like you did with FreshBooks.com.

    This could help avoid potentially having to begin the homework discussion by explaining why the websites they “admire” are not in fact – well – always admirable.

    I enjoyed your post, especially your attention to writing for the web. :-)

    • http://www.twitter.com/oneill_jim Jim O’Neill

      Jeri, thanks for your response. I agree that discussing the “success” of a website’s content or design is a subjective and tricky business, and having examples on hand helps a lot.

      We begin most projects with a questionnaire that includes “List a few websites that you like, and why.” Some clients come in with a competitor in mind that they really admire, but even for those who don’t, this provides a good starting point for the content discussion, and helps us to find other good examples relevant to the client’s goals.

      • http://www.lofwebdesign.com Jeri Hastava

        Good point. The content discussion does need to start somewhere, and I can see how asking the client to take the lead is not only diplomatic (I’m working on that), but educational as well. Thanks for responding.

  • http://davelawlor.com Dave Lawlor

    Even before the content and the design I think people need to really start looking at information architecture to structure the site. Knowing how everything is going to flow and how to move the visitor to find what he is searching for is paramount. A beautiful site with great content, that doesn’t have a good navigation/architecture is going to be painful for the user after it gets more than 10 pages in content.

    • http://cl.o.se thruflo

      Precisely: it’s important to distguish between different design stages and processes.

      IA, UI design and content modeling can evolve in parallel to inform both ‘screen / visual design’ and content development.

      ‘Hatching together’ starts earlier than content *or* design.

      • http://www.twitter.com/oneill_jim Jim O’Neill

        Dave and thruflo, you both make a great point: information architecture is an often-overlooked part of the design process that I didn’t really touch on in this article.

        The relationship of IA to content & visual design deserves its own post (or probably several). This article was inspired by some experiences on a few smaller sites, where “information architecture” as such was not a prominent component. Nevertheless, I agree that no matter the size of the site, every project benefits from taking IA considerations into account right at the outset — big questions like “Why does this site exist?” “What will people find here?” and “How will they find it?”

  • http://plainlanguage.com Cheryl Stephens

    There should always be an intermediary between client and designer or information architect.

    When you need written material, you should look to a professional writer. You do mention the new field of content strategy here. Remember there are technical writers and plain language consultants who have been producing Web contents for 20 years. And we are probably not as expensive or intrusive as content strategists.

    We also work with the client on determining what content needs to go on their site. We work with their subject experts on getting the facts right. We know how to write for the web.

    A colleague and I summarized our experiences in this in a book at http://www.lulu.com/product/file-download/website-usability-a-plain-language-toolbox/1317105?productTrackingContext=product_view/more_by_author/right/2

    I believe we should start working as teams and focus on what we each do best.

    • http://www.twitter.com/oneill_jim Jim O’Neill

      Cheryl, thanks for your comment. I couldn’t agree more that a professional writer and/or editor belongs on any website team. The objectivity and expertise that a specialist can bring to the task of crafting content is underestimated but very valuable.

      In fact, I wonder if hiring a writer might even be a harder sell to potential clients than hiring a content strategist, because of people’s tendency to think “Oh I can just do that myself.” Do you encounter this attitude a lot?

  • http://plainlanguage.com Cheryl Stephens

    Hiring a plain language writer or editor is always a hard sell. If the client hires a “plain language consultant”, they expect us to also do the testing for the content. We do that, but then they often expect usability testing from us as well.

  • Paula

    As a marketing and content person with a knack for technical aspects and design, plus a very visual learner/teacher/speaker, I’m particularly curious about thoughts on microcopy, which is 85% of what I do. I’m not talking about the concept of a website, but of a single page. Often times in projects with designers involved I’m just providing content for the messaging on a lead form, an auto responder, or a quick sell email.

    So, say an insurance company has a lead form, one column, set # of fields. Their goals are to build trust, explain what they’ll deliver in 3 short sentences, and get them to click continue. If that is communicated to a designer along with exactly what is being delivered on the next page….is that enough for a design? As someone who does freelance web design myself, I know exactly the types of questions I’d want answered if I were working with a client on a similar page, and those items would satisfy me. Thoughts?

    • http://www.twitter.com/oneill_jim Jim O’Neill

      Paula, this is a good question, and I’m going to have to answer with “it depends.”

      For a 1-page lead form, you clearly won’t need to create a whole set of content templates — though having a content strategy defined for the whole brand will help to give the content (and the design) consistency.

      However, I tend to think that such a targeted campaign page would benefit hugely from having the content defined in almost-final form up front. Even more so than a whole website, a 1-page lead form needs to be crafted to convey maximum impact and trust in a short time, and I would see that as a great opportunity to create a design that visually responds to the specific marketing language on the page, rather than a design that looks generic and formula-driven. So I’d say that it depends on how much time and effort the company wants to spend on the landing page. The basic layout can be designed with just the elements and goals that you outlined, but personally I would want to see the actual content in order to create a design that really hits home.

  • Pingback: UX Design vs. Web design - an Interview w/ Joe Baz | Above the Fold - User Experience Design

  • Pingback: Más de 200 artículos seleccionados en 2013 sobre UX - Uxable