Mockup, Wireframe

  • Actualizado: 18 agosto 2023
  • 1 minutos
Artículo escrito por

Origen del "wireframe": término utilizado por Jakob Nielsen en 1993 en su libro Usability Engineering para referirse al diseño de la parte gráfica de la interfaz humano-máquina.

Los wireframes y mockups son herramientas que permiten modelar la interfaz de un producto y el recorrido del usuario.

El wireframe (literalmente: "estructura de alambre") es una descripción esquemática. Describe las pantallas de una aplicación de manera concisa; una especie de esqueleto que prefigura la lógica general del diseño de cada pantalla y sus secuencias.

El mockup es un prototipo más avanzado que evoca de manera fiel la apariencia de la interfaz: si el wireframe es el esqueleto de una interfaz, el mockup es la "piel".

Estas herramientas permiten materializar de manera precisa los comportamientos que se esperan en lo que respecta a la interfaz de uso del producto. Complementan así otros elementos de especificaciones (elementos técnicos, User Stories y pruebas de aceptación asociadas) que pueden ir más allá en la descripción, en particular especificando las reglas de funcionamiento de la empresa que no se reflejan en la interfaz de usuario.

Estos elementos son creados, tradicionalmente, por un diseñador. Se guían por un requisito funcional más o menos preciso, en función de la madurez de la necesidad. Sin embargo, en función de sus habilidades de diseño, el Product Owner también puede encargarse de estos elementos si tiene una idea precisa de la interfaz esperada. Pero cuidado: el diseño de la experiencia de usuario es una disciplina como otra cualquiera, y la creación de incluso un wireframe por parte de un Product Owner puede sesgar el trabajo creativo de un diseñador.

Algunos mockups también pueden realizarse en forma de prototipos que simulan las funcionalidades: en este caso, se tratan de maquetas. Herramientas* permiten prototipar rápidamente interfaces para realizar pruebas con usuarios. Esto valida ciertas hipótesis a un costo menor antes de involucrar desarrollos reales.

*Un consejo de Thiga sobre herramientas de maquetación. Nos gustan:

  • Balsamiq Mockups
  • Axure
  • Sketch
  • Omnigraffle
  • Proto.io
Para obtener más información: Descargue nuestro libro sobre Agile Product Management
ES-A_Product_Letter

A Product Letter: la newsletter de producto que te hará pensar

El primer miércoles no es un día cualquiera. Es el día en el que sale a la luz un tema de producto desmigajado y reflexionado desde una mirada crítica y humana.