Today, we’re talking about a time- and cost-saving trick I learned while working in-house. It’s one we use when building websites for our clients.
Why do we experience blank page paralysis? Partially, it’s because we have good taste; we know what good copy looks like, and we know our measly first drafts usually aren’t good copy.
So in part, blank page paralysis is our brains remembering how unpleasant it is to work through our ugly, awkward, no-good first drafts.
When we see the blank page, we remember feeling dumb, and frustrated, and our brains tell us, “No, don’t do this again, please, I beg you.”
The fear of the experience is worse than the experience itself. (It’s the same fear old people feel when the printer isn’t working.)
But work needs to be done. Copy won’t write itself (despite AI copywriting startup claims). And so we get to work.
Templates and frameworks help quite a bit. Colin Theriot built his Cult of Copy on solutions like his “FIDIL” (“F– It, Do It Live”) outlines that turn copywriting into fill-in-the-blanks activities. With templates, blank page paralysis goes away.
Once we have a draft, it’s just a matter of editing. The work shifts from “oh no I’m apprehensive of this unpleasant thing I’m doing” to “welp time to grind away and get this thing done.”
What if you could do the same thing with laying out your copy into design?
Let’s talk about design systems.
What Is a Design System?
A design system is a magical set of building blocks that lets you move your designed copy from virtual blank page to first draft. You’ll often see design systems being used by enterprise teams where marketing/design/development need to work together.
A design system is a set of user interface (UI) components like buttons, text, boxes, etc., that you use to build digital experiences. It’s like a pre-styled starter kit you can use to quickly create and deploy new landing pages.
But you don’t need to be an enterprise team to benefit from a design system. Using one would allow even solo copywriters to:
- Quickly create more-than-good-enough versions of new offer pages
- Save money by making page edits (like homepage copy changes) yourself instead of engaging a designer/dev
- Move past the “blank page paralysis” when designing new pages/content/etc..
- Ensure every asset looks and feels consistent (no weird-sized text or randomly wrong-colored buttons)
They’re a fantastic, high-ROI tool for copywriters running any size business.
Here are examples of design systems in the wild:
- City of Austin Digital Style Guide
- Mailchimp Pattern Library
- Australian Government Design System
- Atlassian Design System
What Components Are in a Design System?
The actual parts of a design system vary depending on your unique needs. These usually include at least the following:
- Heading text
- Body text
- Buttons
- Testimonials
Design systems can also include other elements such as:
- Fully-styled sections (like Hero sections)
- Content callouts or opt-in forms
- Benefits/features/FAQs
Here’s the rule of thumb: if there’s a design element that will appear on your site more than once, throw it in the design system.
Here’s a very simple design system we use at Common People:
(You can click here to see a bigger preview.)
When we get a new client project, we:
- Make a copy of our design system template
- Style each element according to the client’s brand
- Use this as a starting point for our design work
It saves a ton of time when we’re building out new sites.
And it’ll save YOU time and money when laying out your copy.
How to Quickly Create Well-designed Copy Assets with Your Design System
Once you’ve created your design system, laying out your copy is as simple as:
1. Open your copy and design system. If you’re using a builder like Elementor, Webflow, or even Divi, you can create a starter template that lets you literally copy and paste section templates onto your new page. Then you just swap out the placeholder text with your real copy, and bam! New page built.
2. Starting at the top, go through your copy and lay out your page element by element. So if your copy doc starts with a headline, copy/paste a headline from your design system into your new page. At the end, you’ll have something kind of like this:
3. Once you’ve laid out your entire page with all the elements in order, replace the placeholder copy with “real” copy.So your headlines are actually, like, headlines instead of “Insert Headline Here”.
You might need to swap out a few images. But when you’re done, you’ll have something good enough to ship. And you did it yourself!
When to Use a Design System and When to Hire Someone
If you’ve already established brand guidelines and have a clear brand identity, then a design system is a good move.
But if you’re still locking down the specifics of what your buttons, links, callouts, testimonials, templates, layouts, etc. look like… then hiring a professional is a smart step.
Creating a design system is what big companies call a “value-added” step. That means it takes an extra step, yes. But it ultimately saves time next time, and the time after, and into the future.
Have any questions about design systems or wondering how to create one? Feel free to pick a time to chat on my calendar.