user experience & design

Why You Must Annotate Your Wireframes

December 6th, 2016

Wireframes are a crucial part of the web development, and web design process. This is where the website starts to become more than just an idea.

Similar to the blueprint of a building, wireframes aren’t colorful. Instead, they focus on the spatial and interactive relationships between different elements of the webpage.

By choosing to design wireframes during the Development Lifecycle, you better prepare yourself for defending your website to criticisms. Referencing wireframes allows a user experience designer to easily figure out exactly why the website will succeed under the current design.

Why You Must Annotate Your Wireframes

Designing a website is a very subjective art. Writing clear annotations for your wireframe allows you justify your layout.

Annotating wireframes also makes it easier for your app development team to understand the logic behind your design as they develop the site. Your wireframe will be passed around to different members of the team with different schedules, and you won’t always be around to explain the ideation and reasoning behind your design

Writing Your Annotations

If you’re going to put in the time to make wireframes, you should finish the job by adding annotations to the design. During your user experience design process, to build a wireframe without annotations is to finish building a car only to neglect the user manual.

Adding an annotation to a completed wireframe is simple. Each point of interest is designated with a numeric marker. These markers can be traced to the different listings in the text pane for quick reference.

Phrasing is important. Since the subject is always the site itself, there is no need for any pronouns. Reading pronouns aloud to your team will only confuse them.

Why You Should Annotate Your Wireframes

The wireframe is the tangible output of the research done by the UX design team. Writing annotations allows the UX designers to explain the reasoning behind each aspect of the layout design.

While UX design may seem subjective, years of a/b testing and studying heat maps have given Codal’s UX designers strong instincts as to what types of site architecture gets the job done best. Annotations allow them to share that experience with the other factions of the development team.

The job of the User Interface (UI) team is to take the existing wireframe and create an aesthetic picture. They must take into consideration the profile of the client as well as the input from the UX team. Having annotations from the UX team to makes the end goal a lot more clear.

The decision to disclude annotations from wireframes would make it much harder for the UI team and development team to do their jobs. Instead of having their questions regarding the wireframe answered in front of them, the different teams must now contact the UX team in order to resolve issues they have with adding life to the wireframe.

Yes, annotating your wireframes will take extra time. However, for the most clear communication between all teams (UX, UI, development, and QA) it is absolutely necessary.

Here at Codal, we truly believe that seamless communication between teams, management, and clients is a huge aspect that makes a project successful. Annotations are included on every wireframe we craft.

Writing Clear Annotations In Your UX Design

The key to making good annotations is to remember that they should read like bullet points and not paragraphs. Write as if you were charged by the syllable.

As the UX team, you want to be able to give the UI team enough information to work with and eliminate any confusion, but you don’t want to give them so much information that they become overwhelmed.

Conclusion: Add Annotations to Maximize Wireframes

Wireframes are a crucial part of the software development lifecycle. Wireframes without annotations are like a map without a legend. It isn’t enough to just make a strong wireframe. The UI design team and developers need to be able to fully interpret your wireframe.

When developers and UI designers create wireframes, they open lanes for greater communication between team. This is going to make the development process much quicker. Low fidelity wireframes can be made up for with strong, well-written annotations. If you’re still making wireframes without annotations, you’re capping your growth.

Matt Gierut


Matt Gierut is Codal’s Chief Operating Officer. He is heavily involved in driving Codal’s long term business development and implementing innovative marketing efforts for Codal and its clients. Matt is very active in the Chicago Business community, as he hopes to help build Chicago’s reputation as a supportive and lucrative environment for business.


user experience & design

eCommerce Revenue Boosters: Cross Selling and Upselling

emerging technology

Go Mobile: Business on the Move