CHAPTER 13 - PM HERO

Wireframing dan Prototyping untuk PM

PM perlu bisa baca dan kadang bikin wireframe. Skill ini speed up komunikasi dengan designer dan engineer.

TIME: 24MLEVEL: beginner30 CHAPTERS

1. Wireframe vs Mockup vs Prototype

Wireframe: low-fi, struktur layout, hitam putih, tanpa style. Mockup: visual mature dengan color dan typography. Prototype: interaktif, bisa di-click. Each stage punya tujuan dan tingkat fidelity berbeda.

2. When to Use Wireframe

Saat early discovery, eksplor banyak konsep. Saat align team dengan layout sebelum design detail. Saat communicate ke stakeholder yang ngga visual. Cepat, murah, easy to discard. Don't fall in love with first wireframe.

3. Tools Populer

Figma: industri standard, free tier bagus. Whimsical: cepat untuk wireframing. Balsamiq: classic wireframe tool. Sketch: Mac only. Excalidraw: hand-drawn style untuk feel sketch. Pilih sesuai team workflow.

4. Prototype Best Practices

Mulai dari critical user flow (bukan semua screen). Test dengan real user (5 user cukup). Iterate fast (jangan over-polish). Fokus interaksi, bukan visual perfection. Tools modern: Figma prototyping built-in atau ProtoPie untuk advanced.

5. PM Wireframing Skills

Tidak perlu jadi designer. Cukup bisa: sketch flow di whiteboard, simple wireframe di Figma, jelaskan UX flow ke developer dengan visual. Skill ini speed up komunikasi 5x. Belajar minimum essential.

YOUR MISSION

  1. Pelajari Figma basic dengan kursus gratis
  2. Sketch wireframe di whiteboard untuk fitur favorit
  3. Build clickable prototype di Figma
  4. Test prototype dengan 5 teman
  5. Replicate desain produk favorit untuk practice

POWER-UP RECAP