Conceptos:
- Duración y Velocidad
- Tamaño importa
- Móvil
- Tablets y relojes inteligentes
- Movimiento:
- Comprensión y Extensión
- Anticipación
- Puesta en Escena
- Seguimiento y Acción Superpuesta
- Entrada y Salida
- Acción Secundaria
- Tiempo
- Exageración
Intro
Fundamentos de Diseño UI con Figma para Principiantes
Fundamentos del Diseño Digital: Pantallas y Color
Fundamentos de Figma para el Diseño Digital
Historia y Evolución del Diseño Gráfico e Industrial
Heurísticos
Principios Jurísticos en Diseño de Interfaz: Percepción y Comportamiento
Principios Heurísticos de Percepción y Comportamiento
Principios Heurísticos de Relación y Jerarquía en Diseño
Principios Heurísticos de Diseño: Forma y Función (Parte 1)
Principios Heurísticos de Forma: Iconos, Remarcar y Proporción Áurea
Principios Heurísticos de Interacción en Diseño Digital
Básicos de User Interface
Arquitectura de la Información para Productos Digitales
Tipografía en Diseño Digital: Anatomía y Uso en Figma
Vectores y Operaciones Booleanas en Figma
Usabilidad y Eficiencia en Sistemas de Diseño Digital
Organización de Equipos y Archivos en Entornos de Trabajo Remoto
Animación
Principios de Animación Aplicados al Diseño Digital
Prototipado básico con Figma: Interacciones y animaciones
Cierre
Exploración de Portafolios en Figma para Inspiración Creativa
Diseño Digital: Principios, Herramientas y Colaboración en Figma
Live Class
Conceptos Básicos de Diseño de Interfaces (UI)
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Los principios de animación no solo son fundamentales en el cine o en los dibujos animados, sino que también juegan un rol crucial en el diseño digital contemporáneo. Estos principios mejoran la experiencia del usuario al aportar realismo y dinamismo a las interfaces. Abordaremos conceptos esenciales como comprensión y extensión, anticipación, y puesta en escena, entre otros, para que puedas aplicarlos efectivamente en tus proyectos.
El principio de comprensión y extensión es crucial para ofrecer una apariencia de peso y flexibilidad a los objetos animados. Se puede visualizar fácilmente en objetos como una pelota que rebota, donde al tocar el suelo, la pelota se comprime ligeramente antes de saltar de nuevo. Este concepto también se extiende a construcciones más complejas, como la musculatura en el rostro humano, imitando los matices del movimiento natural y añadiendo una capa de realismo.
Anticipación es el término usado para describir el preludio a una acción principal. Su propósito es preparar a la audiencia para lo que va a ocurrir, haciendo que la acción se perciba como más realista. Un excelente ejemplo es un bailarín antes de saltar: primero realiza un pequeño movimiento de flexión en las rodillas, generando esa expectativa en el espectador.
La puesta en escena se centra en dirigir la atención del usuario a lo más significativo de una pantalla o animación. Esto es especialmente importante en el diseño digital, donde múltiples elementos comparten espacio y pueden abrumar al observador. Las decisiones estratégicas en la puesta en escena aseguran que el foco de atención esté siempre dirigido al evento o mensaje central.
Estas técnicas logran que el movimiento parezca mucho más realista, sugiriendo que los objetos o personajes obedecen leyes físicas, como la inercia. No solo se muevan linealmente, sino que incorporan aceleraciones y desaceleraciones. Esto es crucial en los entornos digitales donde se busca replicar la realidad o adaptar sus principios para crear experiencias inmersivas.
En el mundo real, cualquier movimiento, ya sea de cuerpos humanos, animales o vehículos, requiere de tiempo para iniciar y frenar. La animación refleja este fenómeno a través del principio de entrada y salida, donde se dibujan más imágenes al inicio y al final de una acción. Esto genera una sensación de movimiento más gradual y, por tanto, más veraz.
La acción secundaria otorga profundidad a la acción principal, enriqueciendo la escena y contribuyendo a un sentido más completo de vivacidad. Imagina una persona caminando, puede hacerlo mientras balancea los brazos, guarda las manos en los bolsillos o incluso silba. Estas acciones secundarias añaden una dimensión adicional a la narrativa visual.
El concepto de 'tiempo' en animación no se refiere solo a la duración de una acción, sino también a su sincronización en relación con las leyes físicas, haciendo que movimientos y acciones se perciban de manera realista. Por otro lado, la exageración rompe con el realismo extremo, destacando particularidades que llaman la atención y capturan la esencia del movimiento. Un personaje caricaturesco puede mantener un pie estirado cómicamente al correr, aumentando su atractivo y humor.
Implementar estos principios ofrece un atractivo visual en el diseño digital, mejorando la interactividad y el entendimiento de la interfaz por parte del usuario. Te invito a practicar observando animaciones en tus aplicaciones favoritas, identificando estos principios, y experimentando con ellos en tus propios proyectos. La animación es una herramienta poderosa cuando se aplica con intención y conocimiento, ¡anímate a seguir aprendiendo y explorando su potencial!
Aportes 70
Preguntas 2
Conceptos:
Mis notas de clase:
Un ejemplo del principio acción secundaria y exageración es la micro-animación del botón de like en Youtube.
En la app de Nequi en Colombia identifique la entrada y salida: mientras ejecutas una orden, y la app esta procesando, el icono de Nequi que son dos cuadrados superpuestas uno del otro y redondeados en las puntas, se mueven en direcciones contrarias, una como las manecillas del reloj y el otro de manera opuesta, estas acciones dan la sensacion de espera mientras que la accion sucede. y produce una sensacion de distraccion que evita la ansiedad sobre la transaccion financiera.
Mi ejemplo sería el pajarito de Duolingo cuando uno llega a una meta de racha, que brinca y gira y se vuelve dorado y es todo muy épico, jaja. Tendría los principios de anticipación, puesta en escena, entrada y salida y exageración.
Compresión y extensión: Necesitamos darle una sensación de peso y flexibilidad a los objetos que se dibujan
Anticipación: Hay que preparar la audiencia para una acción para que parezca mucho mas realista
Puesta en escena: Dirigir la atención de una audiencia y dejar claro que es lo más importante en una escena
Seguimiento y acción superpuesta: Ayuda a representar el movimiento en una forma muy realista, no solo incluyendo un movimiento linear sino agregando diferentes velocidades, suavidad, etc
Entrada y salida: El movimiento de objetos en la vida real necesita tiempo para acelerar y desacelerar
Acción secundaria: Agregar acciones secundiarias a la acción principal le da más vida a la escena
Tiempo: La cantidad de Dibujos o Fotogramas para una acción determinada = la velocidad de la acción
Exageración: Utíl para no aburrir al usuario ya que los movimientos humanos suelen verse repetitivos dentro de un diseño, se debe definir el tipo de ecageración que se quiere implementar
meta cumplida en app de salud
Principio de acción secundaria:
En Candy Crush, cuando se juntan 3 caramelos o más, se genera la animación de explosión que viene acompañado de otros destellos y movimiento de los caramelos con el fin de darle más vida a la escena y a la acción.
Principio de exageración (no estoy segura):
En la aplicación móvil de Canva, cuando estámos descargando el diseño creado, se muestra una animación de carga que va en crecimiento.
En la app de weverse para móvil, en la sección de artist lo primero que vemos son una secuencia de historias de cada perfil de los miembros del grupo, acá podemos destacar el principio de Seguimiento y acción superpuesta, ya que posee un movimiento lineal al momento de ir deslizando las historias de izquierda a derecha.
cuando guardas un pin en pinterest ademas de aparecer la confirmacion de que ha sido guardado hay un sonido de notificacion, eso podria ser un ejemplo de acción secundaria
En la app de Pinterest, cuando se carga el contenido,la acción secundaria de una rueda dando vueltas respalda la idea de que se está cargando nuevo contenido al feed.
En Notion cuando subes y bajas dentro de la app no solo está el efecto de Aceleración, sino que también se “choca” cuando subes muy rápido la barra choca con la app se vuelve pequeña y después se expande
App Tinder, cuando se abre la app, se ingresa y se muestra el nombre de la aplicación con un fondo color uinforme caracteristico de la app, luego se muestra un icono de una llama que esta decorada con simbolos diversos a su alrededor como si explotase una piñata, luego aparece la foto de uno con un eco de circulos que se expande alrededor de la foto y esto da la sensación de busqueda, mientras carga información de los prospectos para deslizar (segun como funcinona la app).
Principio de Acción secundaria en la animación al darle me gusta al botón de Youtube
Que tal las reacciones en facebook.
Cumpliría con la exageración y acción secundaria.
Luego de completar cada lección en Duolingo, aparecen algunos de los personajes realizando algunas acciones animadas.
En este se aplican los siguientes principios:
Tengo la duda de si todos se aplican ya que son caricaturas animadas luego de dar como finalizada la lección.
** Reto **
En Spotify un principio de animación podria ser laa anticipación, que implica preparar al espectador para una acción próxima. Cuando el usuario hace clic en el botón de reproducción (play) o pausa, puede haber una breve anticipación visual, como una animación sutil en el botón para indicar que se ha realizado la acción.
Conceptos de animacion:
Principiod de animacion:
En Beek para pc hay una barra de carga para ir a la página principal. Es el principio de Anticipación ya que nos prepara para ir a la página de inicio. Tambien tiene aceleración correspondiente al tiempo asi que va con seguimiento y acción superpuesta.
El like en los comentarios de platzi, no solo cambia de color si no igual muestra otras particulas a su alrededor 👉💚
En Tiktok al dar like a un video no solo se pinta de rojo sino hay una animación de destellos alrededor, este sería un caso de acción secundaria
Actividad
En la app clash of clan:
En la comprensión y extensión si cumple con este fundamento con iconos de selección se vuelven más grandes para saber en que sección te encuentras.
Anticipación:si cumple con este fundamento ya que al momento de eliminar algún objetivo se torna un color más oscuro para saber que objeto deseas eliminar o mover.
Puesta en escena: si cumple con este fundamento ya que al ingresar al juego me deja en claro que lo más importantes son las aldeas también sucede que al dirigirnos a la aldea nocturna nos da un primer plano de la aldea secundaria y al regresar nos da igual un primer plano de la aldea principal.
Seguimiento y acción superpuesta: si cumple con este fundamento, en el carrusel vertical de eventos se desplaza y desacelera dependiendo de cuando desees desplazar dando la sensación de que son más pesadas las fuentes de información.
Entrada y salida: tal como en el aanterior fundamento si se cumple también esta ley.
Acción secundaria: si cumple con este fundamentopues tiene animaciones secundarias en varios aspectos dell juego como decoración.
Teimpo: En algunas opciones si sucede esto en otras opciones son aparición repentina de la información; pero si cumple este fundamento.
Exageración:En este caso sin cumple con este fundamento pero con un estilo particular en el apartado de guerra de clanes vemos un zoom exagerado para ver nuestra aldea principal en guerra con el enemigo.
Excelente explicación, me ayuda mucho abordar mejor estos principios sin utilizar muchos en conjuntos en un solo proyecto
Este seria claro ejemplo de anticipiàcion en el que los usuarios deben escoger su cuenta o perfil para poder obtener una puesta de escena en la sigueinte pagina. Ademas añade una reaacion emocional al usuario al utilizar este tipo de herramientas o procesos digitales.
Realmente me encanto esta clase!
Gracias
Olvidé mencionar que la llama de fuego azul en la primera imagen va aumentando ,
Esta App se llama Busuu esta genial. 😃
Esta es una App para aprender idiomas por niveles, tiene demasiados recursos y formas de interactuar con nativos, aprendiendo en esta clase me he podido de cuenta como puedo identificar lo aprendido. he notado varias animaciones.
Por ejemplo cuando hacer un ejercicio sin equivocarte sale este trofeo , aumenta de tamaño, se mueve y tiene una pequeña explosión de serpentina.
de igual manera al inicio de la App cuando se abre carga la macaba , aumenta de tamaño igual que el resto de elementos gráficos. realmente estoy muy feliz de por identificar lo aprendido. y se debe especificar las propiedades de este en todo el recorrido por dichas escenas
Un ejemplo de entrada y salida en la pantalla de splash de la app de Bancolombia
Un ejemplo de anticipación mostrando que lo página se está cargando y que próximamente aparecerá habilitada la interfaz para continuar con el proceso
Usando la interfaz del juego angry birds podrás observar un buen ejemplo de buen uso de todos los principios de animación mencionados aplicados a las ventanas emergentes, los botones , los elementos visuales de la interfaz y los personajes. Da la sensación de un universo caricaturezco y flexible, sumando a su experiencia entretenida y agradable.
Otro elemento importante que complementa las animaciones para elevar aun más la experiencia es el sonido que se reproduce cuando interactuamos con los elementos y personajes: Ejemplos: Al hacer tap en un botón, la entrada de una ventana emergente y por supuesto el sonido del lanzamiento de los pajaritos con la resortera. Los sonidos te hacen sentir más inmerso en la experiencia del juego.
En mi celular cada vez que lo desbloqueo la animacion es como cuando presentas algo y sale de los costados de la pantalla, es la accion secundaria, ya que la principal es prender el telefono.
La animación del botón de suscruburse y darle cllic en la campanita, hace animación pero también sonido, acción ppal del botón de suscruburse y secundaria campanita
Sin duda mis animaciones favoritas de una app son las de Duolingo porque me parecen geniales y muy atractivas, lo cual hace que se vuelva más ameno y entretenido, ya que como usuario “quedas enganchado” utilizando el producto digital una y otra vez.
El logo de platzi al iniciar cada clase , es animacion de tipo exageracion. Es muy buena!
Bumble:
Anticipación: Aparece el logo con una animación como si estuviera cargando.
Entrada y salida cuando deslizas hacia la izquierda o derecha, a la vez la exageración, haciendo la animación como si fuera que estuvieras escogiendo cartas.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?