Concepts by Julie Stanford - www.boxesandarrows.com/person/juliestanford
A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, functionality, etc. that will go on the screen. It just demonstrates what elements a web page or application screen will contain and roughly where they might go—although the location can change. It does not contain pictures or any visual design.
An HTML wireframe is created in HTML using a program such as Dreamweaver. A flat wireframe is created using a program such as Visio and does not have interactive components, but is a flat image of the elements on the screen.
An HTML wireframe can be taken a step further to bring the application's interaction design to life by linking user actions and mock functionality from one wireframe to other wireframes.
Wireframe Example
Benefits of Wireframes
Wireframes provide specific, screen-level information, detailing which elements need to appear, the implementation of these elements, and the hierarchy among them. They also describe the various navigation mechanisms and help orient the viewer to the current location within the proposed application. Wireframes can be linked together in a "happy path" so that potential users of the system can interact with them to vet the essential use cases.