Annotated wireframes

You have probably already created the wireframes of the project proposing the changes and fixes for the UX issues you have found on your research and analysis. To share them with the dev and design team, you can add notes to the wireframes that will help them to better understand what you have envisioned as solutions. You can describe behavior, explain the options, show drop-down content, hover, and so on. To make it easy for you, you can think of these notes in two ways:

  • Annotations: Are higher level descriptions of pages and content
  • Functional specifications: Detail how everything works and are connected; makes design build-ready

In the following figure, for example, you can see notes used in a Balsamic wireframe: ...

Get Fixing Bad UX Designs now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.