Herramientas para prototipar productos digitales (parte 2)
Prototipos Hi-Fi para crear experiencias únicas
Continuando con el anterior post sobre herramientas para prototipar, ahora les toca a Framer y Origami.
Framer 🖼
Framer después de su reciente actualización (FramerJS a Framer) cuenta con una comunidad muy activa, ya que es una herramienta muy poderosa principalmente porque se basa en el uso de código (una versión de Javascript) para la creación de interesantes e innovadores prototipos.
Al ser una herramienta basada en código implica que la curva de aprendizaje es más grande y por lo tanto puede ser una barrera para introducirse a usar esta herramienta por la lógica que esto requiere.
Sin embargo sus creadores se han preocupado para que esto no te impida trabajar con Framer, ya que cuenta con sus slider controls con los que perfectamente puedes crear tus prototipos, pero si eres un aventurero y no te da miedo tocar código puedes meterle mano directamente y crear/editar los presets de código que trae.
Framer cuenta con la vista de Diseño que te ayuda a editar elementos importados o crear nuevos, incluso cuenta con una biblioteca de iconos para usar, pero es para facilitar la creación de prototipos más no para realizar allí todo el diseño de interfaz, para ello hay otras herramientas desde las que puedes importar como Sketch o Figma.
Otra característica muy importante de Framer es que cuenta con un componente para crear VR o prototipos en 3D, que es muy necesario hoy en día con todo lo último que ha surgido entorno a la tecnología VR.
Origami
Origami Studio fue creado por el equipo de diseño de Facebook, el cual quería una herramienta que se adaptara a sus necesidades de generar prototipos interactivos de manera fácil y rápido pero sobre todo que no tuviera que tocar una línea de código, por estas razones (entre otras) Origami heredo el lenguaje de programación visual basado en la conexión de nodos de Quartz Composer.
El lenguaje que usa Origami consta de conexión de Patches (yo les llamo cajitas) con entradas y salidas que se pasan información al conectarse por medio de Cables.
Hay un gran número de patches en la librería de origami, pero son entre 15 y 20 los más usados al crear un prototipo, estos se dividen en cuatro tipos principales: Interaction, States, Animations y Layers.
En Origami también se pueden realizar prototipos para web, iPhone, Android e incluso para Smart Watches (relojes que tambien te pueden dar la hora) o cualquier tamaño de pantalla que requieras creando un Custom Device.
Origami al igual que Framer, está pensado para crear prototipos de micro-interacciones y no a la conexión de múltiples pantallas como es el caso de InVision o Marvel.
Otra gran ventaja de usar Origami como herramienta de prototipado es que se puede acceder a la información del dispositivo como la cámara, el acelerómetro y el giroscopio, lo que hace que se puedan crear prototipos que se acerquen por mucho a productos finales.
La integración con sketch (como ya había mencionado en el anterior post) es muy importante y Origami eso lo tiene muy presente, ya que mantiene el árbol de capas como se encuentran en Sketch, lo que hace muy fácil pasar diseños desde sketch con tan sólo copiar y pegar (con algunas limitaciones de efectos como blur o modos de blending).
En resumen Framer y Origami pueden parecer muy difícil de aprender a simple vista, pero una vez que los exploras y conoces se pueden entender muy rápido y más porque ambas herramientas cuentan con documentación y ejemplos en los que te puedes basar para no iniciar de cero.
Pros Framer & Origami
- Ambas se integran muy bien con Sketch (Plugin / Copy&Paste)
- Prototipos de alta fidelidad con ambas herramientas
- Origami es gratis
- Compartir prototipos en Origami es fácil (necesita Origami view for iOS / Android)
- Muy poderosas una vez que se entienden/aprenden
Contras Framer & Origami
- Curva de aprendizaje muy grande
- Framer es pago por suscripción (USD $15 * mes) con trial y descuento para profesores y estudiantes (a la fecha de la publicación de este post se encuentra un descuento en la suscripción a Framer).
- Ambas sólo para Mac
- No permiten crear prototipos con múltiples pantallas
- En Origami el insertar un gran número de capas puede provocar errores de performance
Entonces ¿Cuál de todas debo usar?
El mencionar unas u otras herramientas no quiere decir que sean las mejores para crear prototipos pero si son las que cuentan con un gran número de usuarios activos, claro lo que mejor puedes hacer es probar las herramientas y deliberar cuál se adapta a tus necesidades particulares y funciona mejor para ti, tus clientes y tu equipo (diseñadores y devs).
En mi caso uso dos herramientas con mayor frecuencia según la etapa en la que me encuentre del diseño/desarrollo de producto:
- Para un prototipo cuyo objetivo es presentar el flujo de una aplicación uso InVision o Marvel, incluso cuando no se tiene pantallas finales y se trabaja con sólo wireframes.
- Para prototipos cuyo objetivo es mostrar cómo se comportaría uno u otro elemento, básicamente para generar micro-interacciones (aquí puedes ver algunos de mis ejercicios) uso Origami studio ya que puedo hacer uso de la cámara y los censores del dispositivo.
Ahora que ya conoces de estas herramientas para crear prototipos épicos, me gustaría saber ¿Por cual te decidirás? y comenzarás a usar (o quizá ya eres un crack en alguna de ellas).
Migue @mishortcut
