12 tutoriales gratis de AE para profesionales de UX
El diseño web moderno implica muchas partes móviles, como el diseño de contenido, el trabajo con iconos y Estrategias de diseño UX . Una tendencia más nueva es el uso de microinteracciones en proyectos web y móviles.
Estos se ven geniales en el proyecto final, pero no son tan fáciles de hacer con una maqueta estática. Así que los diseñadores han estado seleccionando programas de animación como After Effects para crear maquetas basadas en movimiento.
Si estás tratando de aprender este conjunto de habilidades, recomiendo estos videos gratuitos en YouTube. No te enseñarán todo, pero cubrirán lo básico y te darán una base sólida para avanzar en tu conjunto de habilidades.
1. Botón IU animado
Esta muy breve animación UI el tutorial es perfecto para principiantes con poca o ninguna experiencia en EA. Requiere algo de paciencia para trabajar a través de la interfaz, pero las instrucciones son claras como el cristal.
Aprenderá a crear un efecto de animación de botón pequeño que puede 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 fuerte de este concepto.
2. Prototipo de movimiento
Otra animación simple que puedes hacer es un menú deslizante como en este video . Le enseña a animar un menú en After Effects y cómo trabajar con capas individuales en el software.
Es un tutorial bastante largo con más de 40 minutos de orientación paso a paso. Pero vale la pena el tiempo si puedes verlo hasta el final.
3. Animación de icono AE
Las animaciones de iconos pequeños no se agregan directamente a la interfaz, pero pueden mejorar la experiencia del usuario. Estos movimientos de iconos se relacionan con esas microinteracciones pequeñas mencionadas anteriormente.
Y este icono animación tut habla de microinteracciones con instrucciones fáciles de seguir. Incluso puedes descargar iconos gratis en formato PSD / AI y usarlos para la animación.
Pero esto también es útil para los diseñadores de iconos que crean sus propios iconos desde cero y desean animarlos para la producción.
4. Cursores UI / UX animados
Muchos diseñadores crean animaciones UX para mostrar cómo debería funcionar una interfaz. Naturalmente, esto incluiría clics / clics del mouse porque desea ver cómo se mueve el contenido en la página.
Si quieres agregar movimientos de cursor a tus maquetas entonces este tutorial es para ti. Es una guía bastante corta, de solo 15 minutos de duración, pero la información es muy valiosa y relevante tanto para los diseñadores de dispositivos móviles como para los diseñadores web.
5. UI de la aplicación iPhone
Otro buen ejemplo de una animación centrada en el usuario es éste siguiendo una entrada típica de la aplicación de iPhone. Está creando la ruta de un usuario a través de una aplicación de iPhone que completa los campos de formulario individuales.
Por sí solo esto puede no parecer mucho ya que la gente sabe cómo es este proceso.
Pero si está diseñando una página web o una aplicación que tiene un flujo único, entonces ayuda a mostrar todo el comportamiento del usuario al ingresar información e iniciar sesión, y tal vez más.
6. Deslizamientos de la página de la aplicación
Los diseñadores de aplicaciones móviles pueden utilizar desplazamientos de página para interfaces de múltiples páginas. Funcionan muy bien para galerías y efectos paginados.
En este breve tutorial aprenderá a crear animaciones de barrido de página con After Effects usando algunas maquetas existentes. Este video es gratis UX en movimiento donde tienen un montón de tutoriales similares y talleres privados.
El tema del movimiento de UX no se cubre mucho en la web, pero estos chicos son unos de los pocos que realmente profundizan en los detalles. Eche un vistazo a todo su canal de YouTube si desea obtener más información.
7. Animaciones de UI de Jelly
Probablemente haya visto menús extraños de gelatina líquida en aplicaciones de Android o incluso en toda la web. Estos no son súper comunes porque son difíciles de recrear en el código, pero con este tutorial de Jelly UI al menos puedes construir las animaciones desde cero.
Es otro regalo de UX in Motion y solo suma unos 5 minutos.
Pero aprenderá mucho sobre After Effects y el proceso general de animación UX. Específicamente, cómo importar vectores y trabajar con esos archivos a lo largo de una línea de tiempo: realmente solo los aspectos básicos del trabajo de animación de la interfaz.
8. Animación desplegable
Si bien no puedo decir que esta animación afecte directamente a la interfaz, es algo genial que puede agregar al logotipo de su sitio web. Animaciones desplegables se usan principalmente en intros de video para crear una imagen personalizable.
Pero los sitios web también pueden tener animaciones desplegables similares al usar Gráficos SVG y animaciones JS básicas.
Incluso si no desea crear animaciones de logotipo, este tutorial puede guiarlo a través de un flujo de trabajo de interfaz AE simple. Perfecto para aprender las cuerdas sin mucho estrés.
9. Animaciones básicas del prototipo de IU
Los menús de aplicaciones móviles vienen en diferentes estilos con diferentes técnicas de animación. Este tutorial de UI le enseña cómo animar el menú del icono de la burbuja flotante.
Esto se atribuyó primero a la aplicación Path, pero desde entonces se ha convertido en una tendencia común para dispositivos Android e iOS.
En este video de 20 minutos, recogerás ideas para animación de iconos y diseño de menú. Es muy sencillo trabajar con él y puede usar iconos prediseñados para el flujo de trabajo para ahorrar tiempo.
10. Splits de capa 3D
Las animaciones de presentación son valiosas para el trabajo del cliente o para compartir sus ideas frente a un equipo. Ahí es donde esta animación de capa 3D tutorial puede ayudar.
Te enseña cómo dividir diferentes elementos de capa y separarlos de la interfaz completa. Incluso puede mostrar diferentes elementos de página para mostrar cómo debería funcionar la aplicación / sitio web.
No me puedo imaginar que esto sea valioso para el trabajo personal, pero es un efecto genial aprender especialmente para actuaciones comerciales.
11. iOS 8 Switches
Los interruptores animados de encendido / apagado aparecieron por primera vez en las primeras versiones de iOS y desde entonces se han extendido a sitios web generales y de Android.
Los mejores conmutadores de la interfaz de usuario tienen animaciones personalizadas y puede crear la suya siguiendo este tutorial de 25 minutos . Supone que ya tiene los gráficos de cambio, pero también puede descargar un PSD gratis y usar eso en cambio.
Además, puede reutilizar esta animación para cualquier tipo de cambio que diseñe en el futuro. Un excelente tutorial para alguien que acaba de ingresar a After Effects para UI / UX.
12. Animaciones de iconos suaves
El último en mi lista es este icono detallado de movimiento tut usando algunas formas diferentes de vectores. Es una guía bastante detallada que suma un poco más de 30 minutos y cubre algunas técnicas diferentes.
Una vez que conozca el camino de After Effects, puede aplicar estas ideas a otros estilos de iconos. Es por eso que este tutorial es tan bueno para principiantes; le enseña cómo trabajar en la interfaz AE con técnicas específicas para diseñadores de UI / UX.
Pero cualquiera de estos tutoriales mejorará sus habilidades de animación UX, así que asegúrese de marcar cualquiera que llame su atención.
