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
- To explore different interactions to accomplish the same function.
- To connect the information architecture to visual design.
- Clearly define all content that will be present with potential copy direction
- Identify a task you want to understand.
- Create a page view of the first step in that task.
- Imagine the user performing the desired action.
- 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.
- Return to the start page and imagine actions that would take the user off the Happy Path.
- Create page views that display the results of those actions.
- Now imagine alternative ways to complete the task. Go back to Step 1 and create page views that describe the alternative paths.
Templates (if applicable)
Created by: Joe Steinkamp | Last updated by: Joe Steinkamp