Diseño UX | Diferencias entre Wireframe, Prototype y Mockup

Los wireframes, prototipos y maquetas (Mockups) constituyen tres de los primeros pasos de la secuencia de desarrollo de un producto. Ofrecen a los diseñadores de UX (y UI) la oportunidad de realizar rondas de pruebas con usuarios en cada fase de su proceso de diseño.

Estas pruebas ayudan a los diseñadores a determinar si su producto es adecuado para su público objetivo, cómo navegan exactamente los usuarios y qué valor extraen de su producto, con qué fin y si cumple las expectativas. Realizar pruebas de usuario en cada iteración del diseño, desde el primer esbozo de baja fidelidad hasta el prototipo de alta fidelidad, dará como resultado un producto sólido y completo que aporte valor a los usuarios. Esta es la base de un buen diseño UX.

Aunque su fidelidad -el nivel de detalle y realismo en el diseño- se entiende más comúnmente como la principal distinción entre ellos, son fundamentalmente diferentes y poseen características únicas en cuanto a su diseño y función en el proceso de diseño de UX.

El wireframe es como un esqueleto en una persona, es la estructura básica del producto. El prototipo es el cerebro, el órgano que decide cómo debe moverse el ser humano e interactuar con quienes le rodean. La maqueta es la piel, el pelo y los rasgos faciales, o la marca, que hacen que el ser humano sea reconocible al instante.

¿Qué es un wireframe?

Un wireframe es una representación básica, de baja fidelidad, del concepto inicial del producto, que contiene los elementos esenciales que aparecerían en una página web o una aplicación.

Los wireframes proporcionan un esquema claro de la estructura de la página, el diseño, la arquitectura de la información y la dirección general. Tradicionalmente, un wireframe sólo utiliza negro, blanco y gris, y puede dibujarse a mano o crearse digitalmente.

Los wireframes suelen utilizar escalas de grises con el propósito de que el diseño visual o gráfico no pueda distraer la discusión de lo realmente importante en un wireframe: el concepto, la estructura y los componentes básicos del diseño.

Los wireframes convierten ideas abstractas en conceptos tangibles, por lo que resultan muy útiles en las fases iniciales del proceso de diseño del producto. Más que centrarse en el aspecto del producto, el objetivo principal de un wireframe es resolver problemas.

Realizar pruebas con los usuarios durante la fase de wireframe es increíblemente útil para el diseñador, ya que le permite recibir comentarios sinceros que le ayudan a establecer el concepto del producto. A menudo, cuando un producto parece demasiado pulido, el usuario tiene una mayor conciencia del esfuerzo y los recursos que se han empleado en su creación, lo que hace menos probable que proporcione comentarios sinceros. Sin las distracciones del color y la tipografía, los wireframes facilitan una aportación fiable y abierta del usuario.

Por ejemplo, en los wireframes digitales (para aplicaciones móviles o sitios web) algunos diseñadores utilizan Lorem Ipsum, un texto pseudolatino que actúa como marcador de contenido futuro. A continuación, plantearán a los usuarios preguntas como «¿qué esperas que se escriba aquí?». En el caso de los wireframes en papel, preguntas como «¿qué esperaría que ocurriera si pulsara este botón?» son igualmente esclarecedoras.

Con este tipo de preguntas, el diseñador puede iterar sobre la base de lo que resulta intuitivo para el usuario, en lugar de lo que resulta intuitivo para él. Consulta aquí nuestra guía para crear tu primer wireframe o echa un vistazo al siguiente tutorial.

¿Qué es un prototipo?

El prototipo es el siguiente paso en el proceso de diseño de un producto, después del wireframe, y consiste en un modelo funcional de una aplicación o una página web. La creación de prototipos permite a los diseñadores probar el recorrido del usuario, reflexionar sobre cómo el usuario podría moverse entre diferentes acciones o tareas para lograr determinados resultados y detectar cualquier problema potencial con el flujo de interacción.

Al igual que un wireframe, un prototipo puede ser de baja o alta fidelidad.

• Elementales en su diseño, los prototipos de baja fidelidad pueden ser bocetos estáticos en papel o dibujos digitales o páginas web interactivas en las que se puede hacer clic. Los prototipos de baja fidelidad son vitales para generar comentarios de los usuarios, ya que les permiten probar el flujo de interacción sin un gran gasto de tiempo o recursos.
• Por otro lado, los prototipos de alta fidelidad incluyen color, texto y otros contenidos, y a menudo adoptan la forma de un sitio web o una aplicación totalmente funcional y codificada. Es más probable que un prototipo de alta fidelidad se utilice en las últimas fases del proceso de diseño. Dado que tanto los prototipos de baja como de alta fidelidad permiten al usuario calibrar cómo podría utilizarse el producto en el día a día, son fundamentales para perfeccionar la usabilidad del producto.

¿Qué es una Maqueta o Mockup?

Una maqueta es una simulación estática de alta fidelidad del producto acabado que ofrece el aspecto visual del diseño del producto, incluidos la tipografía, la iconografía, el color y el estilo general.

Mientras que un prototipo se centra en el diseño de interacción, las maquetas o mockups establecen cómo interpretarán los usuarios la marca a través de su identidad visual. Durante la fase de maqueta, los diseñadores de interfaz de usuario también tienen la tarea de crear una continuidad estilística entre las interfaces de escritorio y móvil.

Durante la fase de maqueta, los diseñadores deberían haber respondido a muchas de las preguntas que surgieron en las fases de wireframing y prototipado del proceso de diseño del producto. Esto no quiere decir que las maquetas no generen comentarios útiles de los usuarios.

Ofrecen una perspectiva más realista a las partes interesadas y pueden ayudar a revelar problemas que no eran tan evidentes en las fases de wireframing y prototipado, como conflictos de color o problemas tipográficos. Con un espectáculo muy detallado de narración visual delante de ellos, los usuarios no necesitan confiar tanto en su imaginación.

En resumen, las maquetas o mockups son la forma más eficaz de explorar la identidad visual de la marca antes de que las decisiones de diseño se tomen de forma permanente con el código.