Mockup: what it is and how to use it in web design

Translated into Spanish, mockup means model or prototype… How can this concept be applied to web design? What exactly does this tool consist of, and how can it help in the development of websites for the internet? Here are the main keys to understanding what is meant when referring to a mockup, the types that exist, and how they are created.

The development and web design of websites has evolved very rapidly in recent years. There are more and more strategies and tools to speed up work, and one of the most widely used today is the so-called mockup. What exactly does this concept consist of? Considering that its translation is something like prototype or sample, a model or mockup, you can already get an idea of what a mockup is…

Definition of mockup

Based on the above, what would be the closest definition of what a mockup is and how it can be used in the field of web development? It could be said that these are base templates that allow customization. You can change the company or header name, the company logo, images, texts, etc. This opens the door for people who are not programming specialists to create websites for the internet.

When are these prototypes or mockups useful?

• Presenting projects to clients.
• Showing a team the product or service being worked on.

Mockups are, after all, compositions of images and text that, based on a template, allow proposals to be recreated that could later become real projects in execution. While in the past they were drawn by hand by illustrators specialized in this task, today they are created using specific software programs. It is a tool with great potential that streamlines processes in certain areas of a business, especially in marketing and communication.

What is a mockup for?

The purpose of a mockup comes down to two key ideas:

• Speeding up website development,
• Achieving specific designs without having to invest too much time,

How is this achieved? Through the development of prototypes or mockups that gradually define the features required for a specific project.

The functionalities of mockups are several:

1. They allow ideas to be developed that will later be translated into designs.
2. They facilitate the creation of templates that can be used as a visual presentation of projects to be presented.
3. They serve as a catalog or showcase to promote a company’s brand and products or services.
4. They make it easier to test initiatives that later must be turned into real, functional work.

Types of mockups

Users can find different types of mockups, allowing them to choose the one that is most useful depending on their goals or priorities.

Device mockups

Graphic representations of the screens of electronic devices commonly used, from desktop computers to laptops, tablets, or smartphones. This is useful when designing responsive websites that must adapt properly to these formats.

They are especially used in marketing when offering app design and development or in web development projects.

Branding mockups

For brands, this is another way to save time and effort. A prototype of corporate materials is created, from folders to pens, envelopes, business cards, and all kinds of merchandise a brand may require. The logo, company name, or information included can be changed easily.

Branding mockups can also include designs for mugs, plates, caps, wallets, and all kinds of objects. The idea is to work from a base prototype that is later customized.

Packaging mockups

Similar to the previous case… This type generates a standard design for boxes, envelopes, packages, plastic or paper bags, and anything used to wrap products. It is especially important in e-commerce, where image also sells and brands need to stay competitive.

Print mockups

In this case, it is aimed at products a company wants to sell that will be printed. This can include product catalogs, corporate magazines, postcards, banners, flyers, and all kinds of printed material. Design and layout software is used to create them.

Product mockups

A highly realistic digital representation of specific products. Examples include t-shirts with company logos or slogans, or how a logo looks on objects such as coffee mugs, yogurt containers, or gift boxes.

Social media mockup

In this case, social media profiles are recreated and fully customized with the brand’s content. This includes bio information, types of content to be published, photos, logos… all across as many social networks as possible to closely match the needs of a specific brand.

How to create a mockup

To create mockups, several key tools are needed:

1. Design and layout software, from the well-known Photoshop to online tools such as Canva.
2. Access to images. Ideally, stock photo libraries should be used to obtain all kinds of visuals depending on the project being presented.
3. Specialized professionals in design and layout, with strong knowledge of web and social media environments.

This methodology is especially important in departments focused on improving customer experience. After all, it is about understanding how to present products and services to the target audience. That is why the Master in UX & Customer Experience at EAE Barcelona includes references to this system of mockups or prototypes.

Examples of mockups

How does all this information about the definition of mockups and their different types translate into real-world examples? Here are some ideas:

• Fast-food packaging such as cups and fries containers: this would be a case of packaging or product mockups.
• T-shirts with characters from popular TV series or iconic phrases: companies that sell themed t-shirts work from a base template, which is a mockup.
• Packaging used by large groups such as Inditex for online orders, including envelopes, tissue paper, and sealing stickers: another clear example of a mockup.