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.
3D Mockup of the Website eology.net 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.
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?)
Example of a wireframe
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
Illustration of a mockup
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.
CPO stands for cost per order and is part of online marketing, among other things. The CPO is a subsection of the cost per action and describes all costs incurred for a sale, order or lead. The order costs include all costs incurred for advertising measures, subscriptions and mandatory costs for shipping. ... Continue reading
CPI is the abbreviation for cost per impression. It is a billing method for advertising campaigns, where costs are only incurred when the user sees an ad on the accessed website. Learn more about it here! ... Continue reading