Wireframing & Prototyping Basics

Tại sao PM cần wireframe

PM không phải designer. Nhưng wireframe nháp giúp:

• Communicate idea concrete thay vì text mơ hồ.
• Surface UX question sớm trước khi engineer build.
• Run user discovery với clickable prototype.

Fidelity ladder

1. Sketch — giấy, marker, 30s/screen.
2. Lo-fi wireframe — Figma grayscale, 10p/screen.
3. Mid-fi wireframe — placeholder content, basic interaction.
4. Hi-fi mockup — designer territory, brand-compliant.
5. Prototype — clickable, animation.

Tools

• Figma — industry standard, free for individual.
• Whimsical — wireframe nhanh, balsamiq-style.
• Excalidraw — sketch hand-drawn cho ideation.
• Miro/FigJam — collaboration board.

Component PM nên biết

• Frame, auto layout, constraints.
• Component + variant.
• Prototype link giữa frame.
• Comment cho async review.

Best practices

• Đừng cố làm pixel-perfect — đó là job của designer.
• Annotate intent + edge case, không chỉ visual.
• Brief designer = problem + constraints, không + solution.

Common pitfalls

• "Final design" từ PM → designer mất ownership.
• Wireframe lock-in solution sớm → miss better alternative.
• Skip mobile/responsive variant.