This Case Study has been Archived. It’s content is historically relevant, but some content may be out-dated. View the most recent case studies on the Case Studies page. Please see the Zeplin Tool Case Study to the see the Design Team’s latest Annotated Comp process.
Annotated Comps
Annotated comps provide the developer with explanations of an application’s functions. Screenshots and annotations of an application produce visual explanations of a function. This case study explores the benefits of performing this practice to gain full knowledge of an application.
1. Annotated Comps Using MCoE Template
The examples show the process of using our Annotated Comp template created in Adobe Illustrator to help you create detailed screen flows with deeper explanation of interactions and functions. The steps below shows the simple and efficient process.
Step 1
Download our annotated comp template in Adobe Illustrator format (we have also included a PowerPoint format template in the zip folder).
Step 2
Place your artwork inside the phone frames. You can easily place your screens in Illustrator by selecting File>Place…
Step 3
Be sure to carefully think through your flows and organize them in a logical order. You will notice that as you populate your document, you will go through several iterations as your Annotated Comps may reveal gaps or redundancies or red flags in your app’s structure and content. As illustrated in the sample below, each part of your screen that involves an interaction should include a visual call out with details on what the feature does for the app. The more details you can provide through the notes under each phone screen, the better your flows will be in terms of clarifying transitions and links between screens.
2. Annotated Comps Through Prototyping
The examples show the process of using the Proto.io application to help layout the annotated computations.
Proto.io creates fully interactive prototypes that perform exactly like the application. Annotated computations provide a deeper explanation to functions. The process of going though an application on Proto.io and arranging written annotated computations provides a learning experience. This offers an in-depth knowledge of an application. The steps below shows the simple and efficient process.
Step 1
Familiarize yourself with the prototype application.
Step 2
Take screen shots of the applications various screens.
Step 3
Explain the functions and transitions within and between each screen.
Conclusion
Be sure to spend time creating annotated computations for an application. The simple process provides a high level of familiarity to the functions and principles of an application.