Modeling: Wireframe, Mockup and prototype
In this article, we explain what is the mock-up of a software interface as well as the various stages which compose it.
In computer jargon, we often hear about "wireframe", "mockup" and "prototype".
All of these terms refer to steps in a user interface (UI) design process.
1st step: The Wireframe
The basis of a good graphical interface is to make sketches that will serve as plans for the graphic designers who will take over to make something beautiful and attractive. Because the wireframe is the least successful version of the modeling process because it consists of creating an application skeleton often represented by black and white lines and rectangles. This is a so-called "low" fidelity model.
It is indeed necessary to define the zones and the components of the future interfaces which will compose an application, a site or any other software having a graphical interface with which the user will interact. On the one hand to make sure that we don't forget any functionality, but also to make sure that the whole is coherent. This is an essential step to optimize the user experience.
The fact of making simple diagrams makes it possible to start again quickly to improve the layout of the different elements because there is no need to worry about cosmetic details at this stage.
2nd step: The mock-up (the model)
The mockup (or model) takes the structure sketched in the wireframe to make it something more aesthetic. It will allow you to view the first versions of the graphic design. Just like the wireframe, the mockup is static, it is an image that is not clickable.
It is during this stage that decisions on graphic details such as typography, colors to use and the visual style of the interface will be made.
The model allows to identify some missing details or inconsistencies regarding the incompatibility of certain colors or typographies.
3rd step: The prototype
The prototype is the most faithful representation of the final product. This is a step that is intended to simulate the user interface (UI). The prototype is a clickable version of the model in which it is possible to test the interactions that the users of your application will have and to verify in action your user experience (UX) hypotheses.
You can therefore check the progression and the sequence of screens even before starting the developments.
Conclusion
These different stages are too often set aside because it is thought to save time and money by attacking the developments immediately. The layout is however crucial to correct errors and omissions as quickly as possible. It is less costly to make adjustments before development than during.
Asking that the layout be done beforehand means ensuring from the start the final quality of the graphical interface which, let's not forget, is an essential component for interacting with our application.