Day 18: Annotating Wireframes

Susan K Rits
Jul 29, 2017 · 3 min read

The test of a good wireframe is how concise and detailed are the annotations.

What it is.

Annotations describe the content, state(s) and function of each element in a wireframe.

How it’s used.

Engineers read our annotations to understand what the application should do, as well as what content each component will hold.

Discussion.

The best test of an annotation is to hand it to an engineer and ask them to build what you’ve described. I promise, no matter how detailed your description, the engineer will have questions. If you’ve never worked with an engineer, today is the day to find one and make her your friend.

To be fair, they’re asking detailed questions because they have to program this complex idea that you’ve come up with. So they want to know everything about it, such as

  • How many states will the buttons have?
  • What happens if the user inputs the wrong password?
  • How many character can a headline have?
  • What if the headline has too many characters to fit in the headline container?

Your job is to answer all these questions before they’ve been asked. You answer them in the annotations.

It’s hard to be both detailed and concise when you write annotations. I always to to remove as many words as possible while leaving the important information. You don’t need to write complete sentences, phrases are fine.

  • Start with what the thing is.
  • Write what it does.
  • Substitute digits for words (e.g “3” instead of “three”)
  • Use basic programming terminology (onclick, onhover, input box, toggle on/off, load page, etc.)

From this:

To this:

From this:

To this:

Tips & tricks.

  • Use a colored number on the wireframe for each element you’re annotating.
  • The corresponding number is in the margin, with the annotation.
  • The only color on a wireframe should be the numbers for the annotations.
  • Write short, detailed phrases with as few words as possible

Your Assignment

Use the low-fi wires you sketched yesterday, and refine your annotations.

Practice rewriting the annotations from you wireframes. Identify as much functionality as you can. Focus on

  • Separating the object’s name from the object’s function
  • Write short phrases and as few words as possible
  • Use basic programming terms (onclick, onhover, input box)
  • Number icons to identify the annotations and the objects you’re describing in the wires

Create a pdf and share your revised annotations in the comments and/or on Dribbble and Twitter #100daysdesign.


Originally published at 100days.design on July 29, 2017.

100 Days of Product Design

TUTORIALS • EXAMPLES • PROJECTS • RESOURCES

Susan K Rits

Written by

Founder: 100 Days of Product Design, Imprintli Publishing, ChicoButter and Rits&Co.

100 Days of Product Design

TUTORIALS • EXAMPLES • PROJECTS • RESOURCES

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade