Mockup

A mockup is a draft that looks like the finished product but can’t do anything. You see buttons, text, colors, and images of an app exactly where they will later be placed. Yet if you tap a button, nothing happens. There’s no technology behind it, just an image or an empty shell. The purpose is simple: everyone involved should be able to see and judge how something will look before it is built. The term comes from English and literally means roughly “dummy” or “model”.

Why drafts are cheaper than rebuilds

Changing a finished app is expensive. By then, programmers have already spent weeks working on features that maybe nobody needs. A mockup, on the other hand, can be reworked or thrown away entirely within a few hours. That’s why software development follows a rule of thumb: errors found early cost only a fraction of what they would cost later.

Mockups also solve a communication problem. A client and a development team quickly talk past each other if they only communicate through text. “A clear homepage” means something different to everyone. An image creates a shared basis that people can argue about. Misunderstandings surface while they’re still harmless.

Mockups are also useful for user testing. You show the drafts to a test person and observe where they hesitate. If no one can find the payment button, that’s a finding you get before building, not after launch.

From scribbles to clickable drafts

Usually, a rough framework is created first, often called a wireframe. This is a sketch made of gray boxes and placeholder text, without colors and without real images. It only clarifies one question: what goes where? Only after that comes the actual mockup, where fonts, colors, and photos are added. It then looks deceptively real.

All of this is built in design programs like Figma, Sketch, or Adobe XD. There, you arrange shapes and text fields on a digital canvas. Many teams then connect the individual screens with links. This lets you click through as if it were a real app. Such a clickable draft is called a prototype and is the next stage after the mockup.

A common misconception is that a mockup is already half-finished software. That’s not true. Underneath the surface, everything is missing: no database, no login, no calculations. The boundary runs exactly at the point where real data would come into play. That’s why a draft can look convincing in five minutes and still have months of work ahead of it.

Mockups in product presentations and AI tools

Anyone who sees images of new apps or devices online is often looking at mockups. Packaging designs and posters are also presented this way, composited into a photo of a real environment. In startup pitches to investors, mockups are standard because the product simply doesn’t exist yet. This is legitimate as long as it’s made clear that it is a draft.

But this is exactly where a point of contention lies, one that keeps coming up in tech news. When companies show videos at product launches that are actually just staged sequences, they get accused of deception. The line between illustration and advertising promise is blurry.

What’s new is that AI tools can generate mockups on demand. You describe what you want in one sentence and get back a finished screen design. Some systems even deliver the matching program code right along with it. This significantly shortens the phase between idea and first visible result. The real work remains, though: deciding which of the many drafts actually works for real users.