What it is
A simple visual representation of a product or service interface.
Reasons to use it
To prioritize substance and relationships over decoration as you begin defining the solution. Wireframing also gives designers a great opportunity to start asking developers early questions about feasibility and structure.
Small: 1-3 hours
How to do it
Draw rough sketches that show structure, placement, and hierarchy for your product. Steer clear of font choices, color, or other stylized elements that would distract both the researcher and the reviewer. Lightweight designs are conceptually easier to reconfigure. A few helpful tools for building wireframes are OmniGraffle and Balsamiq, which purposefully keep the wireframe looking like rough sketches.
Use this opportunity to start listing common design and interface elements you will need.
Use the wireframes to get the team’s feedback on feasibility and structure.
Examples from 18F
- Wireframes from 18F's "Federalist" project
- Wireframes from the early stages of 18F's Open FEC project
Applied in government research
No PRA implications. No information is collected from members of the public.