SlideShare una empresa de Scribd logo
1 de 6
Descargar para leer sin conexión
Motion ui
Dictado por
Craig Dehner / former APPLE UI Motion Designer on the
Human Interface Team
ODD CG
postgrado digital
O D D C G | C A S T R O 9 1 9 | G C B A 						 I N F O @ O D D C G . C O M
Milton
Gonzalez
A C A R G O D E :
t r a b a j o s r e a l e s d e l o s d o c e n t e s
“Se trata de enlazar todos los elementos y las pantallas
de tu aplicación para contarle al usuario una historia so-
bre todo eso: dónde estuvieron, adónde van y qué quieren
hacer. Es un cuento: hay personajes, una historia. Y creo
que es una manera fácil de entender la animación más
allá de transiciones de una pantalla a la otra. No es un
adorno, es el hilo conductor que hilvana todas las histo-
rias.” – Craig Dehner.
La animación se ha convertido en parte integral del diseño de interfaces, especialemente desde el
lanzamiento del IOS7. Junto con el desarrollo de nuevos elementos visuales, la animación ahora
juega un rol protagonista para definir la estrutura y las interacciones.
La manera en que tus objetos se mueven es ahora tan im-
portante como el impacto visual de los objetos en si mismo
El taller esta dirigido a trabajar tanto el nivel proyectual de las animaciones para mejorar la inter-
face, como tambien en el nivel técnico introduciendonos en las habilidades necesarias para poder
presentar desarrolladores y clientes (a través de maquetados rápidos), tus ideas.
Son varios los beneficios de integrar animaciones dentro de la interface, vamos a enfocarnos en
la experiencia del usuario y comunicar ideas a través de la misma, trabajando areas que el diseño
estatico no puede alcanzar.
ODD CG
postgrado digital
O D D C G | C A S T R O 9 1 9 | G C B A 						 I N F O @ O D D C G . C O M
que es motion ui
Taller intensivo
O D D C G | C A S T R O 9 1 9 | G C B A 						 I N F O @ O D D C G . C O M
­
¿ Q u i e n e s e l P r o f e s o r ?
Craig Dehner ah ayudado a crear y animar las interfaces que se
utilizan en todos los dispositivos de Apple, trabajando dentro del
Human Interface Team. Así que si alguna vez utilizaste un dispositi-
vo de Apple has visto su trabajo.
Estuvo involucrado en el rediseño del IOS 7, el nuevo look de Siri
y la integración de 3D touch en IOS 9
ODD CG
postgrado digital
O D D C G | C A S T R O 9 1 9 | G C B A 						 I N F O @ O D D C G . C O M
Motion ui
taller intensivo
Temas a trabajar
No sabes usar after effects
D i n a m i c a d e c u r s a d a
Taller de 2 días intensivos trabajando y prototipeando en After Effects,
EL TALLER VA A SER DICTADO EN INGLES
Se completaran una series de proyectos en After Effects, esto incluira desde tran-
siciones simples para aprender los elementos fundamentales de trabajar con key-
frames y timing, hasta llegar a animaciones complejas, como carga de password y
animaciones de iconos para aprender a crear animaciones simples y hermosas que tus
usuarios van a disfrutar de ver una y otra vez!!!
No te preocupes preparamos una clase especial el 16 de Abril junto a nuestra profe-
sora Valeria Laura Rapoport Adobe Certified Expert para la versión CS6.
Vamos a presentarte todas las herramientas que vas a necesitar usar en el taller con
Craig.
Mejorar la experiencia del usuario:
-Reinforcing Spacial Relations
-Motion Affordance
-Confirming Actions
-Hide Perceived Latency
-Moments of Delight
Fundamentos de la animación:
-Animation Properties
-Curves
-Physics
-Timing and Choreography
ODD CG
postgrado digital
O D D C G | C A S T R O 9 1 9 | G C B A 						 I N F O @ O D D C G . C O M
Motion ui
taller intensivo
¿ P O R Q U E VA M O S A T R A B A JA R E N A F T E R E F F E C T S ?
Craig te lo explica:
To create beautiful interface animations, the best tool for the job is After Effects.
Why? A couple reasons:
With After Effects you can rapidly prototype your ideas and visualize interactions
Allows for any type of animation you can imagine, you are not limited to simple pre-
sets
Use the curves data to inform developers about animation timing
Again, After Effects is fast. Once you know the basics, you can get an interface
moving in no time.
There are tools popping up all the time that are aimed specifically toward interface
animation. Popular options are Principle, Origami, Pixate, and CoreAnimator. These
programs are still in their infancy, and most still rely on a small set of animation pre-
sets. However, these programs are sure to become robust design tools in the near
future. The skills you learn in After Effects will translate to any key frame based
prototyping tools.

Más contenido relacionado

Similar a 325940441 motion-ui

Descripción del detector de rostros - Sistemas Adaptativos FIME
Descripción del detector de rostros - Sistemas Adaptativos FIMEDescripción del detector de rostros - Sistemas Adaptativos FIME
Descripción del detector de rostros - Sistemas Adaptativos FIME
MarianaZamarripa34
 
Informatica,diseño grafico
Informatica,diseño graficoInformatica,diseño grafico
Informatica,diseño grafico
aileenmc
 

Similar a 325940441 motion-ui (20)

Programas para diseñar en 3D
Programas para diseñar en 3DProgramas para diseñar en 3D
Programas para diseñar en 3D
 
Experiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de usoExperiencia Usuaria, mas allá de la facilidad de uso
Experiencia Usuaria, mas allá de la facilidad de uso
 
Corel draw presentacion 11
Corel draw presentacion 11Corel draw presentacion 11
Corel draw presentacion 11
 
Mayra jimenez rivera manejo de imagen
Mayra jimenez rivera manejo de imagenMayra jimenez rivera manejo de imagen
Mayra jimenez rivera manejo de imagen
 
Herramientas multimedia -Stephanie Castillo -
Herramientas multimedia -Stephanie Castillo -Herramientas multimedia -Stephanie Castillo -
Herramientas multimedia -Stephanie Castillo -
 
adobe.pptx
adobe.pptxadobe.pptx
adobe.pptx
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Como prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del WireframeComo prototipar MAL una aplicación. La importancia del Wireframe
Como prototipar MAL una aplicación. La importancia del Wireframe
 
Presentación cinema.pptx
Presentación cinema.pptxPresentación cinema.pptx
Presentación cinema.pptx
 
Las apps
Las appsLas apps
Las apps
 
Processing
ProcessingProcessing
Processing
 
Informatica
InformaticaInformatica
Informatica
 
Descripción del detector de rostros - Sistemas Adaptativos FIME
Descripción del detector de rostros - Sistemas Adaptativos FIMEDescripción del detector de rostros - Sistemas Adaptativos FIME
Descripción del detector de rostros - Sistemas Adaptativos FIME
 
AlexExamen Fnal
AlexExamen FnalAlexExamen Fnal
AlexExamen Fnal
 
Programas 3d
Programas 3dProgramas 3d
Programas 3d
 
Informatica,diseño grafico
Informatica,diseño graficoInformatica,diseño grafico
Informatica,diseño grafico
 
Presentación
PresentaciónPresentación
Presentación
 
De la A a la Z: ¿Cómo idear una app?
De la A a la Z: ¿Cómo idear una app?De la A a la Z: ¿Cómo idear una app?
De la A a la Z: ¿Cómo idear una app?
 
Diarios de campos jandry sanchez
Diarios de campos jandry sanchezDiarios de campos jandry sanchez
Diarios de campos jandry sanchez
 
1001 sketchup en goggle
1001 sketchup en goggle1001 sketchup en goggle
1001 sketchup en goggle
 

Más de xavazque2

Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
xavazque2
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
xavazque2
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
xavazque2
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
xavazque2
 

Más de xavazque2 (20)

258939538 dumping
258939538 dumping258939538 dumping
258939538 dumping
 
380914324 poo-kotlin
380914324 poo-kotlin380914324 poo-kotlin
380914324 poo-kotlin
 
146817358 android
146817358 android146817358 android
146817358 android
 
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlinCurso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
Curso profesional-de-desarrollo-de-aplicaciones-android-con-kotlin
 
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
364196144 hogan-pensamiento-no-verbal-comunicacion-y-juego
 
371081023 curso-desarrollo-android
371081023 curso-desarrollo-android371081023 curso-desarrollo-android
371081023 curso-desarrollo-android
 
4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones4.1. validaciones-y-excepciones
4.1. validaciones-y-excepciones
 
3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding3.1 mvc-mvvm-app model-binding
3.1 mvc-mvvm-app model-binding
 
5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http5.1. stateles stateful-protocolo_http
5.1. stateles stateful-protocolo_http
 
435338801 programacion-mobile-android
435338801 programacion-mobile-android435338801 programacion-mobile-android
435338801 programacion-mobile-android
 
457126889 android-pdf
457126889 android-pdf457126889 android-pdf
457126889 android-pdf
 
266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor266521557 apuntes-unidad-formativa-app-inventor
266521557 apuntes-unidad-formativa-app-inventor
 
7. react js-1
7. react js-17. react js-1
7. react js-1
 
Tp1
Tp1Tp1
Tp1
 
484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf484719815 pidiendo-ayuda-a-los-angeles-pdf
484719815 pidiendo-ayuda-a-los-angeles-pdf
 
484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf484717855 transmutacion-de-energias-pdf
484717855 transmutacion-de-energias-pdf
 
5.layouts
5.layouts5.layouts
5.layouts
 
6.2. js
6.2. js6.2. js
6.2. js
 
2.1. arena-y-binding
2.1. arena-y-binding2.1. arena-y-binding
2.1. arena-y-binding
 
411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf411958729 curso-de-delphi-pdf
411958729 curso-de-delphi-pdf
 

Último

redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
nicho110
 

Último (12)

Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21Innovaciones tecnologicas en el siglo 21
Innovaciones tecnologicas en el siglo 21
 
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptxEL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
EL CICLO PRÁCTICO DE UN MOTOR DE CUATRO TIEMPOS.pptx
 
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptxPROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
PROYECTO FINAL. Tutorial para publicar en SlideShare.pptx
 
Avances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvanaAvances tecnológicos del siglo XXI 10-07 eyvana
Avances tecnológicos del siglo XXI 10-07 eyvana
 
Buenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptxBuenos_Aires_Meetup_Redis_20240430_.pptx
Buenos_Aires_Meetup_Redis_20240430_.pptx
 
How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.How to use Redis with MuleSoft. A quick start presentation.
How to use Redis with MuleSoft. A quick start presentation.
 
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
Resistencia extrema al cobre por un consorcio bacteriano conformado por Sulfo...
 
Avances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estosAvances tecnológicos del siglo XXI y ejemplos de estos
Avances tecnológicos del siglo XXI y ejemplos de estos
 
pruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNITpruebas unitarias unitarias en java con JUNIT
pruebas unitarias unitarias en java con JUNIT
 
redes informaticas en una oficina administrativa
redes informaticas en una oficina administrativaredes informaticas en una oficina administrativa
redes informaticas en una oficina administrativa
 
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptxEVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
EVOLUCION DE LA TECNOLOGIA Y SUS ASPECTOSpptx
 
investigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXIinvestigación de los Avances tecnológicos del siglo XXI
investigación de los Avances tecnológicos del siglo XXI
 

325940441 motion-ui

  • 1. Motion ui Dictado por Craig Dehner / former APPLE UI Motion Designer on the Human Interface Team
  • 2. ODD CG postgrado digital O D D C G | C A S T R O 9 1 9 | G C B A I N F O @ O D D C G . C O M Milton Gonzalez A C A R G O D E : t r a b a j o s r e a l e s d e l o s d o c e n t e s “Se trata de enlazar todos los elementos y las pantallas de tu aplicación para contarle al usuario una historia so- bre todo eso: dónde estuvieron, adónde van y qué quieren hacer. Es un cuento: hay personajes, una historia. Y creo que es una manera fácil de entender la animación más allá de transiciones de una pantalla a la otra. No es un adorno, es el hilo conductor que hilvana todas las histo- rias.” – Craig Dehner.
  • 3. La animación se ha convertido en parte integral del diseño de interfaces, especialemente desde el lanzamiento del IOS7. Junto con el desarrollo de nuevos elementos visuales, la animación ahora juega un rol protagonista para definir la estrutura y las interacciones. La manera en que tus objetos se mueven es ahora tan im- portante como el impacto visual de los objetos en si mismo El taller esta dirigido a trabajar tanto el nivel proyectual de las animaciones para mejorar la inter- face, como tambien en el nivel técnico introduciendonos en las habilidades necesarias para poder presentar desarrolladores y clientes (a través de maquetados rápidos), tus ideas. Son varios los beneficios de integrar animaciones dentro de la interface, vamos a enfocarnos en la experiencia del usuario y comunicar ideas a través de la misma, trabajando areas que el diseño estatico no puede alcanzar. ODD CG postgrado digital O D D C G | C A S T R O 9 1 9 | G C B A I N F O @ O D D C G . C O M que es motion ui Taller intensivo
  • 4. O D D C G | C A S T R O 9 1 9 | G C B A I N F O @ O D D C G . C O M ­ ¿ Q u i e n e s e l P r o f e s o r ? Craig Dehner ah ayudado a crear y animar las interfaces que se utilizan en todos los dispositivos de Apple, trabajando dentro del Human Interface Team. Así que si alguna vez utilizaste un dispositi- vo de Apple has visto su trabajo. Estuvo involucrado en el rediseño del IOS 7, el nuevo look de Siri y la integración de 3D touch en IOS 9
  • 5. ODD CG postgrado digital O D D C G | C A S T R O 9 1 9 | G C B A I N F O @ O D D C G . C O M Motion ui taller intensivo Temas a trabajar No sabes usar after effects D i n a m i c a d e c u r s a d a Taller de 2 días intensivos trabajando y prototipeando en After Effects, EL TALLER VA A SER DICTADO EN INGLES Se completaran una series de proyectos en After Effects, esto incluira desde tran- siciones simples para aprender los elementos fundamentales de trabajar con key- frames y timing, hasta llegar a animaciones complejas, como carga de password y animaciones de iconos para aprender a crear animaciones simples y hermosas que tus usuarios van a disfrutar de ver una y otra vez!!! No te preocupes preparamos una clase especial el 16 de Abril junto a nuestra profe- sora Valeria Laura Rapoport Adobe Certified Expert para la versión CS6. Vamos a presentarte todas las herramientas que vas a necesitar usar en el taller con Craig. Mejorar la experiencia del usuario: -Reinforcing Spacial Relations -Motion Affordance -Confirming Actions -Hide Perceived Latency -Moments of Delight Fundamentos de la animación: -Animation Properties -Curves -Physics -Timing and Choreography
  • 6. ODD CG postgrado digital O D D C G | C A S T R O 9 1 9 | G C B A I N F O @ O D D C G . C O M Motion ui taller intensivo ¿ P O R Q U E VA M O S A T R A B A JA R E N A F T E R E F F E C T S ? Craig te lo explica: To create beautiful interface animations, the best tool for the job is After Effects. Why? A couple reasons: With After Effects you can rapidly prototype your ideas and visualize interactions Allows for any type of animation you can imagine, you are not limited to simple pre- sets Use the curves data to inform developers about animation timing Again, After Effects is fast. Once you know the basics, you can get an interface moving in no time. There are tools popping up all the time that are aimed specifically toward interface animation. Popular options are Principle, Origami, Pixate, and CoreAnimator. These programs are still in their infancy, and most still rely on a small set of animation pre- sets. However, these programs are sure to become robust design tools in the near future. The skills you learn in After Effects will translate to any key frame based prototyping tools.