1. Home
  2. Computing & Technology
  3. Web Usability

How to Create Wireframes for Your Web Site

From About.com

8 of 10

Annotate Your Wireframes

Annotated Wireframes

This is an example of a wireframe page with annotations on the left. Depending on your needs, you may want only a few annotations (as shown) or many annotations.

Sometimes you will need to include annotations to be sure your wireframes communicate enough to others who are looking at them. These are particularly good for describing things that cannot be easily communicated such as needs that must be addressed during visual design or guidelines for what type of content can be used in a particular position.

When you add annotations, there are few things that can be useful:

  • Numbers and Titles
    Adding numbers and titles (as in the example below) makes it easy to refer to annotations when discussing them with others.

  • Unobtrusive Arrows
    Your arrows pointing to page elements should not interfere wit the wireframes themselves.

8 of 10

Explore Web Usability

More from About.com

  1. Home
  2. Computing & Technology
  3. Web Usability
  4. Concept & Structure
  5. Annotate Your Wireframes

©2008 About.com, a part of The New York Times Company.

All rights reserved.