How to mock up UX writing

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.

Why mock up words?

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:

• So your reviewers can give better feedback, because they can see your work in context
• So you can strengthen your argument for using more text or less text (usually it’s less text)
• When an engineer needs to fix a string, you can show them exactly where the string appears
• To minimize confusion over where your text shows up
• In general, to shorten and strengthen the collaboration process

Here are four methods I use myself to mock up UX writing!

Skitch

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:

Keynote, PowerPoint, or Google Slides

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:

Web browser “design mode”

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:

1. Save the following text as a browser bookmark: javascript:document.body.contentEditable='true'; document.designMode='on'; void 0
2. Go to the web page you want to change.
3. Select the bookmark from step 1.
4. Click the text you want to change and start typing!

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. 😉

Figma or Sketch

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: