Wireframes, mockups and prototype

In my last project: Transmitting Science, 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 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 its 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 a 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 mode
  • Let’s review the actual visual part of the project

Using mockups

I use in all the projects because they are more visually and allow 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 as 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 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
PROTOTIPADO Hi fi User testing Sketch, Photoshop, InVision
0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *