The designing of a web or application page is a process that involves many steps and involves numerous people.
In an ideal world, the process from ideation to launch is smooth and goes exactly as the originator of the project expected. In reality, that is rarely the case. Still, even if executing a project exactly as planned is difficult, there are steps you can take to make that possible.
Communication and documentation are ultimately the keys to success. And in web or app design, using annotations during wireframe creation can set the entire project up for success.
What are wireframe annotations?
Wireframes are used early in the design process for a web or application page, created by a UI designer to layout the page in two dimensions. This is typically done with wireframing tools, but wireframes can be created by hand. They are essentially the blueprints for mockups and, ultimately, the live site or application.
Wireframe annotations are concise notes written by that designer. They are typically located to the side or at the bottom of the wireframe. Wireframe annotations are notes used to describe each element created by the designer, and to give additional information that cannot be given with a two-dimensional drawing.
Wireframe annotations can simply be notes that are written in the margins or at the bottom of the page, much like footnotes or comments in a Google Doc. Some wireframing software tools allow a UX designer to place an annotation as a box or other icon that expands to share that information with other users.
Wireframe annotations add more information to the wireframe that may not be apparent to others using the wireframe during the design process
Why are wireframe annotations important?
A picture may be worth a thousand words, but in the case of wireframing, a picture is actually not enough.
Wireframes are created by a designer based on specifications they’ve been given to create a page for a specific purpose. What is done with the wireframe is almost never executed by that designer, so the designer needs to make sure all of their intentions are understood in the future. Their wireframe should be as clear as possible, but there are just some things that can’t be conveyed by shapes and images, and some ideas may be interpreted differently by a client or a developer.
The web or app creation process will go through many people, iterations, and meetings, and it is highly unlikely the designer will be available every time their wireframe is being used. They need to provide enough information that anyone, including people who don’t have the same technical skills or expertise, can understand exactly what should be included in the prototype of the page just using the wireframe.
The design process is a bit like a game of telephone that is started by the designer. A designer is like the initial person in the chain, and the wireframe is the correct phrase. In telephone, once the person shares the sentence, they are no longer in control of the information, and it typically gets jumbled or misunderstood. Similarly, a designer’s intentions can be lost across multiple stages and stakeholders. By properly annotating a wireframe, a designer heads off much of the potential for miscommunication and leaves less up to interpretation.
What should be annotated in a wireframe?
Generally speaking, a designer should err on the side of over-communicating their design intentions, but at a certain point it is possible to give too much information. They don’t want their most important notes to get lost in the shuffle. They should keep their annotations short and to the point, and use language that can be understood by all stakeholders, from clients to engineers.
Wireframes do not contain all the visual elements of a prototype, and they certainly do not offer the functionality of a mockup. Annotations are used to offer this information in plain text. They should be used to give additional information for both content and functionality. These two types of information should be kept separate to help future users of the wireframe.
For a designer, it is important to give the “why” of a decision even more than it is the “what.” This allows others to understand the thinking behind a decision. And if changes have to be made for technical reasons, the spirit of the decision can be kept as best as possible.
Below are pieces of information that could be annotated in a wireframe:
- What each element is. This may seem obvious, but providing exactly the element is intended to be will leave out any possibility for misinterpretation.
- Include content that should be included with description of what it should be or any constraints. This could be the purpose of a paragraph with character limits, or what an image should display and what functionality it needs when clicked.
- Links, buttons, CTAs or other interactive elements. Where do they send the user? Do they open in a new tab? What needs to be included in the subsequent landing page or form?
- Any limitation or constraint. These can come up for many reasons, but if there is some logic a stakeholder needs to know they can’t do.
- Decisions that still need to be made. If some element of the page is yet to be determined, for whatever reason, the designer should make note of what is a placeholder.
- Any elements that could not be shown on the wireframe. If an element expands and cannot fit in the wireframe, for instance, this should be annotated.
Who uses wireframe annotations?
Of course, the designer is the key stakeholder in the creation of wireframe annotations. But they’re far from the only person using an annotated wireframe.
A UX designer uses an annotated wireframe to give detailed instructions on their designs to all other stakeholders. They also do it for their own records. The creation of a web page or application can take a long time, and a designer often works on many projects at once. These annotations act as a system of record to show what was intended in that iteration of a wireframe. With the annotations, a designer can always show themself or others exactly what was intended.
UX designers take a wireframe and bring it to life visually. The wireframe annotations provided by their design counterpart helps a UX designer make decisions on visual elements of a page. It also helps them understand all the elements they have to account for when creating a page’s visuals.
A wireframe is a long way from becoming a prototype or even a live page. Developers are responsible for turning the blueprint into a fully functioning page. The wireframe annotations provided by the UI designer gives the developer context for the elements that need to be created.
A PM is often needed to manage all the elements and stakeholders in the creation of a site or app. They’re tasked with keeping a project on the correct timeline, within budget, and in the scope of the original idea. That takes a massive amount of coordination and oversight. Wireframe annotations help them ensure that pages are being built to the proper specifications and contain everything they will need to. It also allows them to look back historically if elements are missing or not delivered as expected.
Clients or Other Stakeholders
For agencies, wireframe annotations allow a client to understand exactly what will be included in their finished project and make sure they understand technical elements. For companies building a site or app internally, wireframe annotations can provide insight into these projects for many stakeholders across the company, depending on the organization and scope of project.
Wireframing is a crucial stage in the development of applications or websites. They set the groundwork for the work that takes an idea from conception to reality. When executed correctly and communicated well to the rest of the stakeholders, wireframes set projects up for success. When those areas are lacking, it sets a project up for major issues down the road.
Wireframe annotations are the vehicle that turns a wireframe into a useful tool for all other stakeholders. They provide additional information for those creating the page, and they act as an interpreter for less technically inclined stakeholders. When a designer properly uses wireframe annotations, it can make all the difference.