Wireframe

A wireframe is a deliberately rough sketch of a screen, made of gray boxes and placeholder lines, that settles what goes where before anyone argues about colors. The image is a crossed-out rectangle, the headline is a gray bar, the button just says "button," and there's no color anywhere, on purpose.

The roughness is the point. A wireframe looks unfinished on purpose, because polish attracts the wrong feedback. Show people a beautiful screen and they'll debate the shade of blue. Show them gray boxes and they'll tell you whether the layout makes sense, which is the only question a wireframe is asking.

It's the first of the three fakes a design passes through: a wireframe is the sketch of the idea, a mockup is the realistic picture of the finished thing, and a prototype is the fake you can tap through. Skipping the wireframe and going straight to pretty is how teams end up polishing a layout nobody agreed on.

You'll also hear "lo-fi," short for low fidelity, which is the designer word for rough on purpose, and "gray boxes." Paper sketches and whiteboard rectangles count too; what makes it a wireframe is the restraint.

When you want to discuss what goes on a screen without triggering a debate about how it looks, ask for a wireframe.