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).

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.

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. 

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.

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.

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.

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.