C · StructureIntermediate45 min read
8. Wireframes to UI
UI/UX Foundations · 52 pages source format
Low-fi → mid-fi → UI. Match mental models. Apply existing design system or simple type/color from Graphic Design path.
What you'll learn
- Wireframe fidelity
- Content priority
- UI patterns catalog
- Consistency with platform
Low-fi wireframe
Boxes and labels only for worst friction step from backlog.
Do this now
Paper or FigJam wireframe — 1 screen, 10 min max.
Clear?
Mid-fi in Figma
Real copy (no lorem), real hierarchy, gray boxes OK.
Do this now
Mid-fi for same screen in Figma.
Clear?
UI polish pass
Apply type, color, spacing. One primary action per screen.
Do this now
Hi-fi version OR annotate what stays mid-fi for test.
Clear?