Mockup

Definition

Typically Hi-Fi Mockups, or prototypes, reflect the design options for color schemes, layouts, typography, iconography, navigation visuals, and the overall atmosphere of the product. In addition to setting aside time to answer important visual questions, these models have other benefits: Realistic perspective – It is one thing for the visual decisions to be made, but it is another to see them all working together in a close to the final way. Models can help reveal problems that are not so apparent on paper (for example, collisions of colors, or minor details that go unnoticed). Early revisions – It is easier to make revisions on a mockup than in the last stages of coding (as long as the mockup itself is not coded). During the design process, the models come at the end of the low-fidelity phase and the beginning of the high-fidelity phase. This could mean different things for different methods. For example, a mockup could be made immediately after the wireframe, or it could be postponed until after some lo-fi prototyping.

Types of Mockups

Graphic design software

Due to the emphasis on the visual, some designers prefer to build mockups in the graphic design software they are most familiar with. Software like Photoshop is built to create pixelated images. The drawback is that these programs do not allow us to add interactions to the mockups (that’s why we decided to integrate them with Photoshop and Sketch). The other downside is that you need to know how to use the software, which is often complex since it is designed for more visual manipulation than simple mockup creation. Unless your mockups require the highest fidelity possible, graphic design software can be overkill.

Mockup and wireframe applications