A mockup or mockup is a digital design of a website and / or application. Mockups are used in the initial design stage to visualize ideas and concepts in the context of web design and include the navigation structure, site, and design items 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 items are already linked with simple functions.
Comparison: mockup, wireframe, prototype
The terms mockup, wireframe, and prototype are often considered the same in practice, however, they are in fact three different types of design renderings as part of rapid prototyping and are used at different stages of design prior to programming. real.
A wireframe is the simplest form of template and does not include any colors, fonts, images or graphics, unlike a mockup. This first sketch design can be created by hand or on the PC. Functionality is absolutely absent on this screen. Thus, wireframes are considered low fidelity designs. [1]
The models can be built on any existing structure and continue to develop it. By integrating color, typography, images and graphics, they come very close to the final design and already represent it. Thus, they are preferable for presentation purposes.
A mockup classic is static. However, modern layout tools allow the incorporation of simple functions such as links, so that depending on the complexity, they can be categorized as medium to high fidelity designs and border on prototypes.
Complex multi-part mockups can be used as the basis for prototypes which, depending on their style, can also be considered medium to high fidelity designs. Unlike the classic static model, the prototypes are always interactive and contain most of the functions of the planned website or application.
Uses and benefits of mockups
The mockups are used in the initial stage of web and app development for presentation and quality control. They serve to coordinate with the client the ideas and requirements of the user interface in terms of basic functions, navigation, content architecture and design. Who gets the final contract is often decided based on the mockup.
Mockups are used for usability testing without much prior programming effort. Therefore, any problem is detected before the prototype is created and the risk that a concept will have to be completely revised in the middle of the development stage is reduced. In general, mockups can help save time and money in an online project.
Examples
Easy image editing and presentation software like PowerPoint is sometimes used for mockups, but compared to mockup tools they are quite slow. Specialized tools provide pre-made items and even the opportunity to test simple interaction processes.
Examples of website mockup tools:
Examples of simulation tools for apps:
Advantages of usability
Since mockups are well suited for usability testing due to their medium-high level of detail, they can provide information important about user experience and help make the most of user experience design early in the design stage, especially in the fields of aesthetics and usability.
Web Links
