What Is a Mockup?
The term mockup refers to a realistic visual representation of a product. In manufacturing, a mockup can be a scale or full-size physical model of the product. In digital product management, a mockup will be a detailed depiction of the app.
However, it’s important to note that mockups do not include product functionality. They do not let the user “do” anything. Instead, think of them as realistic drawings of the product. They’re designed to share the team’s vision for the product with the other company stakeholders and customers.
How Mockups Differ from Wireframes and Prototypes
Many companies treat these terms as synonyms—yet each has a unique role. One way to understand mockups meaning and where mockups fit in with these other concepts is that each represents a step in the early stages of the product development process.
Stage 1: Wireframe
For a digital product, the wireframe typically represents the design team’s first attempt to capture the app’s visual layout. Thus, wireframes are usually basic, black-and-white sketches of the product’s user interface and features.
Before they spend a lot of time on design or coding, the product team wants to gain feedback and approval from stakeholders. Those stakeholders could include other internal teams, the executive staff, and potential users.
Stage 2: Mockup
After gaining consensus on the product wireframe, the team’s next step will be to develop a mockup. The wireframe displayed only a rough sketch of features and content. In contrast, the mockup will show more visual detail and depict the app more realistically.
For example, the mockup will show the planned colors, icons, text fonts, and other visual elements as they would appear in the final product. Thus, if the design team creates a successful mockup, it will look like a “working” version of the app even though it won’t have any real functionality.
Stage 3: Prototype
Let’s now assume that after gaining feedback on the mockup, the product team earns stakeholder approval to move forward with the product. The next step is to build a prototype, which will include coding. The result will be a functional version of the product. Since the user can take actions in the app: click on buttons, move from page to page, etc.
What distinguishes the prototype from the final product is that it will allow only basic user actions and won’t be connected to the backend.
For example, if a company is building a shopping app, the prototype might allow users to browse product detail pages and put an item in their shopping cart. However, because the prototype won’t connect to the company’s backend eCommerce solution—the user won’t be able to complete a purchase.
Why Are Mockups Important?
Mockups serve as a bridge between the early-stage sketch of the wireframe and the team’s work coding a prototype. In addition, this step gives the product team a low-cost opportunity to learn what stakeholders and potential users think of the product’s look and feel.
As a result, gaining feedback on planned visuals before the team begins development makes changes less costly. They also potentially avoid having to adjust the product after they’ve coded it.