From sketch to prototype
The four artefacts: sketch, wireframe, graphic mock-up, interactive prototype; low and high fidelity; paper prototype; what each lets you test.
- 25 cards
- 5 topics
- Free
The outline, topic by topic
Each topic is weighted the way the exam weighs it.
- Concepts
- Questions
- Sort and link
- On the timeline
- Scenarios
A few cards from the deck
Sketch: what is it?
Show the answer
A quick hand drawing of a screen or a path, made to explore ideas and throw them away cheaply.
Its near-zero cost lets you make many and discard them without regret: that is its advantage over more polished artefacts.
Which question can a wireframe already settle?
- On a phone, does the menu sit above the content or in a side panel?
- Does the blue chosen for the main button contrast enough with the background?
- Does the chosen font stay readable at small text sizes?
- Does the menu's opening animation feel smooth to the users tested?
Show the answer
On a phone, does the menu sit above the content or in a side panel?
The wireframe is a structural mock-up: boxes, labels, placement. Where the menu goes is part of it. Colours and fonts need a graphic mock-up, an animation needs an interactive prototype.
In order of increasing fidelity: the …, the …, the … mock-up, then the interactive prototype.
Show the answer
In order of increasing fidelity: the sketch, the wireframe, the graphic mock-up, then the interactive prototype.
Each step adds a layer: structure, appearance, then behaviour. The further the artefact goes, the more it costs to change.
Wireframe: what is it?
Show the answer
A screen diagram made of boxes and labels, showing structure and placement of elements, with no colours or images.
By removing appearance, it forces discussion on organisation and content: nobody argues about blue when there is no blue.
A team spends three days on a polished graphic mock-up. At the first test, users cannot find where to pay: the path is wrong. What went wrong and what to do?
- The mock-up was not attractive enough; polish it further before retesting
- It polished the look before validating the path; fix the path on paper first
- The testers were badly chosen; recruit others to confirm the path is fine
- The test was too early; wait for the finished product to validate the path
Show the answer
It polished the look before validating the path; fix the path on paper first
The flaw is one of order: a path is checked with the cheapest artefact, before investing in appearance. Three days of polish are lost when the structure changes.