Design

Early design ↔ Late design ↔ Development

Low fidelity ↔ High fidelity

Wireframes

A wireframe is a low-fidelity visual schematic that represents the skeletal framework of a webpage or digital interface.

Wireframes are unconcerned with visual qualities, only with conveying relative placement, functionality and role of components.

They are used within a design team, by programmers and implementers of the system as blueprints for the layout of an interface.

Wireframes are generally static and non-interactive.

Mockups

A mockup is a high-fidelity rendering of the visual elements of a system: colours, typefaces, etc.

Mockups are relatively expensive and invite discussions of the visual and aesthetic qualities of the design.

They solicit fine-grained, detail-oriented feedback and should be used to fine-tune a design in the latter stages once more significant design and interaction issues have been resolved.

Like wireframes, mockups are static and non-interactive.

Prototypes

A prototype is a sample of a part or product fabricated in advance of production to allow demonstration, evaluation, or testing of the product. The word can be decomposed through proto (first, initial) + types (image, impression).

We use prototypes to illustrate and evaluate our products and systems with end users, usability experts and team members.

Prototypes of digital systems are interactive, i.e., they demonstrate how the system would react to user actions.