Prototipos con Origami Studio para iOS y Android

Contenido del curso

Conceptos básicos de prototipado

Ténicas para estructurar información

Prototipado de Baja Fidelidad

7
Prototipos rápidos para portales de viajes con herramientas colaborativas
12:39 min

Sistemas de Diseño

Prototipado de Mediana Fidelidad

Librerías Compartidas de Componentes

Prototipado de Alta Fidelidad

Entregables de Diseño

Cierre

21
Diseño Profesional de Prototipos: Del Problema a la Solución
02:27 min

Contenido Bonus

Mentoría expert

25
Diseño Estratégico: Innovación y Transformación Empresarial
44:47 min

Tomar examen

Cursos Empresas Blog Live Conf Eventos Precios

0:0016:46

Prototipos con Origami Studio para iOS y Android

Curso de Diseño de Prototipos Móviles

Clase 23 de 25

Clase 23 / 25

Recursos

¿Qué es Origami Studio y cómo se utiliza?

Origami Studio es una potente herramienta de prototipado creada por Facebook, diseñada para desarrollar prototipos funcionales de aplicaciones tanto para iOS como para Android. Ofrece una interfaz intuitiva que permite a los diseñadores crear prototipos visuales y lógicos sin necesidad de escribir código.

Para obtener Origami Studio, se debe visitar el sitio web origami.design, donde se puede descargar la aplicación y explorar las características que ofrece esta plataforma. Juani recomienda encarecidamente el uso de esta herramienta debido a su efectividad y facilidad de uso para diseñadores y desarrolladores.

¿Cómo se descargan recursos para trabajar en Origami Studio?

El uso de recursos en Origami Studio es esencial para crear prototipos ricos en interactividad y diseño. Juani sugiere ir a github.com/aerolab/origami para descargar un archivo ZIP que contiene recursos y ejemplos necesarios para trabajar. Al descargar y abrir estos archivos, encontrarás un proyecto que facilita la manipulación de maquetas y la aplicación de lógica de Origami.

Dentro de estos recursos, se encuentra el archivo demo.sketch, una maqueta inicial para que los diseñadores empiecen a construir sus primeras interfaces. Este archivo se abre en Sketch, una aplicación de diseño que facilita el manejo de la planificación y la estética visual.

¿Cómo construir una pantalla inicial en Origami Studio?

La construcción de una pantalla inicial pasa por la creación de un lienzo visual y una aplicación lógica. En Origami, las pantallas reciben el nombre de "Screens". Para crear una pantalla inicial, esta se personaliza con las propiedades y elementos necesarios, como el color de fondo, la barra de estado y el encabezado.

¿Cómo se agregan elementos a una pantalla?

A través del módulo superior derecho, se añade la primera Screen, que servirá como punto de partida del prototipo. Por ejemplo, al establecer que la Home se presente por defecto, se debe especificar el contenido visual como el fondo y otros elementos visuales como el header, que es una forma rectangular configurada con tamaño y características específicas.

Asegúrate de que los elementos como la barra de estado y el texto sean visibles y correctamente posicionados en el layout de tu prototipo. La alineación y la disposición de cada componente son clave para una interfaz clara y consistente.

¿Cómo integrar carruseles y tarjetas dentro del prototipo?

Para implementar carruseles, se añaden tarjetas de la carpeta de assets como parte del contenido visual. Origami permite manejar estas tarjetas mediante lógica de bucles usando su sistema de inputs y outputs.

Para crear un carrusel:

Utiliza un loop para repetir múltiples imágenes de las tarjetas de la carpeta.
Aplica un multiplicador para espaciar las tarjetas adecuadamente.
Configura el carrusel para que se active la función de scroll y se adapte al sistema de navegación por tarjetas.

Vigila cómo se comportan visualmente estas tarjetas dentro del carrusel, ajustando propiedades como el ancho y la alineación.

¿Cómo se crean transiciones interactivas en Origami Studio?

La magia de Origami Studio radica en su capacidad para crear transiciones e interacciones dinámicas sin complicaciones. Esto se logra a través de la configuración lógica de las propiedades de los elementos.

¿Cómo se modula el comportamiento de desplazamiento?

Para habilitar el desplazamiento eficaz dentro de los elementos:

Vincula la función Scroll X para activar la navegación horizontal.
Emplea el modulo de Scroll Settings para ajustar la paginación y suavizar el desplazamiento.

¿Cómo se implementa el cambio de tamañano con el scroll?

Para crear la ilusión de un header que se redimensiona con el scroll:

Implementa la lógica de progreso (Progress) entre valores específicos (e.g., de 204px a 64px).
Aplica esta transición al height del header, ajustando cuidadosamente la alineación para mantener el elemento visible correctamente.

¿Cómo envolverlo todo con un menú hamburguesa y vista previa del dispositivo?

El menú hamburguesa y otras pantallas adicionales complementan la interacción que el usuario experimentará. A través del manejo de capas y conexiones lógicas dentro de Origami, es posible implementar menús seleccionables y crear interacciones de transiciones suaves.

Finalmente, una de las funciones destacadas de Origami es la capacidad de previsualizar prototipos en dispositivos móviles reales mediante Airdrop, lo que permite realizar pruebas de usuario valiosas y obtener feedback en tiempo real.

A medida que adquieres experiencia con Origami Studio, notarás cuán poderosos son estos prototipos para trasmitir tus ideas de diseño antes de recurrir a los desarrolladores, fomentando una experiencia de diseño más efectiva e interactiva. ¡Sigue aprendiendo y experimentando para dominar el arte del prototipado!

Conceptos básicos de prototipado

Diseño de Prototipos: Del Boceto a la Alta Fidelidad

Prototipos: Beneficios y Estrategias en el Desarrollo de Productos

Prototipos de Baja, Media y Alta Fidelidad: Ventajas y Desventajas

Ténicas para estructurar información

Patrones de Diseño en Interfaces de Usuario para Viajes Solitarios

Metodología OUX: Diseño Digital Orientado a Objetos

Diseño de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

Prototipos rápidos para portales de viajes con herramientas colaborativas

Sistemas de Diseño

Ventajas del Sistema de Diseño Atomic Design

Identificación de Componentes en Sistemas de Diseño Digital

Prototipado de Mediana Fidelidad

Diseño de Interfaces con Figma: Jerarquía y Componentes Básicos

Diseño Web con Grid de 12 Columnas: Creación y Optimización

Librerías Compartidas de Componentes

Diseño de Interfaces con Figma: Creación de Componentes Maestros

Creación y Gestión de Componentes en Diseño UI

Componentes Detallados y Funcionales con Responsabilidad

Estilos y Componentes en Prototipos de Alta Fidelidad

Creación de Librerías Compartidas en Diseño de Interfaces

Prototipado de Alta Fidelidad

Creación de Prototipos de Alta Fidelidad con Componentes Compartidos

Creación de Prototipos Interactivos para Pruebas de Usabilidad

Entregables de Diseño

Guía de Estilo Dinámica para Diseñadores en Figma

Exportación de Diseños en Figma a Zeplin para Desarrollo Web

Cierre

Diseño Profesional de Prototipos: Del Problema a la Solución

Contenido Bonus

Prototipado Rápido y Eficaz con Lápiz y Papel

Prototipos con Origami Studio para iOS y Android

Creación de prototipos interactivos con Flinto

Mentoría expert

Diseño Estratégico: Innovación y Transformación Empresarial

Prototipos con Origami Studio para iOS y Android