5 razones para usar animaciones en la web

☝ Las animaciones también son importantes para brindar uuna buena experiencia de usuario. ¿Algunas vez has entrado a una de estas páginas modernas y has sentido como las animaciones le dan un toque más suave? El uso de animaciones puede llegar a ser muy importante, ya que de alguna manera puedes sentir que tu página está “viva” 😄
.
Adicionalmente, hacer animaciones con CSS es ridículamente fácil, tal vez muchos lleguen pensando aquí: “No, es que esto es difícil, seguro será mucho códigp”, pero para nada es así, con muy pocas propiedades puedes crear animaciones bien pro 😉. De hecho, seguramente escribas más reglas para darle estilos a tu elemento que las reglas que escribirás para animar jaja.
.
So, ya que estás aquí… ¡Ánimos! Este curso es increíble 😄

**Resumen de la primera clase: **

- Las animaciones tienen beneficio para nuestro cerebro: Ayudan a reducir la carga cognitiva, y generar atención en espacios realmente importantes.

**- Las animaciones se comunican: **Las figuras emiten diversos mensajes que nos ayudan a asociar situaciones en la vida real.

**- Las animaciones conectan contextos: **Si ejecutaríamos una App móvil y la web de un mismo sitio(ejemplo: Platzi), la animación ayudaría a que logremos relacionarlos y reconozcamos de manera rápida de quien se trata. (Platzi)

- Coreografía de UI: Las animaciones deben comunicar el mismo mensaje.

**- Las animaciones llaman la atención: **Si bien es cierto que las animaciones son visualmente entretenidas y cómodas, ayudan a resaltar ciertas cosas de nuestro sitio web.

Lo mas difícil del curso será aprender a ignorar que el fondo se mueve 😅

5 Razones para usar animaciones en la web
1 - Las animaciones tienen beneficios para el cerebro: nos ayudan a reducir la carga cognitiva, Con animaciones podemos hacer que los usuarios se enfoquen en las partes importantes de un web dejando de lado lo que no es tan importante.
2 - Las animaciones se comunican: Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicación entre diferentes objetos.
3 – Las animaciones conectan contextos: Independientemente de la plataforma por la que entro (web o app), debo tener la sensación como usuario de que estoy en el mismo lugar.
4 – Coreografía de UI: Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.
5 – Las animaciones llaman la atención: Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y también a expresar muchas cosas.

Uso practico de las animaciones con CSS
.
Yo estoy haciendo un juego para mi portafolio con CSS, cuando este listo les dejare el enlace.
.
El punto es que para que parezca que el pacman y los fantasmas se mueven, yo use unos efectos en css. Así que no solo son muy cool, sino que también son útiles para crear arcade games

Alguien mas noto que el fondo se estaba moviendo O: jajaja

Las 5 razones para usar animaciones en la web

Serian las siguientes:

• Las animaciones tienen beneficios para el cerebro
• Las animaciones se comunican.
• Las animaciones conectan los contextos
• Coreografía de UI
• Las animaciones llaman la atención.

Pdt: Que excelente que se empiece hablando de lo bueno de las animaciones, normalmente nos encontramos con gente que dice que esto puede ser algo perjudicial para las paginas. 😃

Estuve esperando este curso desde que lo anunciaron ✨ Me gusta mucho las ganas que tiene la profe en enseñar de la mejor manera.

Alguien más se dio cuenta que Teff estaba vestida igual que Alicia!!! 😄

Hola, comparto mis notas del curso, tienen la opción de duplicarlo, si así lo desean!
https://pickled-dugout-35a.notion.site/Transformaciones-y-Transiciones-en-CSS-c1b86bea5cb54d7aab02714ca3ed787a

Había buscado un curso de animaciones en CSS y vi que existía uno en el pasado, que bueno saber que se convirtieron en más de 1!
Espero aprender mucho 😄

🐇 Waaaaaa… Necesito seguir este conejo si o si!!! 💚

Justamente me encantan las clases de la profesora Estefany Aguilar :3

Muy buena explicación Miss!1 Cada vez me emociono más en entrar a este mundo de la animación web

La profe se mete en el cuento, literalmente tanto, que si no lo notaron, tiene el mismo outfit de Alicia en el País de las Maravillas. jeje

🍿5 razones para usar animaciones en la web

❤Las animaciones tienen beneficios para el cerebro

Ayudan a reducir la carga cognitiva, y generar atención en espacios realmente importantes.

🧡Las animaciones se comunican

Los seres humanos tratamos de conectar absolutamente todo, con animaciones podemos facilitar la comunicación entre diferentes objetos.

💛Las animaciones conectan contextos

Independientemente de la plataforma por la que entro (web o app), debo tener la sensación como usuario de que estoy en el mismo lugar.

💚Coreografía de UI

Todas las animaciones que creemos deben comunicar de la misma manera. Debe haber coherencia cuando creamos las animaciones.

💙Las animaciones llaman la atención

Nos ayudan a reducir la cargar cognitiva, nos ayudan a comunicar y también a expresar muchas cosas.

Me emociona mucho el tema de las animaciones

Me encantan los cursos con Estefany, ella al igual que Juan David son excelentes profes.

Empezando este curso que lo he estado esperando desde que lo anunciaron

Totalmente magnifico, es muy importante darle animaciones a las páginas web!!!

ya me emociona aprender este curso

Alice in chains 😅

Las animaciones pueden tener un gran impacto en la interacción, la experiencia del usuario y la eficacia de la comunicación en un sitio web o aplicación. Es importante tener en cuenta que el uso adecuado y estratégico de las animaciones puede mejorar significativamente la experiencia del usuario y ayudar a alcanzar los objetivos de negocio. Sin embargo, es importante también tener cuidado de no sobrecargar un sitio web con animaciones innecesarias ya que distraen al usuario de lo que es importante.

• Mejorar la experiencia de usuario: Las animaciones pueden hacer que una página web sea más atractiva y fácil de navegar.

• Destacar elementos importantes: Las animaciones pueden ayudar a resaltar elementos específicos en una página web, lo que puede ser especialmente útil en páginas con mucha información.

• Proporcionar retroalimentación visual: Las animaciones pueden proporcionar retroalimentación visual a los usuarios sobre su interacción con la página web, lo que puede mejorar la usabilidad y la accesibilidad.

• Conseguir atención: Las animaciones pueden atraer la atención de los usuarios a una página web y retener su interés.

• Añadir personalidad: Las animaciones pueden añadir personalidad y estilo a una página web y ayudar a diferenciarse de otros sitios web similares.

• Mejorar la comprensión: Las animaciones pueden ayudar a explicar conceptos complejos de manera clara y concisa, haciéndolos más accesibles y fáciles de entender.

• Crear interacción: Las animaciones pueden ser utilizadas para crear interacciones con los usuarios, como juegos o aplicaciones en línea.

• Aumentar la retención de información: Las animaciones pueden ser más efectivas para retener la atención de los usuarios y aumentar la retención de información en comparación con otros medios de presentación.

• Proporcionar un aspecto más profesional: Las animaciones bien ejecutadas pueden mejorar la percepción de calidad y profesionalismo de un sitio web.

• Mejorar la accesibilidad: Las animaciones pueden ser utilizadas para proporcionar indicaciones visuales a los usuarios con discapacidad visual, mejorando la accesibilidad del sitio web.

Repositorio

Les adjunto el repositorio con los códigos del curso y un pequeño proyecto con la mayoría de elementos vistos.

entre a este curso por una duda de css de otro curso y la verdad me resulto bastante interesante, vamos hacerlo

5 razones para animaciones en la web

1. 🧠 Las animaciones tienen beneficios para el cerebro: reduce el esfuerzo que hace el usuario y enfocarlo en las partes importates.
2. 🗣️ Las animaciones se comunican: los humanos tratamos de armar un hilo conductor asociandolo a la vida real.
3. 📲 Las animaciones conectan contextos: deben comunicar lo mismo independientemente de la plataforma para que el usuario tenga la sensaciòn de estar en el mismo lugar.
4. 🕺 Coreografía de UI: Coincidir las animaciones al menos que comuniquen lo mismo. Coherencia en las animaciones.
5. 🔊 Las animaciones llaman la atenciòn: nos ayudan a comunicar y expresar lo que debe sentirse.

5️⃣ razones para usar animaciones en la web

Ideas/conceptos claves

La carga cognitiva es el esfuerzo utilizado en la memoria de trabajo

Apuntes

1. Las animaciones tienen beneficios para el cerebro 🧠

• La carga cognitiva ⇒ llenar todo el website nos cansa como usuarios revisar cada detalle
• Con las animaciones podemos hacer que el usuario se enfoque en ciertos lugares deseados

2. Las animaciones se comunican 👄

• Nosotros como personas tratamos de darle sentido o “hilo conductor” a cosas de la vida cotidiana
• Podemos aplicar esta idea en productos digitales para mejorar la compresión

3. Las animaciones conectan los contextos 💌

• El producto final debe comunicar una misma idea a lo largo del mismo
• Por lo cual nos podemos comunicar una idea a través de animaciones

4. Coreógrafa de UI 🕺

• Las animaciones deben tener consistencia es decir que se sientan de igual forma

5. Las animaciones llaman la atención 👁️

• Esto resume los anteriores puntos
• Las animaciones cumplen el rol de:
  1. Reducir la carga cognitiva
  2. Comunicar y expresar una idea o mensaje

Apuntes / Notas / Resumen

Recopilatorio de resúmenes hechos por la comunidad, todo en un solo lugar GitHub. Además, en este repositorio encontraras mas resumenes de los cursos de la escuela de Desarrollo Web.😊

✨ This is open source, share it with the world.❗

Analizando un poco la clase entendí que las animaciones no deben de abrumar al usuarrio. A mi parecer la función de la animación el llevar la atencion del usario hacia un elemento deseado.

Aprovechare al máximo el curso, para implementarlo en buenas futuras paginas web 😄

5 razones para usar animaciones en la web

1. Las animaciones tienen beneficios para nuestro cerebro. Evitando la sobre carga cognitiva de un sitio web, haciendo que el usuario se enfoque en lo importante.
2. Las animaciones se comunican. Porque nos permiten armar un hilo conductor que nos relacione con la vida real.
3. Las animaciones conectan contextos, si hacemos web y mobile nos permiten comunicar lo mismo.
4. La coreografía de UI. Nos permiten comunicar de la misma manera usando las mismas animaciones. Esto siendo coherentes con estas.
5. Las animaciones llaman la atención, que sería como un resumen de las primeras 4 razones.

1. Las animaciones tiene beneficios para el cerebro, ya que estas reducen el esfuerzo que se hace al momento de visualizar la información.
2. Las animaciones se comunican: como seres humanos tendemos a formar un hilo conductor y por tanto asociamos todo a figuras o dibujos.
3. Las animaciones conectan con textos: el texto debe ser igual para cualquier aplicación para que pueda haber una conexión.
4. Coreografías de ui: Los pasos deben coincidir unos con otros. Las animaciones deben ser de la misma forma, que haya una comunicación entre sí.
5. Las animaciones llaman la atención: estás deben comunicar.

Nunca he visto la película y no tengo ganas de verla, espero que no haya mas referencias de ella en el resto del curso. Se volverá insufrible de haber mas.

La clase va de animaciones, pero poner un fondo animado es distractivo y hasta un poco molesto, quita la atención a la presentación. La comunicación corporal de la profesora es excelente y creo que eso era suficiente para la clase.

Con Estefany no aplica lo de colocar. mayor velocidad del video

Las animaciones…

1. Tienen beneficios para el cerebro | relajan
2. Comunican | crean historias
3. Conectan contextos | dan personalidad
4. Coreografía UI | debe haber armonía
5. Llaman la atención | facilitan la atención

El curso se ve genial, lista para aprender transformaciones y transiciones en CSS 😃

Notas de la clase

Uff!! Gracias!! Gran profesora!! Gracias por ir complementando más cursos para la escuela Web.

Esta genial este inicio y la referencia me encanto

Que nota de curso! 👌

Yo sentía que le faltaba algo a Platzi para ser perfecto. Ahora entiendo que siempre fue el Cosplay 😍

una clase muy creativa relacionando con pais de las maravillas yuju muy genial

gracias teff la mejor profesora de platzi que conozco

Genial, estaba esperando este curso. A darle!

Tenías muchas ganas de que saliera este curso!!! Además Estefany es de mis profesores favoritas 💚

Las animaciones me parecen muy importantes porque llaman la atención (lo que en diseño podríamos denominar peso visual) por ende nos permite ayudar al usuario a navegar por nuestra página (además se ve genial!).

woo

Razones para hacer animaciones

1. Tienen beneficios para el cerebro
2. Las animaciones se comunican
3. Conectan contextos
4. Coreografía de UI
5. Llaman la atención

¿Por qué hacer animaciones?

• Tienen beneficios para el cerebro: Reducir la carga cognitiva del usuario al momento de leer la página
• Comunican: Los seres humanos tratamos de conectar y crear una historia a partir de esos movimientos
• Conectan los contextos: Debe haber concordancia entre los diferentes tipos de dispositivos
• Generan una coreografía de UI: Los animaciones creadas deben estar en la misma línea
• Llaman la atención: Las animaciones ayudan a comunicarnos más fácilmente con el usuario

5 razones para usar animaciones en la web

1. Tienen beneficio para el cerebro.
   Una buena animación puede reducir la carga cognitiva del usuario al intentar entender la app.
2. Las animaciones comunican.
   Las animaciones pueden transmitir una conexión con un caso de la vida real, por ejemplo, una campanita de notificaciones vibrando.
3. Las animaciones conectan los contextos.
   Una aplicación que puede estar en diferentes plataformas; si en todas estas hay las mismas animaciones, el usuario puede entender que está en el mismo contexto, en la misma aplicación.
4. Coreografía de UI.
   ¿Una aplicación super estética que refleja suavidad, pero que todo se mueve bruscamente? Eso no va con nosotros. Las animaciones pueden hacer que toda una app lleve un ritmo y una constancia en la forma de expresarse ante el usuario.
5. Las animaciones nos llaman la atención.
   Una animación nos da un preámbulo de algo que está a punto de suceder, o, dicho de otra forma, nos pica el ojo para que veamos lo que está pasando.

El proyecto final del curso se ve muy interesante ✨

Para un Frontend es super importante saber hacer animaciones y llevar a realidad las ideas geniales que muchos diseñadores tienen en la cabeza.

Buenos puntos, como desarrollador indi , diria que las animaciones hacen todo mas fluido y que se mire mas profesional la pagina al hacer que todo se muestre fluidamente y no abrutamente

a seguir al conejo al fondo de su madriguera

Comienzo una nueva aventura a la par que me pongo a realizar apuntes en Notion casi que por primera vez para ir probando si me resulta mejor estrategia de estudio a solo ir tomando las clases.
Es un tema que me interesa mucho y espero pronto poder estar implementando animaciones que resulten agradables a la vista, pero que cuenten algo al usuario final.
A darle con todo 🚀

🔴Les recomiendo esta pagina para acompañar el curso😉