Dark Mode UI Components by uinkits
25% OFF
Happy New Year Discount, 25% off on any Uinkits System and Kit.
Use the code "HNY25"!
00
Days
00
Hours
00
Mins
00
Sec
Discover a selection of our UI elements and components available below:
00
Days
00
Hours
00
Min
00
Sec
uinkits App Kit
Hey, wanna learn more?
Subscribe to our cool design newsletter to receive the latest in UI/UX design.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
*By clicking "Subscribe," you agree to our Terms and conditions and Privacy Policy.
Design Annotations - UI Design

Design Annotations - UI Design

What is an Annotation in UI/UX 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.

When to Use Annotations in UI/UX Design?

  • 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.
Discover Uinkits System!