For product designers, building a visual design system is one of our most important and valuable activities.
But in my experience, something’s usually missing—the content. And I’ve found that visual design systems eventually end up falling apart if the content (writing) is bad.
That's because visual design, interactions, and UI writing cannot be separated. Each one informs the other.
Not only that, but in my current full-time job as a senior designer at a software company, creating and including content in my design systems has had the following benefits:
So how do you build a content design system? There are five overarching steps.
Start high-level by setting clear objectives.
Who is your user? What would appeal to them? What are your business objectives? What's your company's differentiation? What kind of response do you want your content to generate? The answers to these questions will inform your goals.
I try to base these answers and decisions on user research and stakeholder interviews so that I know it’s coming from real data instead of something I made up.
InVision says design principles are “a set of values that act as a compass for your product. They’re an agreed upon truth: the guideposts that keep your entire team on the same path as you move through the design process.”
Write foundational principles for how content will be created and maintained in your system. Look at GOV.UK’s website for an example.
Voice is the personality of your company (the character attributes of the brand).
Tone is the attitude (mood) of the writing. This may change based on the context. For example, your tone will be different in an error message than it would be during onboarding.
Voice and tone are unavoidable—they will always be present in a piece of writing. So it’s best to control them by making conscious, predetermined decisions about what they will look like for your content system.
For example, one of our goals at my full time job is to position ourselves as a more “friendly” option in our industry, so we focus on using natural language in our UI copy.
Writing is technical craft. So it’s important to adhere to rules.
Think about things like:
My company makes software for commercial real estate, which has a lot of variance in terminology—you can use different words to describe the same thing. So we have determined which specific terms we are going to use, and consciously try to stick to those terms across the whole app to create a more consistent experience.
These are the building blocks of your system—the place where the actual writing occurs.
Important places to get it right include:
For each of these building blocks, it’s good to include a main description and variations, do’s and don’ts, code snippets, accessibility notes, a list of related components, and additional resources.
Instead of a folder full of documentation, it's best to integrate these components directly into your design tool. Then you can use real copy instead of lorem ipsum in your mockups, and the system itself is more likely to stay up to date.
The video below shows you how to set up a content design system using Ditto and the Figma plugin:
Try building your own content design system using the above steps. Don’t worry about doing it all at once—just take it one small piece at a time. Let me know how it goes. I’m sure you’ll see the benefits in your own designs!
We want to put a spotlight on the insights and perspectives of members of the Ditto community. You can write about anything (from research and tips on organizing content to key career learnings and how you've improved your product's copy), and you'll be able to reach an audience of product-oriented Ditto users from over 5000+ teams.
If you're interested in writing for our blog, just send an email to founders@dittowords.com. 💌
