Motion Design Básico es un curso online de Cursalo en español para aprender con una ruta estructurada de módulos, lecciones y práctica. La página reúne el objetivo del curso, instructor, duración, contenido, preguntas frecuentes y opción de inscripción, para que estudiantes y motores de respuesta puedan entender rápidamente qué se aprende, para quién sirve y cómo empezar.
Motion Design Básico
Instructora
Acerca de este curso
Este curso de Motion Design Básico fue reforzado para funcionar como una ruta de aprendizaje seria, no como una colección de apuntes cortos. La idea es que el estudiante entienda los conceptos centrales, pero también sepa cuándo aplicarlos, qué errores evitar y cómo convertirlos en decisiones concretas.
A lo largo de los módulos se trabaja con explicaciones claras, ejemplos, criterios prácticos, ejercicios y checklists. El enfoque prioriza aprendizaje útil: menos teoría decorativa y más pasos que una persona pueda llevar a su trabajo, emprendimiento, estudio o proyecto digital.
La guía de Mariana López acompaña el recorrido con una mirada aplicada: definir objetivos, practicar con entregables pequeños, revisar resultados y mejorar. Al final, el estudiante debería tener una base ordenada, vocabulario claro y un plan realista para seguir avanzando sin depender de recetas mágicas.
Mariana López
Resumen del temario
Este curso incluye 4 modulos, 12 lecciones y 4:37 horas de materiales.
Motion Design: Dar Vida a las Interfaces Las animaciones en una interfaz no son decoración — son comunicación. Una transición bien diseñada guía al usuario, proporciona feedback instantáneo y hace que la experiencia se sienta natural y fluida. Sin animación, las interfaces se sienten robóticas y desconectadas. Propósitos funcionales de la animación en UI Feedback: confirmar que una acción se realizó — un botón que se presiona visualmente, un check que aparece al completar Orientación espacial: m
El Arte del Timing y las Curvas de Movimiento El timing (duración) y el easing (aceleración) son los dos parámetros más importantes de cualquier animación. Un movimiento de 200ms con ease-out se siente natural; el mismo movimiento de 1000ms con linear se siente robótico y lento. Dominar estos conceptos es dominar el motion design. Duraciones recomendadas para UI Micro-interacciones (hover, focus, toggle): 100-200ms — debe sentirse instantáneo Transiciones de elementos (cards, modales, menús): 20
Micro-interacciones: Los Pequeños Detalles que Importan Las micro-interacciones son animaciones pequeñas y específicas que responden a una acción del usuario. El corazón que se llena al dar like, el toggle que desliza suavemente, el input que vibra cuando hay un error — estos detalles son los que hacen que un producto se sienta pulido y profesional. Anatomía de una micro-interacción Trigger: lo que inicia la animación — hover, clic, scroll, carga, cambio de estado Rules: qué sucede exactamente —
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
CSS Animations: La Base de Todo CSS es la herramienta más eficiente para la mayoría de las animaciones en interfaces web. Las transiciones y keyframes CSS son nativas del navegador, no requieren dependencias adicionales y tienen excelente rendimiento. Aprende a usarlas correctamente antes de recurrir a librerías JavaScript. Transitions vs Keyframes: cuándo usar cada uno Transitions: para cambios de estado entre dos valores (hover on/off, visible/oculto) — la mayoría de los casos Keyframes: para
Animaciones Avanzadas con Librerías Modernas Cuando CSS no es suficiente (animaciones basadas en gestos, physics-based, o secuencias complejas), es momento de usar librerías especializadas. Framer Motion para React y Lottie para animaciones pre-renderizadas son las herramientas estándar de la industria en 2026. Framer Motion: animación declarativa para React motion.div es un div con superpoderes de animación — animate, whileHover, whileTap, exit Spring animations: movimiento basado en física con
Mostrar tus Habilidades de Motion Design Tu portfolio como motion designer o diseñador UI que sabe animar es tu mejor herramienta para conseguir trabajo. Aquí aprenderás qué incluir, cómo presentar tu trabajo de animación y cómo crear case studies que demuestren tu pensamiento de diseño, no solo tu habilidad técnica. Qué incluir en tu portfolio de motion 3-5 proyectos de case study donde la animación mejoró la experiencia del usuario de forma medible Antes/después: muestra la versión sin animaci
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Lección práctica para aplicar el tema con objetivo, ejemplo, ejercicio guiado y checklist de implementación en un caso real.
Responder al comentario