A mockup generally refers to a demonstration model. It represents a mockup, sometimes even a complete product. The mockup illustrates the design or the functions of the product to your customer.
You can use
a mockup very well to visualize your ideas. From this you can develop your individual design.

What are the different types of mockups?

To create a demonstration model for you or your customer, you have several options.

(Clickable) Mockup

A mockup represents the content and functionality of your project in static form. You work out the visual elements of your website so far that the representation already resembles the final product. However, you can expand your mockup by, for example, already integrating the menu bar and the footer and making them clickable.

3D Mockup

A 3D mockup is used for the representation of products. Tools such as the Creative Cloud from Adobe already offer a pre-selection in the library, which only needs to be individualized. In agencies, 3D mockups are often used to show the customer how his website can look on different devices. You also know 3D mockups from the area of online shopping.

The image shows a 3D mockup of the website The mockup is displayed on a laptop. A person is blurred in front of the laptop. The laptop is standing on a table. There are other documents on the table in the background.
3D Mockup of the Website on a Laptop

The difference between wireframe, mockup & prototype in web design

In web design, your website usually goes through several conceptual phases. It typically starts with a simplified representation of your design and develops into a clickable prototype of your website.


A wireframe is a simplified form of the later design of the website, and therefore often only a sketchy design. Regularly it therefore does not contain any colors, images, graphics or typographies. Within the framework of this representation, the basic information is marked out. A wireframe contains:

The graphic shows a representation of a wireframe with browser line, sample text, headline and product tiles.
Example of a wireframe


A mockup is usually created on the basis of a wireframe and is much more detailed. Often a mockup is already sufficient to visualize projects for later programming. A mockup already has:

The picture shows the mockup of the complete start page of
Illustration of a mockup


A prototype is often only used for very complex projects. The creation is very complex, because they are always interactive and already contain all the functions of the planned website or app. Therefore, the following features are integrated into a prototype:

Your advantage when creating a mockup is that your projects can be visualized. For the demonstration model, you often do not have a lot of programming effort in advance. In addition, a usability test can be performed on the basis of the mockup. In this way, you can identify any problems at an early stage and adapt your design accordingly. This minimizes your risk of having to revise your concept in the middle of the development phase.

Which tools are available for wireframes, mockups and prototypes?

We have summarized some examples of free tools for wireframes, mockups and prototypes for you.

MoqupWeb applicationyesfree of chargeWireframe Mockup Prototype  
BalsamiqWeb application Desktop versionyesfree for 30 days then license from 9$  Mockup Prototype  
Wireframe.ccWeb applicationnofree of charge / Premium version available  Wireframe
PencilDesktop applicationnofree of chargeMockup Prototype  
Frame BoxWeb applicationyesfree of chargeMockup  
MockingbirdWeb applicationYesFree of charge Premium version availableWireframe Mockup  

Just contact us

  +49 9381 5829000