Mockup

A mockup is a digital design of a website and / or app. Mockups are used in the early design phase for visualizing ideas and concepts in the context of web design and include navigation structure, site and design elements in detail. Mockups can be templates produced with image editing programs without functionality or designs that are created with special mockup tools and where control elements are already linked with simple functions.

Comparison: Mockup, wireframe, prototype

The terms mockup, wireframe and prototype are often considered the same thing in practice, however they are actually three different types of design representations as part of the rapid prototyping and are used in different stages of the design before the actual programming.

A wireframe is the simplest form of template and does not includes any colors, typography, images or graphics, unlike a mockup. This first sketch design can be created by hand or on the computer. Functionality is completely missing in this display. Therefore wireframes are considered low-fidelity designs.

Mockups can build on the structure of any existing wireframe and further develop it. By integrating color, typography, images and graphics they come very close to the final design and already depict it. Therefore, they are preferable for presentation purposes.

A classic Mockup is static. However, modern mockup tools allow the integration of simple functions such as links so that depending on the complexity, they can be classified as medium- to high-fidelity designs and border on prototypes.

Complex, multi-part mockups can be used as a basis for prototypes that depending on their style can also be considered medium- to high-fidelity designs. In contrast to the classic static mockup, prototypes are always interactive and contain most of the functions of the planned website or app.

Uses and benefits of mockups

Mockups are used in the early development phase of websites and apps for presentation and quality control. They serve to coordinate ideas and requirements for the user interface with respect to basic functions, navigation, content architecture and design with the customer. Who gets the final contract is often decided based on the mockup.

Mockups are used for usability tests without a large programming effort being required in advance. Thus, any problems are detected early, before creating the prototype and it reduces the risk that a concept has to be completely revised in the middle of the development phase. Overall, mockups can therefore contribute to time and cost savings for an online project.

Examples

Easy image editing and presentation software such as PowerPoint is sometimes used for mockups, but compared to mockup tools are rather time-consuming. Specialized tools provide prefabricated elements and even the possibility of testing simple interaction processes.

Sample mockup tools for websites:

• Balsamiq
• Auxure
• Pencil

Sample mockup tools for Apps:

• Pop
• InstaMockup
• FrameAPP

Benefits of usability

Since mockups are well suited for usability tests due to their medium to high level of detail, they can provide important insights into the user experience and help to optimize the user experience design at an early stage of the design phase, particularly in the fields of aesthetics and ease of use.

Web Links

• Wireframing, Prototyping, Mockuping - What`s the Difference?
• Wireframing