{"id":81053,"date":"2024-08-07T21:13:28","date_gmt":"2024-08-07T21:13:28","guid":{"rendered":"https:\/\/mailrelay.com\/glossary\/mockup\/"},"modified":"2026-10-07T13:33:29","modified_gmt":"2026-10-07T13:33:29","slug":"mockup","status":"publish","type":"glossary","link":"https:\/\/mailrelay.com\/en\/glossary\/mockup\/","title":{"rendered":"Mockup"},"content":{"rendered":"\n

A mockup is a realistic visual representation of how a design will look before it is produced: a website, an app, a package, a T-shirt or an email.<\/strong> It shows colors, fonts, images and text, but it doesn’t work yet.<\/p>\n\n

It lets you see the result, show it and fix it while changing something is still cheap.<\/p>\n\n

What does mockup mean?<\/h2>\n\n

In English, a mock-up<\/em> is a scale model or replica. In Spanish design it is translated as maqueta<\/strong> or boceto visual<\/strong>, although Spanish speakers almost always use the English word.<\/p>\n\n

A mockup answers one question: “What will this look like when it’s finished?”<\/p>\n\n

What is a mockup for?<\/h2>\n\n

To decide before producing.<\/strong> Changing a color in a design is cheaper than reprinting a thousand boxes or recoding a website.<\/p>\n\n

To present an idea.<\/strong> The client or the team see something close to the final result, not a description.<\/p>\n\n

To spot mistakes.<\/strong> Text that doesn’t fit, poor contrast or elements that get lost.<\/p>\n\n

To sell before manufacturing.<\/strong> Many stores show the product with a mockup while they prepare production.<\/p>\n\n

To coordinate the team.<\/strong> Design, development and marketing work from the same reference.<\/p>\n\n

Mockup, wireframe and prototype: the differences<\/h2>\n\n
<\/th>Wireframe<\/th>Mockup<\/th>Prototype<\/th><\/tr><\/thead>
What it is<\/td>An outline of the structure<\/td>A static visual design<\/td>An interactive version<\/td><\/tr>
Level of detail<\/td>Low: boxes and lines<\/td>High: colors, fonts, images<\/td>High, with navigation<\/td><\/tr>
Can you use it?<\/td>No<\/td>No<\/td>Yes, in a simulated way<\/td><\/tr>
What it’s for<\/td>Organizing the content<\/td>Seeing how it will look<\/td>Testing how it’s used<\/td><\/tr>
When<\/td>At the start<\/td>After the wireframe<\/td>Before development<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

The usual approach is to go through all three stages: first the structure, then the look and then the interaction.<\/p>\n\n

\"Infographic<\/figure>\n\n

Types of mockup<\/h2>\n\n

Web.<\/strong> A website’s pages with their final design: header, menu, text, images and buttons.<\/p>\n\n

App.<\/strong> The screens of a mobile or tablet app, often shown inside an image of a phone.<\/p>\n\n

Product.<\/strong> The design applied to an object: T-shirts, mugs, boxes, bottles or bags.<\/p>\n\n

Branding.<\/strong> A brand’s logo<\/a> and identity on business cards, stationery, signs or uniforms.<\/p>\n\n

Advertising.<\/strong> Posters, billboards, social media or press ads as they would look in place.<\/p>\n\n

Email.<\/strong> A newsletter or a sales email before it is sent, in desktop and mobile versions.<\/p>\n\n

How to make a mockup in 6 steps<\/h2>\n\n

1. Define your goal.<\/strong> What you want to show and to whom: a client, your team or your buyers.<\/p>\n\n

2. Start from a wireframe or a sketch.<\/strong> Organize the content first and then decide on the look.<\/p>\n\n

3. Apply the visual identity.<\/strong> Your brand’s colors, typography<\/a>, logo and images.<\/p>\n\n

4. Use real content.<\/strong> Final text and images, or as close to them as possible. Placeholder text hides space problems.<\/p>\n\n

5. Show it in context.<\/strong> A website on a screen, a package on a shelf, an email on a phone.<\/p>\n\n

6. Ask for feedback and make corrections.<\/strong> Show it to whoever has to approve it and to someone who represents your customer.<\/p>\n\n

\n

Design your emails without code<\/strong><\/p>\n\n\n\n

Choose a template in Mailrelay, adapt it to your brand with the drag-and-drop editor and send yourself a test.<\/p>\n\n\n\n

\n
Create a free account<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Tools for creating mockups<\/h2>\n\n
Tool<\/th>Best for<\/th>Price<\/th><\/tr><\/thead>
Figma<\/td>Web and app design, teamwork<\/td>Free plan and paid plans<\/td><\/tr>
Penpot<\/td>Open-source alternative to Figma<\/td>Free<\/td><\/tr>
Balsamiq<\/td>Quick, low-fidelity wireframes and mockups<\/td>Paid, with a trial<\/td><\/tr>
Canva<\/td>Product and social media mockups with templates<\/td>Free plan and paid plans<\/td><\/tr>
Photoshop<\/td>Realistic product mockups with layers<\/td>Paid<\/td><\/tr><\/tbody><\/table><\/figure>\n\n

For a product design, many free templates let you place your design on a photo in a couple of clicks. Always check the license before using them in advertising.<\/p>\n\n

Mockups in email marketing<\/h2>\n\n

Before sending a campaign, it’s a good idea to see it the way the subscriber will:<\/p>\n\n

Design on a template.<\/strong> Email marketing templates<\/a> are, in practice, mockups ready to adapt to your brand.<\/p>\n\n

Check the mobile version.<\/strong> A large share of emails are opened on a phone. A responsive<\/a> design avoids tiny text and buttons that are impossible to tap.<\/p>\n\n

Check how it looks in each email program.<\/strong> Email rendering<\/a> varies from one email client to another.<\/p>\n\n

Send a test.<\/strong> Send it to yourself and a colleague before sending it to the whole list.<\/p>\n\n

\"Infographic<\/figure>\n\n

Common mistakes<\/h2>\n\n

Skipping the wireframe.<\/strong> If the structure doesn’t work, no color will save it.<\/p>\n\n

Using placeholder text.<\/strong> Later, the real text doesn’t fit or throws the design off.<\/p>\n\n

Designing for desktop only.<\/strong> Mobile is where a large share of websites and emails are viewed.<\/p>\n\n

Mistaking it for the finished product.<\/strong> Looking good doesn’t mean it works. Test it before launching it.<\/p>\n\n

Using templates without checking the license.<\/strong> Some only allow personal use.<\/p>\n\n

How Mailrelay helps you<\/h2>\n\n

The Mailrelay editor lets you design your emails by dragging blocks onto templates, check the preview and send yourself a test before the campaign. That way you review the whole design without writing any code.<\/p>\n\n

The free account includes up to 80,000 emails a month and 20,000 contacts, with human support by chat, ticket and phone.<\/p>\n\n

\n

Send your newsletters with Mailrelay<\/strong><\/p>\n\n\n\n

Up to 80,000 emails a month and 20,000 contacts for free, with human support on every plan.<\/p>\n\n\n\n

\n
Try Mailrelay for free<\/a><\/div>\n<\/div>\n<\/div><\/div>\n\n

Frequently Asked Questions<\/h2>\n\n

These are the most common questions about visual mockups.<\/p>\n\n

What is a mockup in a nutshell?<\/h3>\n\n

A realistic image of how a design will look before it is produced.<\/p>\n\n

What is the difference between a mockup and a wireframe?<\/h3>\n\n

A wireframe is an outline of the structure, without colors or images. A mockup shows the final look.<\/p>\n\n

What is the difference between a mockup and a prototype?<\/h3>\n\n

A mockup is static. A prototype lets you click and navigate to test how it’s used.<\/p>\n\n

How do you say mockup in Spanish?<\/h3>\n\n

Maqueta or boceto visual, although in design the English term is almost always used.<\/p>\n\n

Can you make a mockup for free?<\/h3>\n\n

Yes. Tools like Figma, Penpot or Canva have free plans, and there are product templates at no cost.<\/p>\n\n

Related terms<\/h2>\n\n