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.
To create a demonstration model for you or your customer, you have several options.
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.
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.
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:
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:
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.
We have summarized some examples of free tools for wireframes, mockups and prototypes for you.
|Moqup||Web application||yes||free of charge||Wireframe Mockup Prototype|
|Balsamiq||Web application Desktop version||yes||free for 30 days then license from 9$||Mockup Prototype|
|Wireframe.cc||Web application||no||free of charge / Premium version available||Wireframe|
|Pencil||Desktop application||no||free of charge||Mockup Prototype|
|Frame Box||Web application||yes||free of charge||Mockup|
|Mockingbird||Web application||Yes||Free of charge Premium version available||Wireframe Mockup|
You want to learn more about exciting topics?