Prototipado UX con Origami y Quartz Composer

Introducción (muy, muy básica) a Origami, la herramienta de prototipado mobile que Facebook creó sobre Quartz Composer.

Transcript

1. Prototipado UX con Origami. @shesho
2. Sergio Nouvel @shesho
3. Origami es un plug-in que Facebook desarrolló para Quartz Composer, con el objetivo de hacerlo más apto para prototipado mobile complejo…
4. …y Quartz Composer es un software de Apple para generar composiciones visuales que usan datos y procesamiento lógico, sin programar.
5. Magia! Input Output
6. NOTA: ! Gran parte de la lógica de Quartz Composer se basa en transiciones entre 0 y 1.
7. Composiciones Conjunto de módulos (patches) ensamblados para recibir input y procesar datos gráficos hacia un output.
8. Patches Módulo que efectúa algún procesado de datos, ya sea de input, output o ambos. La mayoría son gráficos, pero también hay lógicos y matemáticos.
9. Patches: 1.Consumer Renderea un output. Es lo más parecido a una “capa” y usualmente es el destino final de nuestra composición.
10. Patches: 2. Processor Toma un input (o varios), hace algo con él y genera un output.
11. Patches: 3. Provider Una fuente de input variable (imagen, video, movimiento de mouse).
12. Patches: 4. Macro Una especie de subcapa, admite su propia composición al interior.
13. Puertos Los círculos que aparecen en un patch. Vienen a ser “plugs” que conectaremos con otros puertos a través de cables.
14. Patches clave de Quartz Composer Billboard: permite mostrar la composición en el visor (indispensable para ver lo que estamos haciendo). Clear: “Refresca” la pantalla y permite que las animaciones se muestren. Render in Image: Macro patch que envía una composición a un Billboard.
15. Patches clave de Origami Phone: tipo especial de Billboard que emula un smartphone. Interaction 2: Permite capturar interacción de usuario (click, mousedown, etc). Switch: Permite almacenar estados de on/off (toggles). Classic Animation: Cambia de 0 a 1 gradualmente. Transition: Toma un número entre 0 y 1 y lo aplica a un rango de valores (inicial / final).
16. Patch Inspector El lugar donde monitoreamos los valores que entran y salen de cada patch, así como su progreso.
17. Patch Library El lugar donde encontramos la biblioteca de patches para añadirlos.
18. GRACIAS. speakerdeck.com/shesho