Annotating the UI design with callout shape

Annotation is extra information, such as comment, note, explanation, or other type of external mark that describes a model. It is an effective way to edit and review work in a work group environment. Designers often need to be able to jot down information which should not be part of the model itself, annotation helps in this situation. For instance, annotation can be added to a User Interface design to specify validation checking.

To annotate a User Interface design:

1. Select Callout from the diagram toolbar. Note that the Callout is under the Common category.
   

   Select Callout from diagram toolbar

2. Click on the diagram to create a callout shape. Enter the content of annotation. Formatting can be applied through the buttons at the bar above the callout shape.
   

   Enter the content of Callout shape

3. We need to attach the pointer of callout shape to the User Interface component that needs to be annotated. Drag on the end of callout shape's pointer towards the User Interface component.
4. Release the mouse button to confirm the pointer position when reached the component.
5. Click on the diagram background to confirm editing.
   

   Use Callout shape to annotate a text field

6. Repeat the above steps to annotate the whole design with callout shapes.
   

   User Interface diagram with annotations