0
When starting a project with a team of developers, all planning documentation should be concluded and signed. It is not always possible to differentiate the stages and particular elements. Confusion reigns supreme and it is very easy to end up with something other than what was intended, especially when you have to strike a balance between saving money and effectivity.
This article will describe the initial stages of design creation, the building of wireframe, mockup, and prototype. We outline the discrepancies between them, the particular cases they should be applied, and in what ways they can be created.
What is described by the terms wireframe, mockup, prototype
Wireframe
It is the first step, the foundation necessary to start the creation of any product. Wireframe builds the primary representation of the design serving particular goals. It can be compared with the creation of the structural arrangement of the building and calculation of the stress load.
The main task of this is to define the meaningful elements of the future interface, the general flow of the visitors’ behavior. No need to pay attention to elements or colours.
Basically, it can be created with the use of a pen and a sheet of paper. Making this step the least labour consuming, but still an important step in terms of planning. This can also be done with the help of designing programs.
What wireframe brings to the design
Creation speed
The basic wireframe can be done in a couple of hours or days depending on the difficulty of the product.
Collective view over the system
It gives the possibility to view the product in macro and accelerates all communication processes.
Mockup
It is the static representation of the design of the future digital product. The mockup includes graphical and functional elements that are combined according to the wireframe scheme. It includes the actual buttons, pictures, and typography, as well as navigation graphics.
The mockup is the best phase to discuss the visualization of the interface, as it brings more than the grey lines of any wireframe. It is easier to recognize for people who are not familiar with design or development.
As it includes various graphical elements, it cannot be done without the application of specialised software.
What mockup brings to the design
Detailed adjustment
With the mockup it is possible to see all meaningful elements of the product, introduce the necessary adjustments and add details.
Easy to discuss
Compared with using wireframe, when you see only grey lines, the mockup looks more vivid. The visual representation becomes easier to recognize and offer necessary changes.
Prototype
The prototype is a clickable version of the mockup that shows the user interactions at a particular device. It differs from the final product in the sense that it is not connected to the back-end databases.
During this phase, you can test the interface before final approval and development start. This will help to save you funds that you may otherwise waste on development of superfluous screens or other elements of the interface.
What prototype brings to the design
Comprehensive testing
With all interactions and animations, the user sees the product as it was intended to be. It is possible to perform A\B tests and check if the product serves the initial goals. All hidden problems and weak points are to be found in this step.
Possibilities to introduce fresh improvements
Having the clickable interface, each can see how the system works and offer some rectifications or, possibly, lacking elements or screens. It is possible to find a better route than was introduced initially.
Attract more funds to the product
The prototype can serve as a minimal product to demonstrate to possible investors how the final product is intended to operate. They can take it for a “test drive” and check whether it is worth their investment. Prototype brings better experience than the wireframe or mockup, and it costs less when compared with the entire product development.
All these steps serve to have one aim, namely the creation of the effective design that will be implemented with the code. They serve as the logical continuation of each other and have their important features for the general development course. As a result, it is not a question whether to omit some of them; it is a question of how to introduce them wisely and get the most from their use.
Find more short guidelines on the basic ideas in the design section of our blog.
17
