How to make the jump from writer to content designer
The ever-elusive jump from writing to content design is actually a natural one. So why is the path so prickly?
Published:
January 27, 2020
Written by:
Artwork by:
Yes, if you’re a UX writer, your expertise is words. But you work in a visual medium. Customers will see your words in the context of a UI design, not as lines of text on a blank screen.
I’m not suggesting that you always mock up your UX writing. But there are times when a mockup of your work can help you collaborate better with your partners.
A few reasons to mock up your UX writing work:
Here are four methods I use myself to mock up UX writing!
My Dropbox colleague and UX writing superstar, John Saito, introduced me to Skitch. It’s a super-easy way to annotate an image with arrows, text, and simple shapes. You can also pixelate content to hide confidential information. Get Skitch (Mac only, free from Evernote).
The image below shows the Skitch arrow, text, shape, and pixelate tools:
Programs like Apple Keynote, Microsoft PowerPoint, and Google Slides are quite useful in mocking up UX writing!
I have a Keynote “sandbox file” where I compose my work. It’s easy to create layers, blank out sections of a screen, and precisely place updated text. You can also quickly create and organize multiple slides to save “before” and “after” versions or multiple explorations.
The image below shows a Finder menu, copied to two proposals, original name blanked out, and replaced with alternative names:
Did you know you can edit any web page right in your browser window (at least you can in Chrome and Safari on Mac)? When someone first showed me this, it kinda blew my mind.
Here’s how to get it:
This method is convenient when you want to mock up a simple text change to a live design.
The image below shows how I select the “Design mode” bookmark on my live Dropbox page and then replace Home with Jennie’s Happy Place in the sidebar. 😉
Lastly, you can mock up UX writing with a full-fledged designer tool, like Sketch or Figma.
While this is the most advanced (and time-consuming) of the four methods, it lets you meet your designers where they are, using the app they use.
If the designer you’re collaborating with has a Figma file of the project, ask them to create a sandbox area where you can do content explorations (so you’re mocking up in their file). Or make a copy of their file in your Drafts folder (so you’re mocking up in your own file).
If no design file exists yet, fear not! You can start from scratch by searching for UI kits on the web.
For example, I downloaded the macOS Sketch files, imported them into my Figma Drafts folder, and then mocked up a new alert message.
The image below shows the macOS alert pattern copied into my Figma draft file called “Jennie’s Sandbox of Wonder” and then updated with new text:
OK, so you’ve done all this work to mock up your UX writing. Shouldn’t you now save it for posterity? Or at least so you can reuse your work for future projects?
I can’t tell you how many items I get handed a new project and think, “Wait a minute, I did this kind of work a few months ago, I can just reuse what I did, if only I can find it…”
If it’s in your “everything doc,” then it’s easy!
It’s pretty simple: every time you mock something up, take a picture of it and throw it in your everything doc.
My everything doc is just a simple Paper doc of screenshots, reverse-ordered by date (so the newest screenshot is at the top). I’ll type the actual UX copy right below the screenshot so it’s easier to search for. That’s it.
Get in the habit of archiving your work, even if it never sees the light of day. You never know when a project might come back to life. And if it does, your copy will be all ready to go!
As with my previous articles, I want to end this one with a reminder to # steeryourcareer.
By following the suggestions in this article, you can:
In the words of The Office’s Michael Scott, that’s what I call a win-win-win! 🙂
. . .
Thanks to Andrea Drugay, John Mikulenka, and Michelle Morrison for their help in putting together this article.
Want more from the Dropbox Design team? Follow Dropbox Design on Medium, Twitter, and Dribbble. Want to make magic together? Check out our open positions!
The ever-elusive jump from writing to content design is actually a natural one. So why is the path so prickly?
4 star speakers from the Button conference share why they picked their topics and how the state of the world has impacted what we write