Web Site Annotation Diagram
A Website Annotation Diagram consists of a screenshot of a web page which has comments
or questions pointing to various aspects of it. There may also be additional notes
listed below the image.
Typical Uses
Website Annotation Diagrams are especially beneficial when trying to make changes to a
webpage because it can be analyzed to determine any issues or features that require updating.
The diagram serves as a visual in order to make remote discussion easier.
Best Practices
- Choose a webpage. Decide which webpage is to be annotated, take a screenshot of it, and paste it onto a page. SmartDraw offers a Website Annotation Diagram template that will take a screenshot of any webpage and place it on a page.
- Create side margins. Create two margins along either side of the screenshot. They should be of equal width and size to maintain clarity and organization.
- Add notes. Use shapes such as ovals, squares, and rectangles in which to write notes. Place the shapes in the margins alongside the webpage near the part of the webpage that they refer to. If necessary for clarity, draw a line from the shape to the part of the web page about which it discusses.
- Organization. This diagram can become complex if many notes are added, so be sure to keep them as organized as possible. They should all be vertically aligned and spaced appropriately. Any notes on the overall appearance of the web page should be placed as bullets below the image so that there is more room in the margins for the specific notes.
- Color coding. Creating some sort of color code or using different shapes can help organize the diagram. For example, a comment may be a blue rectangle while a question may be a green circle, and so on.
- Collaborate. Consult with coworkers and team members for additional input and then use the completed Website Annotation Diagram to improve the website.