What is the difference between a wireframe and a mockup?

Wireframe and mockup are different stages of visual interface design:

• Wireframe is a schematic, simplified representation of the structure of a page or screen. It shows the placement of main elements, their relationships, and functional blocks without detailed design rendering. Wireframe helps quickly agree on the logic and structure.

• Mockup is a more detailed and visually closer to the final design image. It already considers colors, fonts, icons, and other style elements. This is an intermediate step between wireframe and prototype.

Example: first, a wireframe is created to determine where the menu, buttons, and content will be, and then a mockup is made to show how it will look from a design perspective.