Wireframing

Make

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.

Time required

Small: 1-3 hours

How to do it

  1. 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.

  2. Use this opportunity to start listing common design and interface elements you will need.

  3. Review your wireframes with specific user scenarios and personas in mind. Can users accomplish their task with the wireframe you are sketching out?

  4. Use the wireframes to get the team’s feedback on feasibility and structure.

Examples from 18F

Applied in government research

No PRA implications. No information is collected from members of the public.