Design Annotations - UI Design

Annotations represent a different layer that is added on top of wireframes. Their purpose is to shed light on different concepts and explain the ideas when the designers and the rest of the team including the clients are not together. Annotations are additional information that explains, add, or detail how the elements, components, journeys, and any other design idea works.

‍

Annotations can be found as notes and comments and are placed in the design deliverables. They are used to deliver additional information and explanations on why certain decisions were made that way.

‍

• Annotations can be used to indicate event triggers.

• Annotations can be used to define event details.

• Can be used to switch the implementation status.

• Can be used to analyze accomplishments metrics.

• Arrows – arrows are used to show which action is triggered when the users have clicked, tapped, or switched a component.  The arrows point to the next step in the journey and let the rest of the team and the developers know what exactly what that element’s actions are.

Arrow can also be used to expose system calls, an alternative user journey, to express an edge case, and to show a different flow. Arrows that show an alternative user journey use two types of arrows – solid lines and dotted arrows. Solid lines are to express the primary flow and the dotted lines are to express the alternative flows. Arrows that indicate system calls are the ones with labels expressing what takes on in the background Arrows that express an edge case when creating a journey that indicates the edge case scenarios. Arrows can also be used to indicate a flow that uses a different input type.

• Curly brackets – are used to add additional explanations regarding a component or a design.
• Sticky notes – are used by all team members when they want to add info that is not obvious about the design.
• Callouts –  are used to indicate and explain the main steps.
• Page numbering and names – are used to create better navigation through the design for the clients and the rest of the team.
• Highlighting – is used to indicate certain features and interactions.
• Step counting and indicating – showcase the number of steps the user needs to accomplish.
• Red X and Scratch-Out – The red X is used to indicate pages that don’t need to be seen by anyone. Meanwhile, the scratch-out is used to hide the content.