“When you design your interface templates after designing your content, you have a huge advantage. Content itself becomes the design material.”

So Mike Atherton and I wrote in Designing Connected Content (p.169). But what does it mean to use content as the design material?

Glad you asked! Let me explain.

Start with content

Imagine being a poster designer.* You have been asked to create a poster for a new movie. Would you go off and create a poster and come back with a big sheet of paper full of lorem ipsum copy and ask, "What do you think?"

Hell no! You'd have:

The movie name
Plot of the movie
Main actors
Main characters
Fine print

Your job would be to create a work of graphic design that included all the content put together in a way that enticed potential moviegoers to pay money to go to the cinema and watch the movie. Now pretend you're a web designer (maybe you don't have to). A colleague comes in and asks for a new website. Do you act like the poster designer and get all the content before talking about brand colors, logos, and page layout? If you do, congratulations! You're designing with content. But if you aren't or you are the person who asks for a website without providing the designer with content, read on.

Create containers for the content

Yes, websites and other digital products are ever evolving content delivery systems. But while you don't know what will be published in six months, you can anticipate and plan the structure of that content. Much like an architect or car design engineer starts with a model of the building or car, so web designers can start with a model of the web content.

In this model, you construct a representation of your content based on attributes found in the shape and structure of the subject domain. This allows you to produce the words and pictures that conform to the content types. Then you can create the interface representations that provide a usable way for people to use your content.

The content model is made up of content types, which are the containers for your content based on similar structure and patterns. They allow you to design and create the content resources first before knowing how they will be represented in an interface. A content resource is a specific example for a type of content. For example, a Porsche 911 is an example of a Vehicle content type.

When it's time for the interface design, you create display templates that correspond with the content resource you've already designed to meet user needs. You need three things to do this:

Attributes that need to be displayed (from the content model)
Content hierarchy based on user needs (see Priority Guides: A Content-First Alternative to Wireframes)
Sample content specimens

You end up with two containers, actually. One is for your interface - or as many interface containers as you need since most content is published on multiple channels across multiple devices these days. The other is the CMS, which is a repository for all the instances of the content types. Each interface calls back to the repository to get the same set of content. Every new interface can be designed around the content it contains. You will know instantly if it "works" for the most sensational instances as well as those with the least amount of detail.

Structure behind the scenes too

When you do modeling and content design ahead of interface design for screens, you can go directly to HTML. With the content in the CMS, you can create a basic HTML document for the CMS to populate with content. At this point, you can check in the browser that everything is connected and is being displayed as it should.

For a project in Central Park that might look like this:

<title>{Project: ProjectName}</title>
<h1>{Project: ProjectName}</h1>
<h2>{Project: ProjectCategory}</h2>
<p>{Project: CompletionDate}</p>
<p>{Project: CurrentPhase}</p>

That should render like this:

Rik Schennink talks more about how to do this in Content First, Design Last. I'm oversimplifying for our purposes. As a front-end engineer, Rik does a better job of it in his article.

This is ugly, yes. And not so usable for the people who visit your website. But it has its strengths. It is responsive by nature. And guess who loves it? Computers. Google search bots, Alexa and Siri and Bixby, and other robots who regularly crawl your site for good information.

Cascading style sheets (CSS) to the rescue! They establish visual information hierarchy, add visual flair, and make your content usable for your human visitors.

And now you have this.

Your movie poster! Clear information presented in a way that helps someone understand immediately what you are trying to express.

Presentation is completely separate from the content. As soon as the author updates the status to Complete and the completion date to May 2018 in the CMS, the display will change: the middle circle will be gray, the last circle will be green, the date that appears in the last circle changes, and the "Current Status" bar shifts to the right. All through the magic of CSS!

Display after content changes in the CMS fields.

You might do some atomic design or develop pattern libraries in your favorite visual design software so everyone knows what it will look like. But it will be more precise, need fewer iterations, and not need to change when you discover down the line that the completion date is not always a version of MM/DD/YYYY like you thought.

The graphic design of your resources further improves the legibility and comprehension of the content, while cementing your brand identity. Once again, there’s structure and consistency. CSS styles are associated with specific elements, such as headlines, quotations, and sidebars—all of which are defined through HTML.

Just say no to pretty boxes

Save the pretty boxes for your gift-giving occasions. When designing visual interfaces, start with the content and create a useable, delightful way for users to engage with your content. If the person who is commissioning your work doesn't give you content to start with, ask for it. Help them help you deliver something you are proud of.

This is just part of the Tanzen content-first web content strategy process. Get in touch if you want to get some coaching or consulting on how to make the switch.

Want to learn more about designing with content? Join me for the UXPA webinar, Using Content as Design Material, on August 16, 2018.

/*Thanks to Jared Spool for this comparison in his interview on the the Content Strategy Interviews Podcast.