Mockup

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

Wireframe

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 elements that will be used (What do you want to show?)
• The structure of the website (Where should what be displayed?)
• A description and basic visualization of the control elements (How should the user move around the website?)

Mockup

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 CI (Corporate Identity)
• Typography
• Graphic elements
• Content

Prototype

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:

• Clickable elements (click dummies)
• Pixel perfect
• Desktop, tablet and mobile display
• Links and functions

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.