What is a mockup? (+How to create a mockup in 2022)

Anyone who has been involved in the process of designing a website or application is aware of the value in creating a mockup.

Still, the web design workflow can be daunting for anyone who isn’t a trained designer or product manager. To add to the confusion, several steps in the design process are often confused for each other or are mislabeled.

Ultimately, this guide will help you understand exactly what a mockup is, where it fits into the design process, how it’s used, and who needs to understand more than the basics of a mockup.

What is a mockup?

A mockup is a static design of a web page or application that features many of its final design elements but is not functional. A mockup is not as polished as a live page and typically includes some placeholder data.

It’s useful to breakdown each part of that definition.

As a “static design,” a mockup does not have the functionality of a live website. Though a mockup would include a colored CTA button, for instance, it would not open up a form when clicked on, unlike a website (or the prototype of a website; more on that later). A mockup may show a cover image at the top of the page, but it won’t have an active carousel like a website.

A mockup is not the first stage of website development, so it’s on its way to being a finished product, but it still has a ways to go. A mockup may include placeholder copy (think “lorem ipsum”) or images, but it is meant to give a pretty good feeling of what the page will look like, though not what it will act like.

What is the purpose of mockups?

Ultimately, a mockup serves as a visual draft of what a web page or application. It is created to bring life to an idea or wireframe and allows a designer to test how various visual elements work together.

Mockups gives stakeholders in the page the ability to see what that page will look like while making suggestions for changes in layout, color, images, styles, and more. If you wonder what a page would look like using a secondary color, you can test how that will appear by making a second version of the mockup. Similarly, if you want to make a change like adding a header while centering an image, your mockup can let the team see how that potential change might look.

A page should be created for a specific purpose with a particular goal in mind. Mockups provide the team the chance to see how that purpose can be achieved through the layout created by a UI designer with a wireframe, and how that layout can be brought to life using their brand standards and visual creativity.

Where do mockups come into the web design process?

In terms of stages, mockups come at roughly the midpoint of the web design process. In terms of time, they’re still in the early stages of design.

A loose design process looks like this:

• Ideation
• Wireframing
• Mockup
• Prototyping
• Go live

The wireframing stage is ultimately about creating a rough layout for the page, taking an idea or a goal and using design theory to create a page that will accomplish that goal. The mockup is used to take that layout and make it more robust and lifelike.

After stakeholders come to an agreement on the visual aspects of the mockup, it moves into the prototyping stage where real development is needed to turn a mockup into a near-functional version of the page. Of course, all of this happens before a page goes live and is tested with real users or visitors.

What is the difference between a mockup and a wireframe?

A mockup comes after a wireframe in the design process, and it builds upon the design of the wireframe. Mockups, obviously, are more robust and closer to a finished product than a wireframe.

There are some important differences that can help you keep wireframes and mockups straight:

• Wireframes are black and white; mockups are in color
• Wireframes are used for functionality; mockups are for visuals
• Wireframes show simply elements of a page; mockups provide substance

As an analogy, the wireframe represents the blueprint of a house. It shows, in two dimensions and black and white, the layout of the house and how the rooms interact with one another.

If a wireframe is a blueprint, a mockup is a two-dimensional rendering of a standing home. It shows the color of the siding and the style of trim. It offers a cross-section of the living room, complete with wallpaper and granite for the fireplace.

These images can quickly be altered to show different wallpaper or a darker wood floor. In the same way, a mockup can show stakeholders different visual looks to a page without changing its structure.

Here is a more in-depth breakdown of wireframes vs mockups and their key differences.

What is the difference between a mockup and a prototype?

Mockups come before prototypes, which are simulations of what a live page will be. While a mockup is a static image, a prototype offers most of the functionality of a live website, showing stakeholders something very close to the real user experience.

To go back to the architectural comparison, if a mockup is an image set up on a computer screen or eisel, then a prototype is a three-dimensional virtual reality program that lets you walk through the home. The image lets you see the way colors work together or the layout of a single room; the computer program would let you simulate walking from one room to the next to experience the open floor plan, or see how tight a hallway feels.

In the same way, a prototype lets stakeholders put themselves in the shoes of a real user, and gives them as close to a real experience as possible before pushing a page live.

How to create mockups

Understanding what a mockup is and what it’s used for is one thing. It’s a whole other endeavor to create a mockup that is useful in the development process.

For starters, you’ll need to use software of some sort to create the mockup. What type and what product will vary based on what tools you already use, what your budget is, who else needs to access the mockup, and more.

There are specific wireframing tools, and some of these tools also offer the capability to create mockups. That said, generally speaking, it’s standard to use two separate tools.

Another option is to use a general graphic design tool to create mockups. Adobe Illustrator is typically the tool you'll use to create them. This vector design product is the industry standard for designers of all kinds, and it has been used to create more than a fair share of mockups. It’s prevalence in the industry provides many templates, tutorials, and more for the inexperienced designer.

Finally, there are tools designed specifically for creating mockups. Some products are specifically marketed towards the mockup stage, but this software category is murky. Products are often marketed for either mockups and wireframes, or mockups and prototypes. Choosing a product can be difficult, but using a software review site or getting recommendations from fellow designers can help you navigate this software space.

Conclusion

The mockup stage in website development is one that is sometimes left behind; it can seem non-essential in comparison to wireframing and prototyping. Still, there is high value for any development team in breaking mockup creation into its own stage. By producing mockups and iterating on the designs created, a team allows itself to be intentional about the design choices it makes for a given page. It lets the aesthetics of a given page be analyzed by stakeholders in multiple roles give feedback and make the page as best as it can be.