Wireframing

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

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. 

Content-only Wireframes       Content-only Wireframes-Powerpoint

Low-fidelity Wireframes

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.

Balsamic-Mockup for Car Dashboard

Cultural Awareness

High-fidelity Wireframes

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.

iPad-Prototype

iPhone-highfidelity wireframe

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s