18F

18F - Wireframing

Wireframing translates strategy into interface blueprints. In this 180-minute exercise, teams focus on structure and user flow, avoiding visual design distractions. Wireframes show page elements, their priority, and navigation. We'll cover annotation, versioning, and presenting to stakeholders. Wireframes become conversation tools, revealing gaps and alignment issues early, when changes are cheap. Expect documented interfaces that unite strategy and design, fostering collaboration.

Duration
3 hours
Group Size
3-6
Category
18F
Difficulty
Easy
Prioritize content and relationships over aesthetics. Give designers a chance to ask developers about feasibility early.

  • Wireframes showing layout and structure.

  • Low-fidelity design foundation.

  • Alignment on information architecture.

Consider these points: Wireframes don't need to be perfect. Sometimes, showing the messiness sparks better conversations. Government Considerations: No PRA implications. No data is collected from the public.

  1. Create blueprints showing placement and hierarchy. Avoid fonts or colors that distract. Simple designs are easier to change. Tools like OmniGraffle or Balsamiq keep wireframes looking like rough sketches.

  2. List needed UX/UI patterns.

  3. Review wireframes with user scenarios and personas. Can users complete their tasks?

  4. Get team feedback on feasibility and structure.

Unlock Step-by-Step Instructions

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

For Facilitators

  • Review participant profiles and expectations
  • Prepare all materials and supplies
  • Test technology and room setup

For Participants

  • Complete pre-session survey
  • Review background materials
  • Prepare examples or case studies

Unlock Pre-Work Requirements

Create a free account to access step-by-step instructions, agendas, and resources for all activities.


  • Paper

  • Markers

  • Wireframing software (Figma, Sketch)

  • User flow diagrams

  • Grid templates

Unlock Materials Required

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Figma Wireframe Kit
Free wireframe components kit for Figma.
NNGroup - Wireframing Best Practices
Nielsen Norman Group guide on effective wireframing.

Unlock Resources & Templates

Create a free account to access step-by-step instructions, agendas, and resources for all activities.

Discussion

0/2000
Loading comments...

Related Exercises

See all exercises

18F-Five Whys

45 mins

The "Five Whys" exercise identifies the real causes of problems, not just the surface symptoms. By repeatedly asking "Why?" (at least five times), tea...

18f

18F - Visual Preference Testing

1.5 hours

Style Tiles help you get feedback on a solution's visual direction. It's a great way to validate designs with real users.

18f

18F-Design Principles

2 hours

Design principles guide product development decisions. In this 2-hour exercise, teams create memorable, actionable statements like "Earn people's trus...

18f