Annotated Wireframe in Side-by-Side Comparison – Notes are for Web Developers
UX Design wireframes provide a visual sense of webpage layout and site navigation
Shown below is an example of an early phase wireframe with sample annotations for a Desktop Web Browser webpage with the final site design on the right side. These images are long to show the whole page. These types of wireframes can help in the early stages of design giving team members and stakeholders the ability to add comments and discuss ideas for content and image placement.
Later versions of the wireframe will have more detail, more precise size and placement, and will include annotations for both the graphic designers and the web developers (coders) of the site.
Key Annotation Benefits:
- Developers can view notes in the Sketch shared site area for each webpage wireframe as an overlay or layer)
- Style Guide and CSS notes are shown (possibly on their own layer
- Buttons and navigation links are defined
- Any JavaScript code needed will be described for webpage effects and for buttons
- Developers can also post their questions about a given page for Stakeholders, UX Designer, or Graphic Designers
