Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Prototipado UX con Origami y Quartz Composer

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.

Sergio Nouvel

March 20, 2014
Tweet

More Decks by Sergio Nouvel

Other Decks in Design

Transcript

  1. Origami es un plug-in que Facebook desarrolló para Quartz Composer,

    con el objetivo de hacerlo más apto para prototipado mobile complejo…
  2. …y Quartz Composer es un software de Apple para generar

    composiciones visuales que usan datos y procesamiento lógico, sin programar.
  3. NOTA: ! Gran parte de la lógica de Quartz Composer

    se basa en transiciones entre 0 y 1.
  4. 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.
  5. Patches: 1.Consumer Renderea un output. Es lo más parecido a

    una “capa” y usualmente es el destino final de nuestra composición.
  6. Puertos Los círculos que aparecen en un patch. Vienen a

    ser “plugs” que conectaremos con otros puertos a través de cables.
  7. 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.
  8. 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).
  9. Patch Inspector El lugar donde monitoreamos los valores que entran

    y salen de cada patch, así como su progreso.