Wireframing & Prototyping

## Three artefacts, three commitments Sketches, wireframes and prototypes are often treated as steps on one ladder of increasing polish. It is more useful to see them as artefacts that **commit to different things**, and therefore answer different questions. Choosing the wrong one wastes effort: polishing an idea that should have been one of ten sketches, or debating colours on a layout whose structure is still wrong. ## Sketches A **sketch** is a fast, rough drawing of an idea. - It is cheap enough to make many — commonly several alternatives for one problem in minutes. - It is **divergent**: its job is to widen the options before narrowing them. - It commits to almost nothing, so people feel free to discard it. - On a car-rental site, a page of sketches might compare results led by vehicle class, by price, by a map of pick-up points, or by a single recommended car. ## Wireframes A **wireframe** is a skeletal layout of a screen. - It commits to **structure**: which content and actions appear, their priority, and their approximate placement. - It deliberately leaves out visual design — colour, imagery, typography — so reviews stay on hierarchy and flow. - It is usually static, one screen or a set of screens. - A results-page wireframe settles, for instance, that price, seats, luggage capacity and cancellation terms appear on every card, with price most prominent. ## Prototypes A **prototype** is a simulation of the product that someone can **use**. - It commits to **behaviour**: what happens when a person acts. - It exists to be tried, usually against a task, so the team can observe rather than ask. - It can be paper, linked screens, or code — fidelity is independent of the fact that it is a prototype. - A pick-up search prototype lets a person type a city, see locations and choose one, even if the data is faked. ## Side by side | Artefact | Commits to | Best question it answers | Typical effort | Weak at | |---|---|---|---|---| | Sketch | An idea | Which directions are worth pursuing? | Minutes | Detail, behaviour | | Wireframe | Structure and priority | Is the right content here, in the right order? | Hours | Look and feel, interaction | | Mockup | Visual design | Does it look right and on-brand? | Hours to days | Behaviour | | Prototype | Behaviour | Can people do the task, and where do they struggle? | Hours to weeks | Depends on its fidelity | ## Fidelity is a separate axis **Fidelity** is how closely an artefact resembles the finished product, and it has several independent dimensions: - **visual** — from line drawings to final styling; - **content** — from placeholder text to real copy, prices and data; - **interaction** — from static images to responsive, stateful behaviour; - **breadth and depth** — how many features are covered, and how fully each works. A wireframe is usually low on visual fidelity but can carry real content. A prototype can be low fidelity everywhere — paper screens swapped by hand — or high on interaction and low on visuals. ## Where each fits on a real project On a car-rental site, a team might sketch a dozen ways to present search results in an afternoon, wireframe the two most promising to settle what each result card must show, link the wireframes into a rough prototype to see whether people can get from search to a chosen car, and only then commission mockups of the chosen direction. Steps can be skipped when the question is already answered — a small change to an existing, well-understood page may go straight to a mockup — and repeated when a finding reopens an earlier question. ## Choosing the artefact 1. **Name the question** the team needs answered this week. 2. **Pick the artefact whose commitment matches it**: directions → sketches; structure → wireframes; behaviour → a prototype; look → a mockup. 3. **Set each fidelity dimension** only as high as the question needs. 4. **Throw away freely**: the artefact's value is the answer, not the file. 5. **Move on** once the question is answered, rather than polishing the artefact that answered it. The same logic applies to a website, a native mobile app or a kiosk: the artefacts are about the kind of commitment being tested, not the platform or the tool used to make them.