A wireframe is a simplified design of a page without colours, photos, or typography, showing the layout of elements, their order, and their relationships to one another. A prototype is its clickable version, in which the whole flow can be walked through, from entry to completing an order or sending an enquiry. The point of both is to separate two questions that otherwise get tackled at once and get confused with each other: what should be on the page and in what order, and what it should look like. Comments like I don't like that colour don't arise with a wireframe, and the discussion stays focused on content and logic. A prototype further allows the flow to be tested on real people before anything is coded, which is the cheapest moment to make a change. On larger projects, a wireframe saves more time than it takes to create.
See also: Information architecture, Usability testing, Design System.
