Wireframes

Wireframes are a barebones representation of a product’s visual interface. They focus on functionality, space allocation, content prioritization, and behaviors and therefore typically lack color, graphics or text styling. The primary purpose of a wireframe is to communicate information architecture and expected user interactions to stakeholders, designers, and developers and to encourage ideation.

When to Use

1. To explore different interactions to accomplish the same function.
2. To connect the information architecture to visual design.
3. Clearly define all content that will be present with potential copy direction

Steps

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.

References

1. http://practicaluxmethods.com/product/wireframes/
2. https://www.usability.gov/how-to-and-tools/methods/wireframing.html
3. https://methods.18f.gov/

Templates (if applicable)

Created by: Joe Steinkamp | Last updated by: Joe Steinkamp