Mockup, Wireframe

read time

1 min

Glosario de Producto - Mockup - Wireframe

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
 
 

Publicado el 18 ago 2023

Actualizado el 01 oct 2024

clipboardCopiar el enlace
Escrito por
Hugo Geissmann
Hugo Geissmann Hugo, co-fondateur et PDG de Thiga, débute chez ATOS Origin avant de rejoindre Xebia. Créateur de Xebia Studio, il a lancé Thiga en 2013 avec Alexandre pour promouvoir le Product Management en France. En une décennie, Hugo a marqué la communauté Produit française en lançant la Product Conference et contribuant au premier "contrat agile". Investisseur dans des startups comme Tabesto, Ottho, RenovationMan, il est un acteur clé du secteur tech participant à des ouvrages sur le Product Management.

Próximos eventos

LPCx MAD: Product Management & Product Design

calendar

24 abril 2024

Apúntate

La Product Conf Madrid 2024

calendar

17 mayo 2024

Apúntate

Filles_ordinateur

¿Quieres compartir con el mundo tu pasión por los temas de producto?

Cada mes, más de 20.000 entusiastas del producto digital visitan nuestro media. Comentarios, opiniones controvertidas... ¡compártenos eso que tienes en mente!

 

Contactar con la redacción