03.4 · Capability in Experience

Prototyping

Making ideas tangible quickly so they can be tested before full investment, from paper sketches to working code.

Map5 skills

Not startedLearningComfortable

5 skillsClick a hexagon to set your status

03.4.1SketchingQuick drawings to explore many ideas before choosing one.
03.4.2WireframesLow-fidelity layouts that show structure without visual detail.
03.4.3Clickable prototypesLinked mockups that let people click through a flow.
03.4.4Functional prototypesWorking code built quickly to test an idea with real behavior.
03.4.5Usability testingWatching people attempt real tasks to find where they struggle.

Mark all 5

Where to start

3 resources

articleStart here
UX prototypes: low fidelity vs. high fidelity ↗
NN/g · 2016 · 13 min
How much detail a prototype needs for what you want to learn, from paper sketches to clickable mockups.
articleStart here
Usability (user) testing 101 ↗
NN/g · 2019 · 9 min
How a usability test works, what it needs, and the different ways to run one.
articleGo deeper
UX strategies for complex-application design ↗
NN/g · 2025 · 10 min
Why rough prototypes with real scenarios beat polished mockups early on, especially for expert tools.

3 tools

ToolFreemium
Figma
figma.com ↗
Collaborative interface design and prototyping in the browser, the industry default.
ToolOpen source
Penpot
penpot.app ↗
Open-source design and prototyping tool, self-hostable, built on open web standards.
ToolOpen source
Excalidraw
excalidraw.com ↗
Open-source whiteboard with a hand-drawn look, for quick sketches, flows and diagrams.