In web design, your website usually goes through several conceptual phases. It usually 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. Often 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, the structure of the website, a description and basic visualization of the control elements. 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, 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, 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.