MOCK-UPS & PROTOTYPES
A design process typically consists of several phases that together lead to a finished product. Mock-ups and prototypes are key elements i this one process. Mock-ups is a visual presentation of the final design, without it yet being used or interacted with, where prototypes are an interactive version of the design. It is relevant to see the elements in conjunction with other steps, to understand the design process.
THE DESIGN PROCESS
When apps, websites or digital systems are to be designed, three general phases are often worked on: wireframes, mock-ups and prototypes. Each phase has its own purpose, but works best as a unified process because they have different advantages. During all three phases, the design can be tested by customers and users, where it is most typical to user test prototypes, because the design here is closest to the final product.
WIREFRAMES
Typish starts design processn with wireframes. It is they basic raw sketches of that product that is designed. It is used to illustrate thoughts, communicate, generate ideas and to investigate navigation and where different elements should be placed. With wireframes relationships there not for small details, style and direction, but it is still an important phase, because this is where the basic structure of the product is determined. That called also for low fidelity, because there is low level of detail with focus on structure, layout and concept rather than visual elements. Wireframes can be prepared both analogically and digitally, and form so the foundation for the further design process.
MOCK-UPS
With the foundation in place, the next stage is typically to design mock-ups. Here you can find out how the product should look with details, style and direction, without it being completely developed. Such a mock-up is called high fidelity, because here the design is made as close to the end product as possible, and it includes visual elements such as illustrations, typography and colors.
In fact, 94% of a first impression is about design. Therefore, mock-ups are an important phase in the design process, because this is where the design itself is prepared.
Mock-ups provide a detailed and realistic picture of what the end product will look like. It is through user testing of mock-ups that potential challenges for users can be quickly identified before time and money are invested in product development. Mock-ups provide the team behind a clear and detailed basis to work from because it shows in detail what needs to be developed. At the same time, there is an economic advantage in changing the mock-up phase than in the already developed product, and this makes mock-ups an absolutely crucial tool in the design process and an important prerequisite for a further effective development process.
When working with design and mock-ups early in the process, it is ensured that the design will not only be a final finish, but an active part of product development. This gives significantly greater value on the bottom line. In fact, a study shows that 2 out of 5 companies lose the added value that design can create, precisely because the first think design in at the very end or don't do it at all.
PROTOTYPES
Before a product is developed, it is most typical to test the prototype on customers or end users. The prototype is an interactive mock-up where users can click around the various drawings. The purpose is to test the user experience and identify improvements before investing time and resources on the development of the product.
Prototypes can be tested on both computer, tablet and mobile, and they give users a realistic sense of the product's functions and navigations than the static images from mock-ups can. In the prototype phase, hover effects, animations and other dynamic elements can be added, which illustrate how the interactions will work in practice.
THE MEANING OF THE USER TEST
A study shows that 90% of all users have opted out of an app due to poor performance. It underlines how crucial it is for companies to user test the product early before sending it to development. When real users are allowed to test the product, errors, challenges or inappropriate flows can be detected. User testing thus provides a solid data base to make better decisions and ensure that the final product actually works as users expect.
By working with wireframes, mock-ups and prototypes, a design process is achieved where users and customers are thought of from the start – and where user testing naturally becomes the next step. Read more below about how user test can improve both quality and decision-making processes in design.