Quant-UX es una herramienta UX & UI open-source para la creación, tests y análisis interactivo de prototipos UI (además de generación de código HTML).

Su front está construido en Vue.js y el back en Vert.x.

La herramienta se usa desde un completo IDE web.

Capacidades de Prototipado:

Entre sus capacidades están:

• Un potente editor visual para la creación de bocetos/prototipos a partir de una paleta muy completa con diferentes estilos (Wireframe, IOS, Android, OpenUI5)

• Definición de navegación entre pantallas:

• Plantillas

• Capacidades de depuración y testing en remoto
• Creación de animaciones
• Análisis de interacciones con mapas de calor

• Análisis del User Journey:

• Grabación de interacciones
• Compartición de prototipos
• Renderizado en diferente tipo de dispositivos

Capacidades en generación de código

Además con Quant-UX estos prototipos pueden ser la base de la aplicación final, para esto:

• Generación de código en HTML y Vue:

• Validación de formatos

• Binding:

• Testing

Cómo usar Quant-UX?

Podéis usar la herramienta desde su entorno web registrándoos:

O bien descargándoos Quant-UX desde https://github.com/KlausSchaefers/quant-ux y ejecutándolo en local.

QUX-LowCode

Si Quant-UX es una herramienta open-source para el diseño y creación de interfaces de usuario, su paquete QUX-LowCode permite a través de su componente Vue QUXrenderizar el diseño visual en Vue y permitir que los desarrolladores se centren en la lógica de negocio.

Este componente ofrece:

• Renderizado sin código de los diseños y animaciones
• Separación de UI y lógica de negocio
• Extensión vía custom callbacks
• Soporte completo de Vue Data Binding
• Extensión con componentes y CSS custom

Propuesta de desarrollo de UIS con Quant-UX

Típicamente los diseñadores y desarrolladores usan diferentes herramientas para la construcción de UI, y una vez el diseñador ha completado el diseño se lo pasar al Developer en un formato no reusable para esto, de modo que el desarrollador tiene que reconstruir el diseño entero.

Quizás lo más interesante de Quant es su propuesta para integrar la parte de diseño y desarrollo con Quant-UX y Quant-LowCode, y aunque en esta última parte quede mucho trabajo se aventura una solución muy interesante: