Wireframes, mockups and prototype
I worked conceptualizing a site development: wireframes, mockups and prototyping.
These 3 different words are so important and vital to start any digital project. Not always used the 3, many of the projects I’ve worked on often use wireframes and mockups prototyped regardless of.
These 3 are very unknown and many customers, developers, designers and users do not understand the difference between the three. So I explain what they do.
WIREFRAMES
What is a wireframe?
A wireframe is a scheme or flat screen representing the skeleton or visual structure. Are considered low fidelity (lo-fi), the scheme does not have to be the final design. (Important for the client)
The goal of a wireframe is:
- What: sort the contents
- Where: hierarchy structure information
- How: basic display user-interface interaction
The wireframes are the backbone of the design.
They are created quickly and with a very simplified aesthetic visualization, straight, square lines, white, black and grey.
There are numerous tools to develop them. But in my case I usually use:
Using wireframes
The wireframes are used for documentation. In fact, a lot of clients require this documentation for their customers and the development and art’s teams.
The wireframes are static images and are always accompanied by written notes explaining the interaction. Usually, add functional documentation.
They can also be used as internal sketches or skits for a computer, for example, if a developer asks me how I should do something, I make a sketch paper creating a wireframe.
MOCKUP
What is a mockup?
A mockup is a medium-fidelity model and includes some visual design.
- Represents the structure of the information
- Displays the content
- Demonstrates the basic features of a static model
- Let’s review the actual visual part of the project
Using mockups
I use it in all the projects because they are more visually and allow me to understand better the project.
PROTOTYPING
What is a prototype?
Prototyping is the representation of high fidelity (hi-fi) of a final product and simulates the interaction of the user interface. The design.
We need a designer that translated what we have defined in the wireframes with design tools like Sketch, Photoshop, Illustrator etc ..
.
Prototyping allows us to:
- Testing interactions very similar to the final product
- See the real content
The prototype is a simulation. For this, I usually use InVisio: a tool that allows you to upload the prototypes (designs) and link interactions.
Using prototyping
For user tests.
Interaction simulation is so real, allows to check the interface usability.
Prototyping is expensive and requires design development and UX expert and testing.
Summary:
| Design fidelity | Use | Tools | |
| WIREFRAME | Low fi | Documentation | Mockflow, mockup Balsamiq |
| MOCKUP | Mid fi | Documentation and client reviews. | Mockflow, mockup Balsamiq |
| PROTOTYPING | Hi-fi | User testing | Sketch, Photoshop, InVision |
