The Wireframe module allows designers to create information architecture designs for user testing. Web page wireframes are an information architecture deliverable that convey the information, the structure and relationships between information, and the flow and navigation of information on a web page. The wireframe module allows designers to share their wireframes with remote users, programmers, and visual designers to improve the development process. The wireframe module allows designers to add, re-use, and manage interface objects in their wireframes.

Designers can create new wireframe components for re-use in the design of their wireframes. They can change the interface objects and they will change in all wireframes in which they appear. Each wireframe page has a list of interface objects that it contains and interface objects can be removed from wireframe pages.

To create a wireframe, simple click on create content, choose page and then select 'PHP code' input format. You do not need to know PHP, just use HTML code. But you can reuse a 'wireframe component' you added before: type <?php print _wireframe_view(184) ?> to insert the contents of node/184, where node/184 is a 'wireframe component'. That's all PHP you'll need. A 'Wireframe component' can be any input format, typically these are simple HTML snippets but they also can be simple PHP nodes to display a list of users etc.

You can:

  1. create an interface object at create content >> wireframe component (node/add/wireframe).
  2. view a list of wireframe components at wireframe components(node/add/wireframe).
  3. manage all wireframe components at manage wireframe components (wireframe/manage).
  4. change and rename the wireframe component to a different wireframe component manage wireframe components >> component name (wireframe/manage/1234).
  5. use with the CivicSpace theme wireframe theme skeleton, to ensure the visual design does not effect user testing.
  6. file issues, read about known bugs, and download the latest version on the Wireframe project page.