BitWithBite
UI/UX Worksheet
🔍 Wireframing
SCORE___ / 20
NameClassDate
After this worksheet you can
Explain fidelity levelsChoose the right fidelity for a questionExplain why start low-fidelityOrder the fidelity stages📚 Quick Recap
🎯 What you'll practice: Sketch → low-fidelity → high-fidelity → prototype.
🧠 Section A · Concept Check ● BEGINNER 4 × 1 = 4
1Low-fidelity wireframes typically use:
2The fastest way to explore many layout ideas is:
3A prototype, compared to a wireframe, is:
4High-fidelity wireframes differ from low-fidelity by having:
🧮 Section B · Problem Solving ● INTERMEDIATE 2 + 3×3 = 11
5The 4 fidelity stages are: sketch, low-fidelity, high-fidelity, and .
6Fidelity should match the you are asking.
7Why do rough wireframes keep feedback focused on structure?
8Give an example of a question best answered with low-fidelity wireframes.
9Give an example of a question that needs high-fidelity mockups.
🚀 Section C · Challenge ● CHALLENGE 5
10A stakeholder insists on seeing full-color mockups before any wireframe review. Explain the risk of skipping low-fidelity wireframes.
💭 Reflection — the most useful thing I learned:
A ___/4 B ___/11 C ___/5 Total ___/20
Teacher's Signature
Parent's Signature
✂ answer key — fold or cut before handing out
1-B 2-B 3-B 4-B | 5 = prototype 6 = question 7 = Because the intentionally rough look prevents reviewers from commenting on color/font details instead of layout and flow 8 = e.g. "Does this navigation structure make sense?" 9 = e.g. "Does this visual design feel premium and on-brand?" | 10 = Full-color mockups invite feedback on colors and fonts rather than structure, and early visual investment makes structural changes feel more costly to redo later — increasing the chance flawed layouts survive into development.