Lots of people use the terms prototype, wireframe, and mockup in lieu of each other but they are all different. They look different and have different purposes. Some projects may require only a wireframe and a mock-up while some others call for a prototype.

Wireframe

A Wireframe displays the basic layout of a web page represented by gray boxes. It shows the main elements of the product and where each item should be placed on a page.

Wireframes are not interactive. They create a simple design for the project team to follow and can be developed and refined quickly.

To the layman, wireframes are like blueprints, or like city maps and guides to find your way around with.

From the perspective of a product designer, a wireframe is a tool for visualization of his idea. He communicates this to his team members to get their instant feedback.

Keywords: Guide, Blueprint, Static, Communication tool

Prototype

An interactive wireframe is a prototype. It is a more detailed and interactive representation of the product.

It simulates a real-time user interface. Clickable prototypes enable users to test their way through all the parts of the UI.

For providing this enriching user experience, prototypes need to closely model the real-time scenario.

This enables extensive user testing and reviewing of different solutions.

 Key-words: Interactive, Dynamic, Clickable

Mockup

• A Mockup figures somewhere between a wireframe and a prototype.
• It is static like a wireframe.
• It is visual like a prototype.
• It conveys the product without being interactive.

Visual appeal is the most prominent feature of a mockup.  The product identity is conveyed through colors and typography. It aims to portray the look and feel of the final product.

Keywords: pixel perfect, typography, rich visual elements, color, static, non-clickable.

High vs. Low Fidelity

Wireframes, prototypes, and mock-ups can be high or low fidelity based on their usage scenario at a specific stage.

When many pages of a mockup are made to be clickable, it evolves into a high-fidelity prototype.

Similarly, when many pages of a wireframe are made to be clickable, it transforms into a low-fidelity prototype.

Tools

Wireframes can either be drawn by hand or doodled on a whiteboard. Tools like Sketch.app, Adobe Fireworks, OmniGraffle can help in creating wireframes, mockups or prototypes. Some other tools are:

Wireframe.cc – Wireframe.cc offers a simple interface for sketching wireframes that don’t contain the basic toolbars of a drawing app. There is a limited color palette, and UI elements appear only when necessary.

Moqups – This tool takes you through the whole process of sketching the wireframes to building functional prototypes.

UXPin – You can design wireframes at top speed using this tool by dragging and dropping elements. Designs done in Photoshop or Sketch can also be imported into UXP for prototyping.

Mockplus – This is a desktop based tool created by the startup Jongde Software LLC. Its ease of use and clean interface helps to prototype web and mobile applications quickly.

Sketch – Sketch is the most widely used tool for prototyping. It’s made specifically for Mac users to design icons, websites, and images.

Axure RP – Axure RP Pro is a tool used for rapid prototyping and wireframing desktop and web applications. It is mostly for designers who create sophisticated, interactive prototypes.

Comparison

Mock-ups are not as abstract as wireframes and take lesser time to build than prototypes. So they are especially useful in trying to get an early design buy-in from the stakeholders.  

Wireframe focuses on functional features instead of visual elements. Logic and content take priority over a visual appeal. Mostly colors like black, white and gray are used in wireframes.

The decision of wireframing, mockuping or prototyping your website or mobile app depends on the project needs and its end users. If it’s a small project, a wireframe and a low-fidelity prototype will suffice. For a product which is high on visual interaction, a mockup and high-fidelity prototype will be a prerequisite.

LSI Keywords: Wireframe, Prototype, Mockup, Guide, Blue-print, Static, Communication tool, Interactive, Dynamic, Clickable, pixel perfect, typography, rich visual elements, color, static, non-clickable. 

References:

https://brainhub.eu/blog/difference-between-wireframe-mockup-prototype/

https://designmodo.com/wireframing-prototyping-mockuping/

http://www.creativebloq.com/wireframes/top-wireframing-tools-11121302

https://blog.prototypr.io/the-7-best-prototyping-tools-for-ui-and-ux-designers-in-2016-701263ae65e8

https://medium.com/@Mockplus/8-ux-and-ui-wireframe-tools-you-must-try-in-2016-f8fbcccf7f6e

https://ux.stackexchange.com/questions/82997/the-difference-between-mock-up-prototype-and-wireframe

https://speckyboy.com/wireframing-prototyping-mockuping-whats-the-difference/