Content First, Design Second - 3a Prototyping With Words and Adobe XD

Content First, Design Second: Prototyping with Words and Adobe XD https://blog.prototypr.io/content-first-design-second-prototyping-wi...
Images haven’t loaded yet. Please exit printing, wait for images to load, and try
Prototypr.io Follow to print again.
http://prototypr.io
Sep 19 · 12 min read
Content First, Design Second: Prototyping

with Words and Adobe XD
In order to create the most usable interfaces, content can’t be an

afterthought — words alone can de8ne the experience of an app or
website. Take this web page by Justin Jackson for example, it’s solely
words on a page:
1 de 22 03/10/18 10:34
With this site, Jackson shows that at it’s core, the web is essentially a
medium for us to share messages and stories. He challenges designers
to think about words 8rst when designing — anything on top of those
words (e.g. animation, interactivity) should help convey the story
you’re sharing:
“Instead of starting with a style guide or a

Photoshop mockup, start with words on a page.”
With that in mind, this article will look at how we can use words to
guide our design process. We’ll start by understanding what ‘content-
8rst’ design is, what content to start with (even if we don’t have any),
and how to keep words as the focus. We’ll be using Adobe XD to
prototype.
Tools used
Adobe XD has some unique features that enable us to easily

import large amounts of content into designs, and quickly
adjust layouts in response to content.
2 de 22 03/10/18 10:34
If you are unfamiliar with XD, check out our overview.
. . .
What is Content First Design?

‘Content First Design’ is an approach that involves the use of content to
de8ne 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 prototyping 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-,rst helps us structure sites in a way that

can better guide users, whilst helping them eNectively achieve their
goals. As Biz Sanford of Shopify’s content team, puts it:
“Words 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:
3 de 22 03/10/18 10:34
The parallels between writing and design, adapted from John Saito.
No matter what you call content-8rst 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 diNerent approaches you can take to design with content 8rst:
•
No content? No problem.
When designing content-8rst, a good place to start is by bringing
4 de 22 03/10/18 10:34
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:
Using Proto-content for a Better

User Experience | UX Booth
Content Lrst is all well and good, but
5 de 22 03/10/18 10:34
how do you get the content for a

design prototype? Author Rob Mills,
from…
www.uxbooth.com
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
6 de 22 03/10/18 10:34
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 XD 8le in
the next section.
For more on content audits and how to conduct them, check out this
article on UX Mastery by Donna Spencer:
How to Conduct A Content Audit

If you’re working on any kind of
redesign project involving a large
amount of content, such as that of a
website…
uxmastery.com
•
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 8delity mockups:
“By the time you’re moving into low Adelity

mockups, you should be using detailed, realistic
content for everything.”
7 de 22 03/10/18 10:34
With the various approaches to collecting proto-content though, it’s

clear that the quality and quantity gathered can vary. This is 8ne, as
diNerent 8delities of content are useful with prototypes of diNerent
8delities.
Starting with low Fdelity 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 oN 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:
Storyframes
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 speci8c end goal. Here’s an example to
demonstrate how a simple outline in a text document can inûence the
creation of a landing page:
8 de 22 03/10/18 10:34
9 de 22 03/10/18 10:34
How a story outline can lead to a landing page, adapted from Fabricio Teixeira.
The left side shows an outline for the journey Dropbox want to take
their users on. The right is the 8nal 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.
Storyframes before wireframes

What if you started your designs in
the text editor?
uxdesign.cc
• 📝 Sketching with words
Biz Sanford oNers 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
de8ne 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 bene,ts 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 inûence:
10 de 22 03/10/18 10:34
How content can deLne 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 speci8c 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 de8ning each item instead of estimating, design
layouts can be chosen that better suit your content.
Words and the design process

Greetings from a friendly content
strategist
ux.shopify.com
11 de 22 03/10/18 10:34
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 diNerent 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 eNective for collecting feedback
and directing our designs with content. Let’s get to that XD 8le:
Replacing Lorem Ipsum

Adobe XD is our tool of choice as it provides a êxible 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
8elds 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:
12 de 22 03/10/18 10:34
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:
. . .
Repeat Grid in XD enables us to duplicate similar elements just by

clicking and dragging, letting us see how layouts scale with content:
13 de 22 03/10/18 10:34
Duplicating content with Repeat Grid
We can then ôw our proto-content through each of the repeated

instances created. For example, if you have a collection of 20 titles,
each grid item can be quickly assigned a title. The same goes for
images, enabling you to add context to your wireframes with minimal
eNort:
Importing proto-content to XD’s Repeat Grid
It’s evident that the context provided by realistic content keeps us

better informed when designing, and can also lead to design changes.
In such cases, it’s also fast to make alterations to layouts using XD:
14 de 22 03/10/18 10:34
Changing the layouts with Repeat Grid
The bene8ts of working with content in XD are clear, but to take

advantage of them as shown above, proto-content 8rst needs to be
prepared for XD. Here’s how move content from your spreadsheet to
your prototype:
15 de 22 03/10/18 10:34
Oftentimes, proto-content such as content audit data is held in a

spreadsheet. However, when importing it into XD, the content needs to
be in the form of a text 8le with each piece of content on a diNerent
line. Going from the spreadsheet to XD is possible in 2 quick and easy
steps:
1. Open your spreadsheet and highlight a column of

information, such as article 'titles'.
2. Copy and paste the selected content into a text file. The
content will automatically be pasted onto separate lines,
which is perfect to import into XD.
Importing from spreadsheet to XD
16 de 22 03/10/18 10:34
Upon saving the text 8le, you can then drag it into your repeat grid and
populate every element as shown previously. Now our proto-content is
much more usable!
. . .
Alternative Content
One set of proto-content is not always enough. Another bene8t of using
XD is that there’s little overhead to experimenting with diNerent sets
content, which is necessary at times:
“You wouldn’t settle on one layout without exploring

a few alternatives, so make sure you try diDerent
text solutions before deciding which direction is
best.” ~ Google Ventures partner, John Zeratsky
Furthermore, in the case where you really don’t have any proto-
content, you can generate sample data formatted for XD using this
handy tool, repeatgrid.com. Anything that can provide context is better
than lorem ipsum.
repeatgrid.com
17 de 22 03/10/18 10:34
Designing content-8rst therefore helps prevent our designs from

breaking after they’ve shipped, as layout limitations imposed by
placeholder content and unnecessary UI elements can be avoided.
• Layout limitations consist of areas where our content doesn’t 8t

the design: maybe a title can only span 1 line; or descriptions
longer than 2 lines get truncated.
• Redundant UI elements also arise when the layout of a design is

devised before the content arrives. For instance, a design may
contain card elements with spacing for images and tags, when
these elements don’t actually exist in our content.
As we’ve seen in this section, both these problems can be greatly

reduced when prototyping with real content.
Try it yourself
Overall, designing content-8rst helps us understand what information
will actually go into a design, and in doing so, identify elements of
content that can be mapped to UI components. This ensures the
information most important to a user’s goals can be prioritised in our
layouts.
We saw this when using content to guide our low 8delity designs, and
then again when using proto-content to power our XD prototypes,
keeping content the guiding force of our designs as they scale. Going
forward though, it’s important to consider how content can aNect the
relationship between diNerent pages, and a site’s larger ôw including:
• • Site navigation
18 de 22 03/10/18 10:34
Button text
Con8rmation prompts
Error messages
A thorough analysis of content early on can help shape all touch points
across a product, making information more accessible in an end
product. For at the end of the day, the web is essentially a medium for
us to share and read each other’s stories and messages. Or as Dan Mall,
Creative Director at Superfriendly, says:
“As an industry, we sell websites like paintings.

Instead, we should be selling beautiful and easy
access to content, agnostic of device, screen size,
or context.”
Join us for more

If you’re interested in more on this topic, drop an email to hello [at]
prototypr.io. To get updates and be the ,rst to know about our latest
content, sign up below for the weekly newsletter👇
19 de 22 03/10/18 10:34
Words by Graeme | Illustrations by María ✏ ️ | Follow us for more
20 de 22 03/10/18 10:34
21 de 22 03/10/18 10:34
22 de 22 03/10/18 10:34

Content First, Design Second - 3a Prototyping With Words and Adobe XD

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Content First, Design Second - 3a Prototyping With Words and Adobe XD

Uploaded by

Copyright:

Available Formats

Content First, Design Second: Prototyping with Words and Adobe XD https://blog.prototypr.io/content-first-design-second-prototyping-wi...

Content First, Design Second: Prototyping

In order to create the most usable interfaces, content can’t be an

“Instead of starting with a style guide or a

Adobe XD has some unique features that enable us to easily

If you are unfamiliar with XD, check out our overview.

What is Content First Design?

In contrast, designing content-,rst helps us structure sites in a way that

“Proto-content allows designs and functionality to

If you’re wondering where to start with gathering proto-content, there

Reuse existing or draft content

Copy a competitor’s content

Produce your own sample content

Using Proto-content for a Better

how do you get the content for a

Content audits uncover information such as:

Subjects and Topics

With this information, relationships between terms can be formed, and

How to Conduct A Content Audit

“By the time you’re moving into low Adelity

With the various approaches to collecting proto-content though, it’s

Starting with low Fdelity content

A combination of a writer’s story ‘outline’, and a designer’s ‘wireframe’,

Storyframes before wireframes

• 📝 Sketching with words

Essentially, we can see that it’s important to ensure content is thought

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

Words and the design process

If we are to go beyond static landing pages though, more diverse proto-

In the next section we’ll look at importing higher quality proto-content

Replacing Lorem Ipsum

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

Repeat Grid in XD enables us to duplicate similar elements just by

Duplicating content with Repeat Grid

We can then ^ow our proto-content through each of the repeated

Importing proto-content to XD’s Repeat Grid

It’s evident that the context provided by realistic content keeps us

Changing the layouts with Repeat Grid

The bene8ts of working with content in XD are clear, but to take

Oftentimes, proto-content such as content audit data is held in a

1. Open your spreadsheet and highlight a column of

Importing from spreadsheet to XD

“You wouldn’t settle on one layout without exploring

Designing content-8rst therefore helps prevent our designs from

• Layout limitations consist of areas where our content doesn’t 8t

• Redundant UI elements also arise when the layout of a design is

As we’ve seen in this section, both these problems can be greatly

“As an industry, we sell websites like paintings.

Join us for more

Words by Graeme | Illustrations by María ✏ ️ | Follow us for more

You might also like