Outline read and annotate how to#

Annotations provide clients with valuable context that helps them understand the project and provide feedback around necessary changes.Atkins, G. ClientsĬlients want to see a wireframe with a clear user flow that guides them throughout the user journey. They can reference annotations to help ensure ideas are aligned with the original scope, or to identify where additional scope may be needed to achieve the best possible outcome. Project managers are responsible for keeping the project timeline, budget, and scope on track. Copywriters can also add their annotations to comment on the amount of space needed for copy, or how the copy will interact with the design. Annotations provide context around the user flow, which helps to inform what messaging is used to help guide the user through that flow.

Outline read and annotate how to#

CopywritersĬopywriters are looking for information on what to write and how to target the right audiences through messaging.

They can also add their own annotations to wireframes to explain how certain elements will function, or advise how they will need an element to be designed in order to accomplish the desired functionality. Developersĭevelopers often refer to annotations provided by the designers to understand the context for various design elements. UI designers or developers who read this annotation will then have added context around the purpose and importance of this element. For example, a UX designer may annotate a certain design element to explain how it will improve usability. Designersīoth UI (user interface) and UX (user experience) designers annotate wireframes to add context around visual elements and user flow. Here’s a snapshot of how each role can interact with the wireframe annotations. Who uses wireframe annotations?ĭesigners and developers are typically the ones annotating wireframes, but there are other individuals who can add valuable annotations or who benefit from reading annotations. If you wait until the wireframe is completed, you may not recall all of the decisions or rationale you used to create them. On-the-fly annotations are often more comprehensive as they capture concepts and ideas that occur while still laying out the user flow. Your annotations should be simple, concise, and accessible to technical and non-technical individuals.Īnnotations should be made throughout the design process, rather than waiting until the wireframes are completed. Elements commonly annotated include but are not limited to: It’s not necessary to annotate every single design element or functionality, but you should highlight the most important items – especially those items that may require discussion and debate. What and when to annotate?Īlthough wireframes are a blueprint and not a final design, they are still thoughtful and detailed.

Any oversight or malalignment on wireframes has the potential to cause problems later on in design or development.Īnnotated wireframes are also helpful for stakeholders or project team members who may be less technically inclined and not familiar with how functionality is commonly represented in wireframes. Wireframe annotations mitigate the risk of a team member misinterpreting the intent of design elements, proposed functionality, or the general user flow. This clear understanding also enables people to provide constructive feedback to improve the wireframes. Notes around user flow, functionality, and the purpose of certain design elements help collaborators and stakeholders understand the wireframes more comprehensively. They must be able to quickly understand the wireframes and visualize how the wireframes will translate into the end result.Īnnotating wireframes is an efficient and effective way to add context and clarity to wireframes. But the necessity of clear communication extends beyond the internal team to external stakeholders as well. Since there are typically many collaborators on website or product wireframes, clear communication is critical to ensure all members of the team are aligned on the intended design and functionality. They outline the user journey and highlight content hierarchy, possible features, design elements, calls-to-action, and site navigation. Wireframes are 2D, grayscale designs that serve as a blueprint of a website or application. What are annotated wireframes and why are they important?įirst, let’s quickly review what wireframes are. Wireframe annotations add context around design elements, functionality, user flow, rationale, and more. Annotations are comments or notes of explanation.