El diseño web moderno involucra muchas partes móviles, como el diseño de contenido, trabajar con íconos y experiencia de usuario estrategias de diseño. Una tendencia más reciente es el uso de microinteracciones en proyectos web y móviles. Se ven geniales en el proyecto final, pero no son tan fáciles de hacer con una maqueta estática. Entonces, los diseñadores recurrieron a programas de animación como After Effects para crear maquetas basadas en movimiento. Si está tratando de aprender este conjunto de habilidades, le recomiendo estos videos gratuitos de YouTube. No le enseñarán todo, pero cubrirán los conceptos básicos y le brindarán una base sólida para avanzar en su conjunto de habilidades.
1. Botón IU Animado
Así es corto IU animación el tutorial es perfecto para principiantes con poca o ninguna experiencia AE la experiencia. Se necesita un poco de paciencia para trabajar con la interfaz, pero las instrucciones son claras. Aprenderá cómo crear un efecto de animación para botones pequeños que pueden funcionar muy bien para sitios web o aplicaciones móviles. Esto no es nada espectacular, pero al final tendrás una comprensión mucho más sólida del concepto. 
2. Movimiento de prototipo
Otra animación simple que puedes hacer es un menú deslizante como en este video. Le enseña cómo animar un menú en After Effects y cómo trabajar con capas individuales en el software. Es un tutorial bastante largo con peces. 40 minutos de orientación paso a paso. Pero vale la pena el tiempo si puedes verlo hasta el final. 
3. AE Animación con iconos
Las animaciones de íconos pequeños no se agregan directamente a la interfaz, pero pueden mejorar la experiencia del usuario. Estos movimientos de íconos se refieren a esas pequeñas microinteracciones mencionadas anteriormente. Y este icono de animación tut habla de microinteracciones con instrucciones fáciles de seguir. Incluso puedes descargar íconos gratis en PSD/formato AI y utilícelos para la animación. Pero esto también es útil para los diseñadores de íconos que crean sus propios íconos desde cero y desean animarlos para la producción. 
4. Animado IU/Cursores de experiencia de usuario
Muchos diseñadores crean experiencia de usuario animaciones para mostrar cómo debería funcionar una interfaz. Esto naturalmente incluiría clics/deslizamientos del mouse, ya que desea ver cómo se mueve el contenido por la página. Si quieres añadir movimientos de cursor a sus diseños, entonces este tutorial es para usted. es solo una guia bastante corta 15 minutos, pero la información es súper valiosa y relevante tanto para dispositivos móviles & diseñadores web 
5. La aplicación para iPhone IU
Otro buen ejemplo de animación centrada en el usuario es Éste siguiendo una entrada típica a la aplicación de iPhone. Cree la ruta de un usuario a través de una aplicación de iPhone completando campos de formulario individuales. En sí mismo, esto puede no parecer mucho, porque la gente sabe cómo es este proceso. Pero si está diseñando una página web o una aplicación que tiene un solo flujo, ayuda mostrar el comportamiento completo del usuario, desde ingresar información hasta iniciar sesión y tal vez más. 
6. Desliza la página de la aplicación
Los diseñadores de aplicaciones móviles pueden usar controles deslizantes de página para interfaces de varias páginas. Estos funcionan muy bien para galerías y efectos paginados. En el este breve tutorial aprenderá a crear animaciones de diapositivas de página con After Effects usando algunas plantillas existentes. Este video viene gratis de experiencia de usuario Moviente donde tienen muchos tutoriales similares y talleres privados. El tema de experiencia de usuario el movimiento no recibe mucha cobertura en la web, pero estos muchachos son uno de los pocos buenos que realmente entran en los detalles. Echa un vistazo a todo su canal de YouTube si quieres obtener más información. 
7. Gelatina IU animaciones
Probablemente hayas visto extraños menús de gelatina líquida en las aplicaciones de Android o incluso en la web. Estos no son muy comunes porque son difíciles de recrear en código, pero con esta gelatina IU tutorial al menos puedes construir las animaciones desde cero. Es otro obsequio de experiencia de usuario en movimiento y totaliza solo aprox. 5 minutos. Pero aprenderá mucho sobre After Effects y en general. experiencia de usuario proceso de animación. Específicamente, cómo importar vectores y trabajar con esos archivos en una línea de tiempo, realmente solo los conceptos básicos de la animación de la interfaz de usuario. 
8. Animación en ejecución
Si bien no puedo decir que esta animación afecte directamente la interfaz, es algo excelente para agregar al logotipo de su sitio web. Ejecución de animaciones se utilizan principalmente en intros de video para crear una imagen de marca. Pero los sitios web también pueden tener animaciones similares que se desarrollan a través del uso. SVG gráficos y básicos JS animaciones Incluso si no desea crear animaciones de logotipos, este tutorial puede guiarlo a través de uno simple. AE flujo de trabajo de la interfaz. Perfecto para aprender las cuerdas sin demasiado estrés. 
9. Básico IU Prototipos de animaciones
Los menús de aplicaciones móviles vienen en muchos estilos diferentes con diferentes técnicas de animación. Este IU tutorial te enseña cómo animar el menú desplegable del icono. Esto se atribuyó por primera vez a la aplicación Path, pero desde entonces se ha convertido en una tendencia común en los dispositivos Android e iOS. encima de eso 20 videoclip, encontrará ideas para la animación de iconos y el diseño de menús. Es bastante sencillo trabajar con él y puede usar íconos de flujo de trabajo prediseñados para ahorrar tiempo. 
10. 3d Divisiones de capas
Las animaciones de presentación son valiosas para el trabajo del cliente o para compartir sus ideas frente a un equipo. Allá este 3d capa de animación el tutorial puede ayudar. Le enseña cómo dividir diferentes elementos de capa y separarlos de la interfaz completa. Incluso puede mostrar diferentes elementos de la página para mostrar cómo debería funcionar su aplicación/sitio web. No puedo imaginar que esto sea valioso para el trabajo personal, pero es un gran efecto para aprender, especialmente para conciertos comerciales. 
11. iOS 8 conmutación
Los interruptores de encendido/apagado animados aparecieron por primera vez en las primeras versiones de iOS y desde entonces se han extendido a Android y sitios web generales. El mejor IU Los interruptores tienen animaciones personalizadas y puedes crear las tuyas siguiendo este 25tutorial de un minuto. Se supone que ya tiene los gráficos del interruptor, pero también puede descargarlos un regalo de promoción PSD y úsalo en su lugar. Además, puede reutilizar esta animación para cualquier tipo de interruptor que diseñe en el futuro. Un gran tutorial para alguien que acaba de entrar en After Effects IU/UX. 
12. Animaciones de iconos suaves
El último en mi lista es este icono movimiento detallado tut utilizando varias formas vectoriales diferentes. Es una guía bastante detallada que totaliza un poco más 30 minutos y cubriendo algunas técnicas diferentes. Una vez que conozca After Effects, podrá aplicar estas ideas a otros estilos de iconos. Es por eso que este tutorial es tan bueno para principiantes; te enseña a trabajar en AE la interfaz con técnicas específicas para IU/Diseñadores de UX. Pero cualquiera de estos tutoriales te mejorará. experiencia de usuario habilidades de animación, así que asegúrese de marcar las que le llamen la atención. 
