What is Content First Design?

‘Content First Design’ is an approach that involves the use of content to define the layout and elements in a design, rather than the other way around. It’s quite common to see placeholder text and images used throughout the process, and real content only introduced at the very end. The problem here is that dummy content doesn’t capture the context of what designs will be used for, causing issues when the product is used in the wild.

In contrast, designing content-first helps us structure sites in a way that can better guide users, whilst helping them effectively achieve their goals. As Biz Sanford of Shopify’s content team, puts it:

are essential for helping users accomplish their tasks, and by thinking about them while you sketch, you’ll uncover problems early and be able to move faster later.”

‘Content First’ isn’t the only term that describes the use of writing in design either. As Dropbox UX Writer, John Saito highlights, it can also be known as ‘UX Writing’, ‘Product Writing’ or simply ‘Content Design’. He goes on to suggest that design and writing are becoming so close-knit, that the parallels between the 2 are easily noticeable. For example, the vocabulary a writer uses can easily cross over to the language of a designer:

The parallels between writing and design, adapted from John Saito.

No matter what you call content-first design though, it’s clear to see that words in your design are important — especially with the rise of conversational interfaces and voice controlled apps. Let’s now look at the different approaches you can take to design with content first:

No content? No problem.

When designing content-first, a good place to start is by bringing together all possible content that may go into your end product. However, it’s not always clear where this content may come from, especially in the early stages of a design process. Here are a couple of approaches to gathering this content:

1. Proto-content

One way is to use content that’s similar to what you may expect to be in your end product. This isn’t the exact content you’ll use, but close to it — it’s often referred to as ‘proto-content’. As highlighted by Content Strategist Rob Mills, the context proto-content provides is so valuable that it helps us make better informed design decisions, more accurate user journeys, and also improves functionality overall:

“Proto-content allows designs and functionality to be tested at a point where issues can be resolved and changes made, prior to launch of the site.”

If you’re wondering where to start with gathering proto-content, there are a few simple approaches. You could:

  • Reuse existing or draft content
  • Copy a competitor’s content
  • Produce your own sample content

Proto-content can also go beyond text to include any media that may appear in a UI. Here is a great resource that goes into more details of each approach:

2. Content Audits

Another way to generate proto-content (as suggested by UX and Service Designer, Linn Vizard) is to carry out a content audit. Collating a spreadsheet of existing (or a competitor’s) information through an audit builds up a more accurate picture to guide your prototypes and design decisions. After a content audit, you may end up with something like this:

Content audits uncover information such as:

  • Page titles
  • Content types
  • Subjects and Topics
  • Categories

With this information, relationships between terms can be formed, and new avenues for your design can be revealed that may not otherwise have been considered. This can also be seen as a type of proto-content, and is very useful to populate prototypes, as we’ll see with our file in the next section.

For more on content audits and how to conduct them, check out this article on UX Mastery by Donna Spencer:

Using Proto-content in Prototypes

Once you’ve collected proto-content, don’t wait to start using it. According to Sanford, you can begin using realistic content even as early as creating low fidelity mockups:

“By the time you’re moving into low fidelity mockups, you should be using detailed, realistic content for everything.”

With the various approaches to collecting proto-content though, it’s clear that the quality and quantity gathered can vary. This is fine, as different fidelities of content are useful with prototypes of different fidelities.

Starting with low fidelity content

For example, in smaller projects such as a single landing page, proto-content can be less diverse, and of a lower quality. It could simply be a descriptive outline off the top of your head, detailing what your landing page should achieve. This could be a quick script before you even start with wireframes, almost taking the form of a story. Fabricio Teixeira called such an outline a ‘storyframe’ in his article, ‘Storyframes before wireframes’, and it’s a good way to look at it in relation to guiding your users:

A combination of a writer’s story ‘outline’, and a designer’s ‘wireframe’, storyframes help you think of your interface in terms of a story that will guide your users to achieving a specific end goal. Here’s an example to demonstrate how a simple outline in a text document can influence the creation of a landing page:

The left side shows an outline for the journey Dropbox want to take their users on. The right is the final UI that Dropbox have designed, showing how the making of it can be shaped by the story on the left. The way the images and buttons placed on the UI aren’t random, but guided by content.

  • 📝 Sketching with words

Biz Sanford offers a similar approach when working with ‘static’ page types such as landing or sell pages. She describes it as ‘sketching with words’, and also promotes the use of simple descriptive content to define landing page layouts:

I wouldn’t be able to sketch the layout of a sell page for Shopify Payments if I didn’t know how many customer benefits I wanted to include. Should I have 3 boxes or 4? How much space will they take up? Do they need corresponding illustrations? I can’t answer these questions unless I use real content.

Essentially, we can see that it’s important to ensure content is thought through and prioritised before determining the layout of a UI, as doing so can have a large influence:

How content can define UI layouts, adapted from Biz Sanford.

In the wireframe to the right of the image above, the number and type of elements used in the UI are based on specific content. The result is that the upper section (below the title) gets displayed as a grid of 4 items rather than a row of 3 (as shown in the less accurate wireframe to the left). By clearly defining each item instead of estimating, design layouts can be chosen that better suit your content.

If we are to go beyond static landing pages though, more diverse proto-content, such as that from a content audit, is useful. For instance, where prototypes are made up of many UI components to accommodate different types of information, it can be tempting use dummy text and placeholder images as a substitute for real content. However in doing so, the context of our prototypes is lost, and layouts can become misguided.

In the next section we’ll look at importing higher quality proto-content to our prototypes, making them more effective for collecting feedback and directing our designs with content. Let’s get to that XD file:

Replacing Lorem Ipsum

XD is our tool of choice as it provides a flexible and fast way to import large amounts of content into prototypes, making it easy to include relevant information at every step of the way. After mapping fields from our proto-content to elements in a UI, we can use XD to quickly scale that content across our designs, maintaining a realistic context.

This not only helps prioritise information, but also reduces the use of dummy content and placeholder images, which is also recommended by Sanford:

“We never use lorem ipsum at any stage of the design process. We can’t know if we’re solving the right problem, can’t get proper feedback from our peers, and can’t test anything with users if there aren’t real words in our designs.”

Essentially, we can be less prone to problems like this:

Using placeholder content can cause issues replaced with real content.

A powerful part of XD that enables use to use real content at scale is the Repeat Grid feature — here’s a hands-on approach for how to take advantage of it to import proto-content:

Source link https://blog.prototypr.io/content-first-design-second-prototyping-with-words-and-adobe-xd-c4c07cac21ef?source=rss—-eb297ea1161a—4


Please enter your comment!
Please enter your name here