A wireframe is a detail representation of every single page, devoid of any graphic treatment. Wireframes are sometimes referred to as “page schematics”, “page architecture” or even “blueprints.” A wireframe includes at least the following:
- Layout: General placement of page elements such as headers, footers, navigation, content area, and often branding; It communicates decisions that as been made as to the navigation strategy of the site; it also shows the prioritization of the content on the page.
- Content inventory: What content needs to be present on the page. Often, designers choose to present the content treatment for the development team into the wireframes.
- Web elements: Headers, links, forms, lists, images etc.
- Behavior: Notes/annotations may be added as to how elements should be displayed (such as number of elements, default display etc.), or what functional behavior occur when an element is activated (popups, page refresh, link to another page, or external site etc.)
I have experience in creating three types of wireframes, content-only wireframes, low-fidelity wireframes, high fidelity wireframes.
Content-only wireframes include detail content for a given product, interaction details, and other development instructions. These could be done in Word, PowerPoint, or other wireframing tools. However, being content-only wireframes, I have worked extensively on Word, as it makes it easier for subject matter experts to review and add/delete comments. Samples of both Word and Powerpoint are given below. Click to view the PDF.
Low-fidelity wireframes are extremely simple place to begin the design process. The goal of a low-fidelity wireframe is to define the overall framework, navigation, and structure. I consider them as conversation starters. I have worked in Balsamiq to produce low fidelity wireframe. I prefer Balsamiq because of its informal look. Here are some samples. Click to view the PDF.
High-fidelity wireframes are typically designed for details. A high-fidelity wireframe will typically consist of the visual hierarchy, actual forms and interaction elements, often some labels, instructional text, and the main content. I use high fidelity mockups to define the overall product statement and brand identity. I use Omni Graffle, Illustrator, Photoshop, Axure as some of the tools to for creating high-fidelity wireframes. Here are some samples.