U.S. Department of Health & Human Services - 200 Independence Avenue, S.W. - Washington, D.C. 20201
1
Wireframes
Design Wireframes
A wireframe is a basic visual interface guide that suggests the structure of an
interface and the relationships between its pages. They serve as a blue print that
defines each Web page’s structure, content and functionality. Wireframes are created
before any design work is started so that the focus is on layout without the
distraction of color and visual elements.
Gathering Requirements
Using wireframes will often help to flush out new requirements and questions that
may not have been considered by the project team. Wireframes often end up
evolving into the requirements for a system. Wireframes can be created using a
variety of software applications, for example, Visio, Excel, Word, Illustrator,
Photoshop and Power Point.
Important Elements
Wireframes should include all the important elements of a Web page. These include:
Navigation
Company logo
Content area sections
Search function
User log in areas if appropriate
Example:
U.S. Department of Health & Human Services - 200 Independence Avenue, S.W. - Washington, D.C. 20201
2
Functional Wireframes
This is another type of wireframe that is used in building web applications. It shows
not only how each page is structured but information about each widget, button,
field, each piece of content, and what page is rendered by an action. It provides a
map of the entire page in the Web site, its function and features. Even the message
that may be rendered by a behavior can be included on this type of wireframe.
I wanted to provide some background for this Web application process so that it
would be clear what the wireframes represent. The purpose of the Web application is
to provide a tool for users to create and maintain FAQs. Users can be either general
users (who create and maintain their FAQs) or a system administrator who not only
has the same