Pathwise

Manuals / UI/UX Foundations / Chapter 8

C · Structure · intermediate · Week 4 · Chapter 8 of 13

Wireframes to UI

Low-fi → mid-fi → UI. Match mental models. Apply existing design system or simple type/color from Graphic Design path.

Path progress
56%

Step 1 of 3

Low-fi wireframe

Boxes and labels only for worst friction step from backlog.

Low-fi wireframeDrag stickies · tap for tips
Study mapDrag stickies · tap for tipsKeep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Assert the UIdrag · tap →Retry wiselydrag · tap →Seed datadrag · tap →Close the loopdrag · tap →Keep it shortdrag · tap →Name the waitdrag · tap →Scope locatorsdrag · tap →Trace when stuckdrag · tap →One browser firstdrag · tap →Isolate statedrag · tap →Pathwise hackdrag · tap →Low-fi wireframedrag · tap →Try thisdrag · tap →Follow the dashed drag · tap →

Do this now

Paper or FigJam wireframe — 1 screen, 10 min max.

Was this step clear?
Chapter learning outcomes
  • Wireframe fidelity
  • Content priority
  • UI patterns catalog
  • Consistency with platform

Clear these before you leave

Side quest

Pattern library note

List 5 UI patterns you reused (modal, toast, empty state, etc.) and from where.