Content precedes design. Design in the absence of content is not design, it's decoration.
— zeldman (@zeldman) May 5, 2008
Article
Why you need a content first design strategy
And how to get you to that first iteration you can design with
The first step in the design process doesn’t involve sketches or wireframes. It starts with a content plan:
- What is the goal of your website?
- Who is the audience?
- How will you communicate that message?
You can’t really get far into the design of a website until all these questions are answered and you already have much of that content thought out. Although it’s common to dismiss content until the last step, the best design and development teams will require it before they get started.
Here’s how to get a first iteration that you can design with.
Design … or decoration?
Design in the absence of content is not design; it is decoration.
Content provides context. It gives meaning to whatever message you are trying to convey and without this information you can’t design an interface that inspires users to act in some way.
The content problem goes way beyond web design. Sadly, it is an inherent problem with many small- to medium-sized businesses. They make a product or create a service and run to launch without any real plan to sell the value to unfamiliar people.
Do any of these common content problems sound familiar?
- You don’t have a clear description of your product or service or change how you describe it to every person you speak with
- You know your product or service so well that the communicated narrative sounds foreign to the target audience
- You think your offer is a good fit for everyone (and it might be), but lack segmented messages for different parts of the audience
When these problems exist, there’s a fallback so common it has a name — lorem ipsum. This common style of placeholder text implies an intention to fill content holes at a later date.
The best description of the placeholder text problem comes from Gather Content: “The problem with Lorem Ipsum is it conveniently fills the available space like an expanding gas. Unfortunately, it is inert, meaningless and lacks context, revealing very little about the relationship between the design and the content.”
Words and imagery matter a great deal. Without them, you might get a design that’s pretty, but completely nonfunctional. It won’t match the tone or vibe that’s important to you.
The right combination of words can drastically increase the likelihood that random, cold visitors will give you something, from an email address to money to their time. That’s what makes quality content so important, and why it should be the driver of a website design. In fact, just making simple changes to the content can increase your page conversions dramatically.
JustUno conducted a test with wording on a call to action, changing a handful of words. The result? “Just a few words changed resulted in a 158 percent increase in the free account signups.”
What is content?
So what is content, anyway? Sometimes that word gets tossed around a lot without much explanation.
And the answer is that it’s a little bit of everything, starting with the words.
Words invoke emotion, and prior to design, the creative team will experience it. The emotion they feel when reading your copy or looking at images or thinking about your brand will translate to the design. That kind of connection just is not possible with placeholder text.
Content isn’t just limited to the written word, but media as well.
Placeholder images are almost as notoriously deceiving as the words around them. And the worst part is that they will draw user attention and detract from the intended message. Actual images, videos and illustrations are a vital part of the mood board the design team will use to create the website design.
Visual elements need to have the right context of words around them. When you design independently of these realities, the final product almost always feels disconnected when finally plugged in with content.
Brainstorm before design
The trick to making this work – and yes, we know you are time-strapped – is to develop starter content that could be usable in a live format and is good enough to design with. This content is usually a first iteration of what might be many evolutions of copy and imagery.
Here are a few of brainstorming exercises that you can use to get started.
- Write a one sentence headline that encapsulates what you do. Remove ambiguity and clever language and strip this down to the most simple form. (You know you’re onto something when you think it lacks sophistication.) Remember, this is for customers, not your peers or colleagues. The copy needs to be informative; it does not have to win awards.
- Outline three to five ways that you solve a problem better than anyone else. Think about it from the customer’s point of view. Describe the problem and solution in detail.
- Write out three to five bullet points that describe your headline in better detail.
- Remember your website content is about THEM, not YOU. The content should reflect that. A great way for getting great content for you and the customer is to showcase testimonials from clients that say things you’d want to say about yourself.
- Make a list of every award, accolade or professional accreditation that you’ve ever received; track down a high resolution image (photo or logo or badge) for each and make sure to include it in the design plan.
Gather all this stuff up and provide it to the design team. Talk it out with them and you have enough fodder for a homepage. From there the design team can build out a style guide, wireframes and some basic components so you can start to see the shape of the design as it would look to users.
It’s an evolutionary process
You might not come up with every bit of content that you’ll need in those early brainstorming sessions, and that’s OK. Content can shift and evolve as the website is developed. (That’s true of almost any good idea.)
Using a content-first design strategy will also help you see potential holes in your plan and figure out ways to overcome issues and obstacles before the design gets to users. It can also help you see places to improve on content – color combinations that don’t work, headlines that need to be refined or images that need to be rethought.
Be open to the process and your website will be better for it.
Conclusion
Using content in the design from the beginning will allow you to see the design in a way that wouldn’t otherwise be possible. Rather than imagining how big (or small) something might be on the screen, you’ll be able to see it. You’ll get to veto a font from the beginning if it just doesn’t look right with your brand name or words in it without holding up the project. (This happens more frequently than you might imagine.)