How do You Present UI Copy?

Do you write UI copy? If so, what tools do you use? How do you deliver it?

Here’s what I’ve been doing:

  1. Get images or screenshots of the UI that needs copy.
  2. Place the images in Pages (a Word processing/layout app for the Mac. You could use Word).
  3. Inside each image: Draw colored boxes around the copy I’m changing. Each block of text gets a different color.
  4. Below each image: Draw boxes to match the colors and general position of the boxes in the image above.
  5. Fill in the boxes below the image with the copy I want to use.
  6. Deliver it as a PDF, with an explanatory first page.

The explanatory first page looks like this:

UI Copy Doc front page

Thoughts:

  • Developers can copy and paste from the boxes below the images. No typing and no typos.
  • It’s obvious which copy needs to be changed and which doesn’t.
  • Product Managers and other stakeholders get an idea of the copy and placement.
  • I don’t spend much time with layout. I just put the boxes sort of where they should go.
  • Color-blind developers? I’m not sure what changes I’d have to make.
  • Converting from or to Word can screw up the boxes, so check the doc if you have to convert.

Does this method make sense to you? Is there a better way? How do you deliver UI copy?

Tags:

4 Responses to “How do You Present UI Copy?”