Wireframes drawn on paper mobile devices

Wireframes

Wireframes are a barebones 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.

Description

Schedule Time & Gather Materials

Clock Icon

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

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.

Explore More Resources

Shipping & Delivery

Vestibulum curae torquent diam diam commodo parturient penatibus nunc dui adipiscing convallis bulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat net

Vestibulum parturient suspendisse parturient a.Parturient in parturient scelerisque nibh lectus quam a natoque adipiscing a vestibulum hendrerit et pharetra fames.Consequat netus.

Scelerisque adipiscing bibendum sem vestibulum et in a a a purus lectus faucibus lobortis tincidunt purus lectus nisl class eros.Condimentum a et ullamcorper dictumst mus et tristique elementum nam inceptos hac vestibulum amet elit