Wireframes

Wireframes are a bare bones representation of a product’s visual interface. They focus on functionality, content, and behaviors and therefore typically lack color, graphics or text styling. The primary purpose of a wireframe is to communicate information architecture to stakeholders, designers, and developers and to encourage ideation. Wireframes can describe features and functions, page navigation, layout, and interactivity in the form geometric shapes, placeholder text, and images. Text callouts are used to describe functionality or displays not readily understandable from the layout elements alone. Generally, wireframes are a static “low fidelity” document; however, some organizations choose to create a clickable “high fidelity” representation. Whether low or high fidelity, wireframes are an artifact to stimulate discussion and “What-if” thinking.

SCHEDULE TIME & GATHER MATERIALS
SCHEDULE TIME:
  • Time Needed: Varies
    • ~5 minutes to sketch a single feature
    • 2-4 hours to draw the screens in a specific task flow
    • Several months to create detailed wireframes for a complex system
GATHER MATERIALS:
  • Paper and pens or
  • Markerboard and dry-erase markers or
  • Design software of choice
CARRY OUT THIS METHOD
  1. Identify a task you want to understand.
  2. Create a page view of the first step in that task.
  3. Imagine the user performing the desired action.
  4. Create a page view that displays the result of that action. Continue creating page views until the task is completed. This is called the Happy Path.
  5. Return to the start page and imagine actions that would take the user off the Happy Path.
  6. Create page views that display the results of those actions.
  7. Now imagine alternative ways to complete the task. Go back to Step 1 and create page views that describe the alternative paths.

TRY THESE TIPS
  • Some organizations may also describe wireframes as mockups, prototypes, or wireflows. Make sure you understand organizational terminology.
  • Wireframes can be used to communicate functionality to both business and development groups.
  • Keeping wireframes updated is notoriously difficult. If wireframes are a customer deliverable or will be used for product documentation, make sure to budget significant time for updates.

Comments