---
title: "Wireframing"
source: 18F Guides
source_url: https://github.com/18F/guides
licence: CC0-1.0
domain: engineering
subdomain: 18f-guides
date_added: 2026-04-25
---

## How to do it{#how-wireframe}

1. Build preliminary blueprints that show structure, placement, and hierarchy for your product. Steer clear of font choices, color, or other 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.
1. Use this opportunity to start listing what UX/UI patterns you will need.
1. Review your wireframes with specific [user scenarios]({{ "/methods/decide/user-scenarios/" | url }}) and [personas]({{ "/methods/decide/personas/" | url }}) in mind. Can users accomplish their task with the wireframe you are sketching out?
1. Use the wireframes to get the team’s feedback on feasibility and structure.

<section class="method--section method--section--government-considerations" markdown="1" >

## Government considerations{#con-wireframe}

No PRA implications. No information is collected from members of the public.
</section>
