A prototype looks very similar to the finished product. Here, processes can be simulated and user interaction can be tested. Prototype is already very close to the finished product. This can be helpful, for example, to provide investors with a picture of how a finished product can be,and help team members review their project visually. Unlike a wireframe,a mockup looks more like a finished product or prototype, but it is not interactive and not clickable. Mockup, a kind of high-fidelity static design diagram, should demonstrate information frames and statically present content and functions. A wireframe is like a channel that helps team member understand their projects better. Your wireframe design doesn’t need to focus too much on minutiae, but must express design ideas and should not miss any important parts. Wireframe is the basic and visual representation of the design. Wireframe, a low-fidelity way to present a product, can efficiently outline structures and layouts. Wireframes, mockups and prototypes actually represent the different stages of design flow. “Confusing wireframes with prototypes is like assuming anĪrchitectural blueprint and a display house, are the same thing.”

In a post on Designmodo, Marcin Treder writes:

Wireframe prototype mockup cover letter