No tienes acceso a esta clase

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

Prototipado simple: conexi贸n de diferentes frames

16/27
Recursos

Aportes 16

Preguntas 3

Ordenar por:

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

o inicia sesi贸n.

Desconozco si ya exista, pero estaria suuuuper increible un curso en el que dise帽emos y prototipemos algo鈥 y despu茅s ese algo llevarlo a c贸digo鈥 Recientemente en donde trabajo me dejaron la tarea de DISE脩AR la landing page para un cliente, yo en mi vida habia dise帽ado jamas nunca nada mucho menos en Figma, y si es aprobado el dise帽o tambi茅n tendr茅 que DESARROLLARLO, sin embargo aunque desarrolamos en Wordpress, no quiero dejar de lado codear todo desde 0. Pero me estoy dando cuenta que el trabajo de dise帽ador y desarrollador tienen que ir en sinton铆a y me esta gustando hacer ambos 馃槃

Conexi贸n de Diferentes frames
Par谩metros del trigger: Lo que causa lo que la interacci贸n inicie

  • None
  • On tap
  • While hovering/Pressing
  • Mouse enter/ Leave
  • Tocuh down / Up

Par谩metros de acciones: Determinar la acci贸n que va a suceder

  • None
  • Navigate to
  • Open overlay
  • Swap with
  • Back
  • Close overlay
  • Open link

Par谩metros de animaci贸n: como se va a ver visualmente esa acci贸n

  • Intsat
  • Dissolve
  • Smart Animate
  • Move In/Out
  • Push
  • Slide In/ Out

Otros par谩metros de animaci贸n

  • Direcci贸n
  • Tipo de animaci贸n
    • Easy in / out
    • Easy in and out
      -Lineal
  • Duraci贸n
  • Overflow behaviour (scrolling)

Prototipado simple: conexi贸n de diferentes frames

Conectando frames
Posicion Inicial

  • Seleccionar modo 鈥淧rototype鈥
  • Seleccionar el elemento de origen
    • El objeto desde el que va a empezar la interaccion: Ejemplo,
      el boton que se va a presionar o el carrusel que se va a desplazar
  • Arrastrar hasta el frame de destino

Parametros de trigger

  • None
  • On tap
  • While hovering / Pressing
  • Mouse enter / Leave
  • Touch down / Up

Parametros de acciones

  • None
  • Navigate to
  • Open overlay
  • Swap with
  • Back
  • Close overlay
  • Open link

Parametros de animacion

  • Instant
  • Dissolve
  • Smart animate
  • Move in / Out
  • Push
  • Slide in / Out
  • Direccion
  • Tipo de animacion
    • Ease In / Out
    • Ease In and Out
    • Lineal
  • Duracion en milisegundos
  • Overflow Behavior (Scrolling)

Configuracion de prototipo

  • Dispositivo
  • Modelo
  • Fondo
  • Frame inicial

鈥淪i una imagen vale mas que mil palabras, un prototipo vale mas de
mil reuniones鈥

Tipos de prototipos mas utilizados

  • Carruseles horizontales
  • Interacciones con hover
  • Bottom sheets
  • Confirmaciones

**Prototipos m谩s usados **

  • Carrusel Horizontal (izquierda - derecha)
  • Interacciones con hover
  • Bottom Sheets
  • Confirmaciones o pop ups

Informaci贸n resumida de esta clase
#EstudiantesDePlatzi

  • Otra manera de prototipar es conectando frames y esto me ayuda simular diferentes pantallas

  • Debo definir un elemento de origen que sea el comienzo de la interacci贸n

  • Para unir los frames entro a la pesta帽a de prototype y esto hace que si me acerco al frame pueda ver un punto de donde saldr谩 una l铆nea que buscare unir con el frame que yo decida como segunda pantalla

  • Esto podemos hacerlo con much铆simos frames, es decir que hallan cambios de much铆simas pantallas. Si quiero crear un loop debo conectar la ultima pantalla o frame con nuestro elemento de origen

  • Trigger = Activador

  • El Trigger tiene par谩metros de activaci贸n como: None, On tap, While Overing, Mouse Enter, Touch Down, etc

  • El Trigger activa una acci贸n

  • Las acciones igualmente tienen par谩metros como: Instant, Dissolve, Smart Animate, Move in, Push, Slide in

  • Los prototipos de comparten con los clientes

  • Si una foto vale m谩s que mil palabras, un prototipo vale m谩s que mil reuniones

  • Los prototipos m谩s utilizados son el Scroll, el Over que tiene que ver con el mouse, Botton sheets es como una ventana emergente, confirmaciones, etc

  • Lo primero que debemos hacer es determinar el punto inicial de la interacci贸n

  • Es bueno ir viendo como va funcionando el prototipo

  • Para sacar las opciones de animaci贸n puedo darle clic en la l铆nea que une a los frames

  • Es bastante divertido e interesante

  • Debemos practicar

Figma es una excelente herramienta de dise帽o y prototipado de productos digitales. Conectando los frames podemos lograr tener el prototipo de una aplicaci贸n o sitio web funcionando como en la realidad o muy apegado a ella.

Esto esta genial鈥 realmente es muy 煤til.

Llevo bastante haciendo el mock o prototipado, primero lo hice en illustrator y tiempo despu茅s aterrice en affinity designer.

As铆 que esta me genera mucho entusiasmo.

Excelente clase!

Les comparto mi progreso. 馃槂

https://acortar.link/lsecgS

Les comparto mi prototipo

Esto esta muy divertido 馃コ

Excelente clase