Wireframing
Sketch ideas fast, fail cheap, and iterate before a single pixel is polished.
What is it?
Wireframing creates low-fidelity visual representations of a page or screen's structure and layout. By stripping away visual design, wireframes let teams focus on functionality, hierarchy, and user flow before investing in polished designs.
When to use it
Wireframe after defining requirements and IA but before visual design. Use them to explore multiple layout ideas quickly and get early stakeholder alignment.
How to do it
Start with paper sketches to explore multiple layouts rapidly.
Digitize the strongest concepts in a tool like Figma or Balsamiq.
Focus on content hierarchy, key actions, and user flow, not aesthetics.
Test wireframes with users through paper prototyping or click-through flows.
Iterate based on feedback before moving to high-fidelity design.
Pro tips
Use real content (not lorem ipsum) whenever possible. It reveals layout problems early.
Annotate wireframes to explain interactive behaviors and edge cases.