Para especificar como es el interfaz y que lo valide el usuario se usan:

• Wireframes
• Mockups
• Prototipos

Su propósito es representar la estructura básica y disposición de los elementos en una interfaz (esqueleto). Tiene un nivel de detalle bajo. No incluye colores, tipografías ni imágenes finales; normalmente se usan formas geométricas y texto genérico (“Lorem ipsum”). El objetivo es mostrar la jerarquía de la información.Definir qué elementos van y dónde (botones, menús, campos, etc.). Su aspecto es muy esquemático, parecido a un boceto en blanco y negro.

Su propósito es mostrar el aspecto visual casi final de la interfaz. Tiene un nivel de detalle alto. Incluye colores, tipografías, iconos, imágenes reales o muy parecidas a las definitivas. El objetivo es validar la apariencia visual. Permitir que los clientes se imaginen cómo será la versión final. Su aspecto es realista, pero sin funcionalidad (a diferencia de un prototipo).

Su propósito es representar una versión interactiva y funcional (aunque no definitiva) del producto, que permita simular la experiencia de uso. Tiene un nivel de detalle variable (baja, media o alta fidelidad), pero siempre incorpora interactividad: navegación entre pantallas, botones clicables, formularios simulados, etc. El objetivo es validar cómo interactúa el usuario con la interfaz, detectar problemas de usabilidad antes de la implementación real y comunicar de manera clara al equipo técnico el comportamiento esperado del sistema. Su aspecto puede ser similar al mockup en lo visual o al Wireframe, pero con la diferencia de que añade interacción para probar el flujo de uso.

• https://pencil.evolus.vn/Pencil Project: Opensource
• Penpot: Opensource
• Figma: Plan gratuito