The difference between a wireframe, mockup, and prototype?

Wireframe, mock-up and prototype are terms that are often used interchangeably which may introduce confusion. 

Wireframe: Wireframes are a basic and visual representation of the design, often in black and white/monochrome. It’s commonly used to lay out content and functionality. It focuses on the design ideas. They are normally used in the early development process to establish the basic structure before visual design and content are added. 

Mock-up: This is a static design yet realistic rendering of how the product or feature will look and how it will be used. It looks more like a finished product, but it is not clickable nor interactive (like the wireframe). It is rather a graphic representation to help the client picture a finished product. Adding colors, fonts, images, logos, etc. think about user interfaces (UI). 

Prototype: It looks very similar to the finished product. At this point, processes can be stimulated and user interaction can be tested. It’s like a mock-up enriched with user experience (UX) pieces, interactions, animations, and anything you’d like to experience when clicking a button.