Conceptos b谩sicos de prototipado

1

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

2

Prototipos: Beneficios y Estrategias en el Desarrollo de Productos

3

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

T茅nicas para estructurar informaci贸n

4

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

5

Metodolog铆a OUX: Dise帽o Digital Orientado a Objetos

6

Dise帽o de Flujos de Tarea para Portales de Viajes

Prototipado de Baja Fidelidad

7

Prototipos r谩pidos para portales de viajes con herramientas colaborativas

Sistemas de Dise帽o

8

Ventajas del Sistema de Dise帽o Atomic Design

9

Identificaci贸n de Componentes en Sistemas de Dise帽o Digital

Prototipado de Mediana Fidelidad

10

Dise帽o de Interfaces con Figma: Jerarqu铆a y Componentes B谩sicos

11

Dise帽o Web con Grid de 12 Columnas: Creaci贸n y Optimizaci贸n

Librer铆as Compartidas de Componentes

12

Dise帽o de Interfaces con Figma: Creaci贸n de Componentes Maestros

13

Creaci贸n y Gesti贸n de Componentes en Dise帽o UI

14

Componentes Detallados y Funcionales con Responsabilidad

15

Estilos y Componentes en Prototipos de Alta Fidelidad

16

Creaci贸n de Librer铆as Compartidas en Dise帽o de Interfaces

Prototipado de Alta Fidelidad

17

Creaci贸n de Prototipos de Alta Fidelidad con Componentes Compartidos

18

Creaci贸n de Prototipos Interactivos para Pruebas de Usabilidad

Entregables de Dise帽o

19

Gu铆a de Estilo Din谩mica para Dise帽adores en Figma

20

Exportaci贸n de Dise帽os en Figma a Zeplin para Desarrollo Web

Cierre

21

Dise帽o Profesional de Prototipos: Del Problema a la Soluci贸n

Contenido Bonus

22

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

23

Prototipos con Origami Studio para iOS y Android

24

Creaci贸n de prototipos interactivos con Flinto

Mentor铆a expert

25

Dise帽o Estrat茅gico: Innovaci贸n y Transformaci贸n Empresarial

No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Prototipos con Origami Studio para iOS y Android

23/26
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:

  1. Vincula la funci贸n Scroll X para activar la navegaci贸n horizontal.
  2. 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!

Aportes 6

Preguntas 2

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

Si se ve un poco compleja esta herramienta. Pienso que Platzi deber铆a tener un curso especial para Origami, UXPin, Axure e InVision. Estas aplicaciones las he visto en vacantes de trabajo regularmente.

Definitivamente me debo comprar una Apple.

驴Platzi tiene un curso especializado de Origami, flinto o alguno de estos software?

Guau, esta es la app de dise帽o mas t茅cnica que he visto hasta la fecha. Impresionante

No conoc铆a esa app, est谩 genial.

Buenisima