Wireframe, prototipo o mockup: ¿cuál es la diferencia?

Conocer la diferencia entre wireframe, prototipo o mockup es importante. En este artículo te mostramos en detalle en qué situaciones podemos utilizar cada uno.

Wireframe

¿Qué es un wireframe?

Un wireframe puede definirse como una representación de baja fidelidad del diseño de un proyecto y su principal objetivo es mostrar lo que podemos llamar el "qué", el "cómo" y el "dónde":

• Qué: cuáles son los grupos de contenido que se utilizarán;
• Dónde: cuál es la estructura de la información;
• Cómo: cómo será la visualización básica de la interfaz y cómo interactuará el usuario con ella;

Una característica destacada de los wireframes es que deben crearse en poco tiempo. Lo que más tiempo lleva en su creación es la comunicación con las personas involucradas en el proyecto para resolver algunos problemas de arquitectura y usabilidad.

Los wireframes no tienen un diseño muy elaborado y son como el esqueleto del diseño, pues contienen todas las partes importantes del proyecto final. Por eso, todos los elementos se presentan de forma básica, sin un diseño elaborado ni definido.

Cuándo debemos utilizar wireframes

• Como parte de la documentación del proyecto, junto con anotaciones;
• Para situaciones del día a día de un proyecto. Por ejemplo, si un desarrollador pregunta cómo debe hacerse algo, lo ideal es responderle con un wireframe y sus anotaciones;
• Para obtener rápidamente ideas sobre el proyecto;
• En el contexto del proceso de diseño;

Prototipo

¿Qué es un prototipo?

Muchas veces se confunde un prototipo con un wireframe. Normalmente se crean prototipos de fidelidad media y alta, mientras que el wireframe representa el proyecto final con baja fidelidad.

Los prototipos se utilizan habitualmente para:

• Simular la interacción del usuario con el proyecto;
• Probar el contenido junto con las interacciones de la interfaz;
• Probar las principales interacciones para simular el proyecto final;

Cuándo debemos utilizar un prototipo

• Para realizar pruebas con usuarios mediante la simulación de las interfaces finales;
• Para documentar el proyecto;

Mockup (o mock-up)

¿Qué es un mockup?

El mockup puede definirse como una representación estática de fidelidad media o alta de un proyecto. Normalmente, está muy cerca del diseño final del proyecto y, cuando está bien elaborado, ayuda a:

• Representar la estructura de la información;
• Visualizar el contenido de forma estática;
• Mostrar las principales funcionalidades de forma estática;
• Motivar a las personas involucradas a revisar realmente la parte visual (el diseño) del proyecto;

Cuándo debemos utilizar un mockup

• Cuando se quiera vender la idea del producto incluso antes de que esté listo;
• Para recopilar comentarios de usuarios potenciales;
• Para documentar el proyecto;

Conclusiones sobre wireframe, prototipo o mockup

Fidelidad, costo, uso y características

Lee también: La importancia de los prototipos en el desarrollo de proyectos