Sketch vs. Mockup vs. Wireframe

Because this seems to keep popping up in my discussions from time to time:

1. Sketch

• Fidelity: – – (very low)
• Time: ++ (very fast)
• Cost: ¢ (cheap)
• Use: quick brainstorm of ideias; easy communication of purpose; pen & paper rough drawings

2. Wireframe

• Fidelity: – (low)
• Time: + (fast)
• Cost: $ (low)
• Use: quick communication of interactions; documenting the interface; black & grey representation

3. Mockup

• Fidelity: + / ++ (medium / high)
  
• Time: – (slow)
• Cost: $$ (high)
• Use: gather feedback and buy-in from stakeholders; static visualisation

4. Prototype

• Fidelity: + / ++ (medium / high)
• Time: – – (very slow)
• Cost: $$$ (expensive)
• Use: user testing; possibly reusable into the product; real interactive implementation

See also:

• Why It’s Important to Sketch Before You Wireframe
• Wireframing, Prototyping, Mockuping – What’s the Difference?