The main advantage of using prototypes in UX or User Experience is that, They help to visually capture the business objectives and how they align with the expectations and needs of the users and if they are satisfied through the designed digital product.
The prototypes in UX they also help in the early phases of the design process to be tested with users.
It must be taken into account that modifying a prototype has a lower cost than modifying the digital product once it has been uploaded to production, which is why it is also an advantage in cost savings within the development process.
The objective of making wireframes to design screens is to convey the key concepts that give meaning to them according to the user tasks that must satisfy the project’s objectives.
The use of Wireframes in User Experience design It also has advantages for the customer. Carry out wireframes on paper, helps the client already have a vision of part of the project and can provide us with their feedback from the early stages. Also, it provides peace of mind to the client and helps him to be involved in decision making.
What is a Wireframe
Wireframes are schematizations of the interface. They represent the visual distribution and hierarchy of content. Through them, the interaction between the human and the machine is understood and represented, as well as how the system and each of the elements that compose it should respond.
Types of Wireframes and Prototypes
There are different types of prototypes. Among the most used are the following:
1. Sketches
Sketches are prototypes drawn on paper carried out in the early phases of product design. They are fast, simple and can be done by the , by developers or any other Stakeholder. They serve to convey ideas and concepts in a fresh and cheap way.
The Sketch is done before the Wireframe and in them, you can define the architecture of the web, the definition of the interaction and navigation flows on the site.
2.Storyboard
Storyboarding is a methodology that consists of the representation of a story through a set of sketches or Sketches.
It looks like a prototype, where a series of drawn screens are collected to understand the steps that a user must follow in the execution of a task. It provides an overview of the project, the navigation scheme, and shows how the process unfolds.
3. Wireframes
Wireframes are flat drawings without any type of interaction that can be made on paper or digitally. This type of document includes a higher level of detail in which the content, the calls to action and the situation of each of the elements can already be viewed.
Wireframes are a transversal communication tool between different teams: design, product and development, fundamentally.
It is the schematization of the interface. Through them, the interaction between human and machine is understood and represented, as well as how the system and each of the elements that compose it should respond. They must include the elements that should facilitate the performance of the user tasks that are the ones that have to satisfy the objectives of the project.
Wireframes can be classified according to the tool with which they have been made:
3.1 Wireframes on paper
They are not the same as Sketches. They have a higher level of detail. They are made with templates of the devices for which they are being designed and have a base grid in which the elements that make it up are positioned. They are used above all in collaborative design, where different roles participate in the design of the digital product.
3.2 Wireframes in digital
There are numerous tools to make them such as: Axure, Adobe XD, Sketch, Omnigraffle, draw.io, etc.
3.3 Wireframes in HTML
If the UX designer has sufficient skill and knowledge in HTML and CSS languages, they can be done without any problem as long as the rule of color, shape and typography is maintained.
It should be noted that the Axure RP8 tool allows you to create and export wireframes in HTML and CSS.
4. Prototypes
An interactive prototype is a more advanced version of Wirefames. An application is usually used to generate the necessary interactions and with a medium or high fidelity in terms of visual design. Interactive prototypes are clickable and responsive.
This type of prototypes are designed in an advanced phase of the product when the functionality is clear and well defined. Interactive prototypes must be as faithful as possible to the final product since in the testing with users they will give us much more reliable data.
Facebook Comments
Disqus