Content-First vs. Design-First: Which is the Better Web Design Strategy?

In this post, we’ll look at the benefits of content-first web design and how it can positively impact your way of working and your digital products.

Think about the last movie or TV show you watched. Imagine what it would be like for the person who dresses the cast if the script hadn’t been written yet. Coming up with a wardrobe without knowing the characters or their storylines could lead to some very strange and even offputting results. The same goes for the set designer, the videographer and everyone else involved with the visuals.

That’s what it’s like when you design a website or app without having any content. Sure, you could come up with something attractive and eye-catching using some filler Lorem Ipsum and placeholder images.

But what are the chances that the content you receive perfectly fits with the design and style you’ve come up with? Or fits within the layout you’ve established?

In this post, I’m going to explain why a content-first design strategy is a must. I’ll explain what it entails, the benefits and drawbacks, as well as some tips for reshaping your process going forward.

What is Content-First?

Content-first is an approach to digital product development whereby the content is created before the design. While commonly interpreted to mean that the copy is written before the design is created, content is more than that.

Content includes elements like:

• Photos
• Videos
• Tables
• Buttons Forms
• Data visualizations
• Table of contents
• Social media feeds

Your content plays a crucial role in communicating to the user what the product is all about, what its value is, and what they can do next. If you took away all of the design around it, users would still understand what they were looking at and what they could do next. It wouldn’t look great, but they could still use the product.

The same cannot be said for a beautifully designed website without any content on it.

So why do we build digital products using a design-first approach then? There are probably a number of reasons why.

“We’ve always done it this way. Lorem Ipsum seems to work just fine.”

“It takes too long to wait for content to be created.”

“It’s easier to sort out the design with the client and then fill in the content at the end.”

Look back at the major obstacles you’ve dealt with when designing and developing products in the past. You might be surprised to find that it was the design-first approach that often caused scope creep, missed deadlines and dissatisfied clients.

The Downsides of Design-First

To understand why content-first is the ideal strategy for product development, let’s first examine the issues that can arise when you wait until the end to fill in the content:

Problem #1: You Receive Too Much Copy

When there’s no collaboration between the writer, content creator and designer, you run the risk of receiving too much content for the design you created. When this happens, you have to decide the best way to resolve this issue:

1. Force the copy into the given space, making it look overcrowded and not very well planned out.
2. Ask the writer to change or cut out some of the text, which compromises the integrity of the message for the sake of the visual design.
3. Spend time redoing the nearly finished design in order to make it work with the text.

None of these outcomes are ideal. Either you disrupt the design, dilute the messaging or lose time and money on revisions.

Problem #2: You Receive Too Little Copy

Your copywriter (or your client’s writer) might have decided that less is more when it comes to content. While your designs look absolutely beautiful, you’re now left having to decide what to do with all that empty and unused space.

You could go back to the writer and ask them to write more copy. You probably won’t get anything meaningful back though since they’ve already said all that’s needed to be said. It’ll be like those kids back in high school who filled their essays with “really, really, really” or tons of adjectives in order to hit a word count.

Another option is to discard the sections without content and work with the copy you’ve been given. This could end up looking just as awkward and unappealing as a UI with overcrowded content as it’ll feel like something’s missing.

The last option is to redesign the affected page or section so that the content and design are in harmony with one another. But can you afford to do those revisions? And how will your client or boss feel about you having to go back to the drawing board?

Problem #3: You Hadn’t Anticipated Some of the Content

Too much or too little copy isn’t the only problem. Let’s say you got your designs more or less hashed out. You finally receive the final content for the pages, only to realize you have more work ahead of you.

For instance, your writer might have decided to add a table to some of the pages. You hadn’t anticipated the need for any tables on this website, so now you need to come up with a custom table design that works with the rest of the site.

This won’t just impact the designing of the product and ensuring consistency between the pages or screens. It also means having to go in and update your style guide or design system, if you have one.

When you’ve already completed your designs and the client has seen and signed off on them, unexpected content can definitely throw a wrench in the works.

The Benefits of Content-First

As you can see from the downsides of a design-first strategy, a lot of problems arise when you try to fit content into a completed design (or even an in-progress design). While the amount of content can cause problems, you also have to worry about the misalignment of style and tone once you bring the two together.

With a content-first approach, you can avoid a lot of these issues. It’s like the film/TV example I gave above. When the script is written first, it’s easy for the visual artists and contributors to align their creative vision with the textual story being told. And it won’t take numerous iterations to fix it or get it right.

There are other reasons why a content-first strategy is beneficial. For example, websites will be better search-optimized when content is created first.

Because the design and content usually have to be manipulated to work with each other in a design-first approach, SEO takes a back seat. But content-first ensures that the copy is written for both the human experience and bot consumption, and that it won’t be deleted or modified after the fact.

It’s also easier to design mobile-first user experiences when the content is prioritized. The only catch is that your copywriter would need to be well-versed in mobile-first design so that they can craft content that fits perfectly on smartphones and can be repurposed for larger screens.

A Word of Caution About Content-First

Speaking of which, content-first isn’t always a perfect solution. It depends on how it’s implemented.

For starters, copywriters, content creators, designers and developers should not work separately from one another. In order for a content-first strategy to work, it needs to be highly collaborative.

You also need a copywriter who understands good design practices. This includes things like:

• Minimalism
• Consistency
• Organization
• Balance
• Hierarchy

They should also understand the basic components that make up webpages or app screens. If they don’t have a solid comprehension of the structure or components that can be used to fill that structure, they’re going to struggle to create the right content for it.

What a Content-First Design Process Looks Like

The truth is, content-first is a collaborative strategy. While the design might be built around the content, the designer has an important job to play throughout the entire content development process. And vice versa. Without close collaboration, neither content-first nor design-first strategies can work.

So let’s talk about what this content-first process should look like and how the different team members come together to get things done.

1. Research

This first phase goes how it would normally go with a design-first approach. You’ll perform market research and a competitive analysis to see what’s been done already. You’ll also spend time learning about your target user.

There are a couple of ways in which this differs with content-first though.

For starters, when you survey the competitive landscape, you’re not just looking at the styles of digital products they’ve developed, the keywords they’re ranking for, etc. You and your copywriter will need to pay close attention to their content:

• Which pages did they include in the site map?
• How are they connected?
• What is the main message of each page?
• What is the overall message of the site?
• Did they include graphics on their most important pages?
• What about other components?

Also, if you’re designing a website or app for a brand that currently has one, then your copywriter needs to perform a content audit.

Essentially, they’ll make a list based on the existing site map and information architecture, evaluate the efficacy of each page and review the user flows. In the next step, the two of you will figure out what sorts of modifications are needed in terms of deleting or adding pages, optimizing the user journey and rewriting the content.

2. Strategy & Site Map

In this stage, you and your writer will collaborate to develop a strategy for the website or app you’re building.

You’ll start by answering:

• What is the purpose of this website or app?
• What is the story that we want to tell?
• What actions do we want users to take?

Once this is sorted out, you and the writer will come up with a plan for your content. You’ll list out the essential pages, the primary message and purpose of each page, how the pages relate to one another and what role each will play in the users’ journey with your brand.

The site map is where you will document this structural plan for your product. In addition to keeping track of all the pages you need to create, the site map allows you to establish hierarchy and create connections between each page.

It would also be beneficial to generate user flows that give you and your writer a shared understanding of how users will move from one page or screen to another in your product.

3. Content Briefs

This is where the design process starts to majorly deviate from design-first.

In this phase, the copywriter will come up with content briefs that explain what needs to be covered on each page. Or, in the case of websites with similar pages (like ecommerce or magazines), they’ll create outlines for the main pages as well as guidelines for the similarly-structured pages.

The brief provides details like:

• Page name
• URL
• Number of words
• SEO metadata
• Target audience
• Goal
• Summary
• Headings and heading structure (e.g., H2, H3, H4)
• General notes about what needs to be covered
• Internal links

Other details may be provided related to imagery and other components to include on the page.

Ideally, these content briefs will be reviewed with the client. You want to ensure that your content plan aligns with their expectations and goals. If it doesn’t, now is the time to change course so you’re not stuck in an endless loop of revisions once the copy is written or, worse, the designs are done.

4. Wireframes and Templates

With the information architecture laid out and the content plans ready, you can now create your wireframes. This should be much easier than the process you’d go through with a design-first approach as you’ll have content briefs to guide you.

Now content briefs don’t say much about the design or structure of a webpage or app screen. However, what they do tell you is important details like what the headings are going to be and how many words will be on the page.

So you’ll have a general idea of:

• What sections are needed
• How they flow from one to another (like from an H2 to an H3)
• Where to place the big calls to action
• How long to make the page
• Special components to include

In addition to using content briefs to develop site maps, use the details provided about similar pages to create template wireframes. That way, you’re not having to create individual wireframes for every single page on a website with dozens or hundreds of pages.

Templates will keep things consistent and create a more unified experience for users as they peruse these areas of your site. They’ll also be really useful to your writer as they’ll establish rules for how to tackle each part of the page in terms of word counts, structures (i.e., paragraphs vs. bullet points), etc.

Before you wrap up this part of the process, review the wireframes and outlines with the writer. This will give them a chance to provide feedback or ask questions if something doesn’t make sense or seems problematic. And the two of you can work out those kinks before they start writing.

5. Writing

The copywriter now has all the information they need—along with your visual guides—to create the copy for each page.

Your copywriter may also be involved in image selection and creation. For example, I have a couple of clients that I’ve written copy for in the past. In addition to writing, I also send them screenshots or stock photos, or I provide recommendations on what sorts of photos, videos or animations are needed to complement what I’ve written. The designers don’t have to accept my suggestions, but it does make their job easier in some cases.

After the writing is proofread and finalized, the content should first be reviewed by you and then by the client.

Your input is important here as it ensures that you can work with the content provided. The last thing you want is for the client to read the writer’s copy, fall in love with it and then be disappointed when they find out that it didn’t work for the product you were designing.

6. Design, Development and Launch

This is where the process gets back on track. Only, instead of using Lorem Ipsum, you’ll have finalized and approved content to create designs for when developing your mockups, prototypes and finished product.

Note: Some designers and agencies will use a workaround at this stage if they’re getting impatient waiting for the content. Instead of using real content or Lorem Ipsum, they use what’s called proto-content.

Proto-content might be:

• Content pulled from the client’s current site or app
• Content copied from a competitor’s website
• A rough draft of content created by the writer during the brief stage

This is a risky move though. Really, any time you copy and paste content into a mockup or prototype, things can get a little hairy.

The wrong text might be copied over which can cause end user confusion and frustration. Duplicate text can be copied over, leading to the same poor user experience. Or old proto-content may be left in.

If that proto-content is from the client’s outdated website, it won’t be the end of the world. But it’ll certainly add friction to the user experience and some confusion as well.

If that proto-content comes from a competitor, that’ll be a major issue. It might not be detected by the search engines right away, but eventually your site or app will be flagged for plagiarism and copyright violation.

So what I’d recommend is this:

Wait for the new content. Then, after you’ve finished designing your mockups and/or prototypes, have your writer (or proofreader) go through and review your work. With the amount of time you’ll spend designing, it might be tough for you to catch copy-and-paste errors. Plus, it’ll give the writer a chance to do some last-minute optimizations once they see how well your design plays off of the content they’ve given you.

Wrap-up

Don’t wait until the end of your project to marry the content with your designs. I know there are concerns about waiting for the client or copywriter to deliver the content as well as general reluctance to change your process if it’s worked okay so far.

But think about how much more smoothly things would go if you didn’t have to force content to fit your designs or to redo your designs to work with the content. In addition, think about how much more effective your digital products will be.

With the messaging and story developed first, you can design an interface and experience that perfectly complements the core content. This will remove the friction that occurs when content and design are misaligned. It will also create a seamless experience that takes users’ minds off of the usability of the product so they can focus on the task at hand (i.e., information gathering and conversion).