Wireframe

Before an app or a website is programmed, someone draws it. A wireframe is exactly that kind of drawing: a rough sketch of the screen in gray, white, and simple lines. Boxes stand for images, strokes for lines of text, rectangles for buttons. So you can see what should be at the top, bottom, left, and right, but not yet what it will actually look like. The English name comes from the wireframe model: you see only the skeleton, not the outer shell. That is exactly the point, because it’s faster to argue over a skeleton than over a finished house.

Why sketches are cheaper than code

A change costs different amounts depending on when it happens. In a wireframe, you can move a button in ten seconds. In a fully programmed app, the same change can take days, because code, tests, and sometimes even servers have to be adjusted. That’s why teams design roughly first and only get precise later.

The second reason is the discussion itself. If you show colleagues a colorful, fully designed draft, everyone talks about the color of the button. If you show a gray wireframe, they talk about the actual question: will a user find what they’re looking for here? So the plainness isn’t a shortcoming, but a tool for focus.

It’s important to distinguish this from two related terms. A mockup is a draft with real colors, fonts, and images, but without functionality. A prototype is clickable: you can press buttons and land on the next page. The wireframe comes before both; it is the simplest and fastest stage.

From paper box to clickable draft

At the start there is usually a list: what needs to be on this screen? For an online shop, that might be a product image, price, size selection, reviews, and the buy button. Then these elements are arranged by importance. What should be seen first goes to the top and is drawn larger.

Drawing is done either with pen on paper or in programs like Figma, Sketch, or Balsamiq. For text, placeholder text, so-called greeking or dummy text, is often used so that no one argues over wording. Images are indicated by a rectangle with a cross inside it. These conventions are so widespread in the industry that almost everyone understands them immediately.

Often several wireframes are created one after another, one for each step of a task. Connecting them with arrows produces a flow: the path from the product through the shopping cart to payment. Only once this path makes sense do colors and design get added. A typical mistake is making the wireframe too pretty. Then it looks like a finished decision, even though it’s supposed to be an open question.

Wireframes in studios, startups, and AI tools

You encounter wireframes everywhere screens are planned. Agencies show them to clients in early meetings. Startups use them to explain a planned app to investors, long before a single line of code exists. They also show up in computer science or art classes when a group of students is supposed to design an app.

What’s new is the role of artificial intelligence here. There are tools that you can show a photographed paper wireframe to, and they generate code for a real website from it. Conversely, language models produce an initial draft from a description, which a human then refines. That’s why wireframes often appear in tech news reports about design software like Figma and its AI features.

For investors, the term is interesting because it describes an early indicator. A company that shows wireframes hasn’t built a product yet, only planned it. Anyone who knows the difference between a sketch, a designed draft, and running software can assess such announcements more realistically.