Mockup.

In the design process for a website there are three stages that are often confused. The wireframe is the skeleton: grey, without images, only structure and content blocks. The mockup is the design: it shows the page with real colours, fonts, images and spacing, but it is a static image. The prototype is clickable: you can navigate from page to page, open menus and test flows, even though there is no real technology behind it yet.

Mockups today are usually created in design tools such as Figma. Good mockups show not only the homepage on a large screen but also the mobile view, a typical subpage and states such as a completed form or an error message. The more realistic the content, the more telling the result: a mockup with placeholder text and stock photos almost always looks good; one with the real company name, real service copy and your own photos shows whether the design also works with reality.

In web design the word has a second meaning: presentation mockups are images in which a design is placed on a laptop, smartphone or poster. They are useful for case studies, pitches and social media, but say little about the quality of the design — a device with a nice reflection makes any layout look more impressive.

The value of a mockup lies in deciding early. Changes to colour, imagery or page structure take minutes in a mockup and hours after development. That is why sign-off should be deliberate: with all decision-makers, using real content, viewed on a smartphone, and with the question of whether the most important visitor goals can be reached at first glance.