Annotations describe the content, state(s) and function of each element in a wireframe.
Engineers read our annotations to understand what the application should do, as well as what content each component will hold.
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.
This is the place where the main headline of the lead article will go. The author can write up to eight words before they run out of space. After that, there should be the dot dot dot to show there’s more to the headline.
Article Headline. 36 char limit. Ellipse if truncated.
A shortened part of the article should show just underneath each headline so the user can see what the story is about. If the user clicks on the headline, he goes to the article page, where he can read the whole article.
Article snippet. 136 char until ellipse. Upon click, load Article Page.