Comenzando con el diseño de movimiento UI

Cómo el flujo de trabajo puede cambiar la forma en que diseña

Nuestro trabajo en This Also se divide principalmente en dos categorías: diseño del producto y visión del producto. Para nuestros proyectos de diseño de productos, trabajamos en productos o plataformas existentes y diseñamos para lanzamientos a corto plazo. Compartimos diseños detallados y prototipos desechables temprano y, a menudo, con nuestro cliente para ofrecer el mejor producto al consumidor final.

El trabajo de visión del producto, por otro lado, explora cómo podría verse un producto o una plataforma en dos o cinco años. Los detalles son menos importantes que presentar una visión convincente del futuro. La audiencia final para este tipo de trabajo es a menudo un ejecutivo con tiempo limitado pero con la capacidad de tomar decisiones estratégicas que permitirán a los equipos de productos buscar trabajo innovador.

Al abordar este tipo de productos complejos, un diseño de movimiento puede ser una gran herramienta para organizar grandes equipos en torno a conceptos básicos. Hemos descubierto que ser más rápidos y más eficientes con nuestras herramientas nos ha liberado para resolver problemas de manera integral. En este tutorial, compartiré un poco sobre cómo hemos acelerado nuestro flujo de trabajo para hacer que el movimiento sea una parte integral de nuestro proceso de diseño. Con el tiempo, incluso descubrí que usaré After Effects como la primera herramienta en un proyecto, ya que puede ser una de las formas más rápidas de esbozar la estructura de un producto.

No faltan grandes recursos de diseño de movimiento y After Effects, y compartiré mis favoritos aquí (y en este práctico paquete de enlaces). Sin embargo, descubrí que uno de los desafíos en el desarrollo de un conjunto de habilidades de movimiento de UI es crear un flujo de trabajo y un conjunto de herramientas que lo harán trabajar e iterar más rápido.

Este no es un tutorial, sino un plano de mis técnicas, herramientas y tutoriales favoritos para ayudarlo a desarrollar su propia práctica. Es útil estar familiarizado con After Effects, pero también le señalaré recursos que lo ayudarán a comenzar desde cero.

Configurar su archivo de Photoshop

Organice su archivo antes de pasar a After Effects

Si solo estoy produciendo conceptos de movimiento rápido, entonces esbozaré la interfaz de usuario usando sólidos y formas en After Effects. Pero para diseños más pulidos, siempre comienzo en Photoshop. Es la forma más rápida y directa de animar un diseño rápidamente. Si es principalmente un usuario de Sketch, existe una solución alternativa para Illustrator, pero aquí me centraré en Photoshop.

Hay dos cosas simples pero importantes que debes saber al configurar tu archivo de Photoshop:

  1. Una capa u objeto inteligente en Photoshop se convierte en una capa en After Effects
  2. Un grupo de capas u objetos inteligentes en Photoshop se convierte en una composición de capas en After Effects

Para que su línea de tiempo de After Effects sea manejable, querrá tener la menor cantidad posible de capas y composiciones. Para hacer esto, deberá comenzar a imaginar qué elementos requieren movimiento. Considere lo siguiente mientras se organiza:

  • ¿Necesito animar este componente? Para un componente estático como la barra de estado de un teléfono, considere aplanar todos los elementos de la interfaz de usuario en una sola capa.
  • ¿Necesito animar elementos dentro de este componente? Digamos que tiene una lista de artículos. Es posible que no solo desee animar esa lista, sino también animar cada elemento de la lista. En este caso, crearía un grupo donde cada elemento de la lista es una capa.
  • ¿Puedo simplificar este elemento? Una técnica común es usar máscaras de recorte y capas de formas para recortar imágenes. Debido a que esto crearía dos capas en After Effects, combine las capas en un solo objeto inteligente en Photoshop antes de importar.
Arriba: panel Capas en Photoshop, Abajo: panel Línea de tiempo en After Effects después de la importación. El icono al lado de [Lista de mensajes] indica que la capa es una composición.

Este es un proceso tedioso sin reglas concretas, pero con suficiente experiencia aprenderá cómo organizar sus capas y grupos de manera rápida y eficiente para sus propias necesidades.

Consejo: Agregue algunas capas vacías a su archivo de Photoshop antes de importar. Si bien algunos cambios en los archivos de Photoshop aparecerán en After Effects, existen limitaciones. La mejor manera de agregar un nuevo elemento es agregarlo a una capa vacía existente en su archivo de Photoshop.

Importar a After Effects

Mantenga una carpeta organizada y la estructura del proyecto

Cuando importe un archivo de Photoshop en After Effects, verá lo siguiente:

Seleccione siempre Composición - Conservar tamaños de capa y estilos de capa editables. Esto importa su archivo como composición e incluye acceso a cualquier estilo de capa que haya seleccionado en Photoshop.

Aquí, la organización es clave. After Effects no funciona bien con los archivos que faltan, y no querrás pasar un tiempo precioso volviendo a vincular archivos. Para ahorrarte un dolor de cabeza:

  • Crea una sola carpeta para todo tu proyecto. Guarde sus PSD en una carpeta dedicada, como _PSD. Cuando cree un proyecto de After Effects, guarde también su proyecto en esa carpeta. Puede crear otras carpetas de otros tipos de activos como _Audio. Utilizo un "_" antes de mis carpetas de activos para colocarlas en la parte superior de mi ventana del buscador sobre mi archivo de proyecto de After Effects (AEP), pero sigo las convenciones de organización y nomenclatura que normalmente hace.
  • Mantenga su panel Proyecto en After Effects organizado. Tan pronto como empiezo a importar, empiezo a organizar. Cree una carpeta _Layers y agregue su carpeta de capas de Photoshop; rara vez tendrá que hacer referencia a esto, principalmente solo para recargar o volver a vincular archivos. Muevo mis composiciones importadas a una carpeta _Comps.

Por último, querrás ajustar la configuración de composición para tus propósitos. Al trabajar exclusivamente con activos digitales y sin video, configuro la composición de la siguiente manera:

En general, entregamos video a 1080p. Establecer la velocidad de fotogramas a 60 FPS proporciona una animación suave y la selección de píxeles cuadrados garantiza que nuestros archivos de Photoshop aparezcan 1: 1 en After Effects.

Organizando tu espacio de trabajo

Los paneles y complementos esenciales para el movimiento de la interfaz de usuario

Debido a que After Effects se desarrolló originalmente para la postproducción de video, hay cientos de funciones disponibles de las que necesitará. Aquí están las ventanas predeterminadas que mantengo abiertas. Una vez que configure su espacio de trabajo, guárdelo para que siempre pueda volver a su valor predeterminado.

Complementos

Existen muchos complementos y scripts para acelerar su diseño de movimiento y AEscripts.com es un gran recurso. Aquí hay algunos complementos que he encontrado esenciales para mi proceso:

  • Facilidad y Wizz: para curvas de animación personalizadas, querrás profundizar en el editor de gráficos. Pero cuando dibuje un movimiento aproximado para pruebas de concepto, puede confiar en las curvas de stock. Este complemento le permite agregar curvas a capas con un solo clic. Aquí hay un video corto para ver todas las curvas en acción.
  • Motion v2: este complemento es una fuente inagotable. Las características a las que recurro con mayor frecuencia son las herramientas de velocidad y anclaje. El creador también ha proporcionado un extenso tutorial sobre complementos.
  • pt_ShiftLayers: proporciona una forma rápida de escalonar y desplazar capas en su línea de tiempo.
  • pt_CropPrecomps: este es un concepto más avanzado, pero cuando importa un archivo de Photoshop con grupos, el contenido de las capas dentro del grupo aparecerá en After Effects en un lienzo del tamaño del archivo original. Este complemento recorta el exceso de píxeles vacíos para un mejor control sobre sus capas. Aquí hay un útil video explicativo.
  • GifGun: un clic para crear GIF animados. Si bien no obtendrá un excelente renderizado, me ha resultado muy útil compartir conceptos de movimiento rápido con mi equipo en Slack.

Sugerencia: para asegurarse de que sus complementos funcionarán, abra Preferencias> General y asegúrese de que la casilla junto a Permitir que los scripts escriban archivos y Acceda a la red esté marcada.

Atajos

Como cualquier programa de software, dominar los accesos directos mejorará su velocidad y flujo de trabajo. After Effects es un programa muy tedioso para usar con un mouse: constantemente gira las propiedades hacia abajo, mueve el cursor de reproducción, agrega fotogramas clave, etc. Aquí hay una selección de atajos útiles para comenzar.

Animando la IU

Tutoriales, recursos y consejos.

Como mencioné antes, no faltan excelentes tutoriales y recursos. Estos son solo algunos de mis favoritos para comenzar:

  • UX en movimiento: Issara Willenskomer ha escrito y producido la mayor cantidad de contenido y tutoriales centrados específicamente en la animación de la interfaz de usuario en After Effects. Desde las mejores prácticas hasta el meollo de la animación, lo ha cubierto todo y es un recurso indispensable para la comunidad. Además de sus cursos, su blog tiene una serie de tutoriales gratuitos. Si nunca has abierto After Effects, su serie de inicio es un excelente lugar para comenzar.
  • Movimiento de materiales: el diseño de movimiento de la interfaz de usuario no se trata solo de las herramientas, sino también de los principios y reglas que rigen su sistema de movimiento. Si bien es específica del diseño de materiales, la guía Material Motion proporciona un marco interesante para comenzar a pensar en cómo abordar su diseño de movimiento.
  • Movimiento y significado: un podcast sobre movimiento para diseñadores digitales presentado por Val Head y Cennydd Bowles. Mira este en Animación y Accesibilidad.
  • Interfaces de transición: Pasquale D’Silva es un animador para conocer, y esta es una gran descripción del uso funcional de la animación. Más tarde lo amplió en esta charla esencial.
  • Ir de A a B: una discusión exhaustiva sobre la interpolación de Marcus Eckert.
  • monte Mograph: Matt Jylkka, el creador de Motion v2, tiene una gran colección de recursos de After Effects. Si bien los tutoriales no son específicos de las interfaces, tomé muchas técnicas y las apliqué a mi propio trabajo.
  • ECAbrams: de manera similar, Evan Abrams ofrece una gran selección de tutoriales de After Effects, incluidos algunos conceptos más avanzados.
  • Las 5 expresiones más importantes de After Effects: no he tocado mucho las expresiones aquí, pero a medida que desarrolla sus habilidades, son una forma esencial de acelerar su flujo de trabajo. Aquí está mi referencia rápida de expresiones a las que me encuentro volviendo a menudo.

Comience con la navegación

Acérquese a la animación de la interfaz de usuario tal como lo haría con el diseño de la interfaz de usuario: piense en la estructura y el flujo del producto antes de profundizar en los detalles. Si bien las técnicas de animación específicas que utilizo varían ampliamente de un proyecto a otro, siempre empiezo uniendo las pantallas principales.

La clave aquí es reducir las dependencias. Supongamos que está animando una aplicación móvil en la que desliza de pantalla en pantalla. Es posible que desee cambiar el tiempo o el orden de sus pantallas más adelante sin afectar la animación de la interfaz de usuario de cada pantalla.

Para hacerlo, haga de cada pantalla una composición separada. Hay tres formas de hacer esto: 1) importar cada pantalla como un archivo de Photoshop separado, 2) crear un grupo para cada pantalla en su archivo de Photoshop, o 3) precomponer sus capas directamente en After Effects.

Luego, al organizar las pantallas una al lado de la otra y criar cada una de ellas en la primera pantalla, puede animar las pantallas juntas agregando solo dos fotogramas clave.

Luego, anima los detalles

Una vez que tenga un buen manejo del flujo, comenzaré a animar los detalles. Aquí hay algunas sugerencias y recursos para abordar esta parte del proceso:

  • Errar por el lado de menos es más. Recuerde, su interfaz de usuario no es una película de Disney. Dribbble, si bien es una gran fuente de inspiración, también requiere un ojo crítico, ya que muchos de los gifs están sobrediseñados y sobrevalorados. Consulte 5 errores que debe evitar al diseñar microinteracciones para obtener más información al respecto.
  • Mantenga las cosas lentas y constantes. Cuanto más tiempo trabajes en una pieza de animación, más lenta te parecerá la animación, pero es solo tu cerebro el que te engaña. A menudo me encuentro acelerando una animación, solo para mostrarle a alguien que dice que se siente demasiado rápido. Es mejor mantenerlo un poco más lento, especialmente para los tutoriales de IU que se presentarán a una audiencia que no esté familiarizada con el trabajo.
  • Piensa fuera de la línea de tiempo. No todo tiene que ser fotogramas clave y curvas, y a menudo hay múltiples formas de abordar una animación. Al animar un tablero de escritorio que requería docenas de barras de actividad que se actualizaban constantemente, sabía que no quería animar manualmente cada barra en el transcurso de 30 segundos. Intenté algunas cosas, como las expresiones y los controles deslizantes, pero la forma más rápida de crear todas estas barras fue usar el efecto de espectro de audio y jugar con la configuración hasta que obtuve el efecto deseado.

Consejo: si siente que After Effects está siendo un poco lento, intente esto: vaya a Preferencias> Caché de disco y medios y seleccione Caché de disco vacío ... También puede intentar asignar más espacio a su caché si tiene espacio disponible.

Exportador

Renderizar y compartir sus borradores y piezas finales

Al igual que la animación, existen muchos enfoques diferentes para representar y exportar su trabajo, y muchas opiniones sobre la "mejor" forma de hacerlo. Deberá tener en cuenta la calidad deseada, el tipo de archivo de salida, el tiempo que tiene que procesar, etc. A continuación, presentamos una descripción general de alto nivel sobre cómo los aspectos básicos de la exportación.

Vistas previas rápidas

Mientras trabaja en After Effects, puede obtener una vista previa de su animación utilizando el acceso directo designado en el panel Vista previa (a menudo la barra espaciadora). Sin embargo, generalmente me encuentro con ganas de salir del programa After Effects para ver mi trabajo y compartirlo con mi equipo.

Como mencioné anteriormente, me gusta usar GifGun para compartir rápidamente conceptos e ideas generales. A veces, el diseño de movimiento es una parte temprana de nuestro proceso: mientras trabajaba en una interfaz de TV, parte de nuestro equipo trabajó en Photoshop para desarrollar el diseño visual, mientras que trabajé en After Effects para explorar los conceptos de navegación. Compartir gifs en Slack aceleró el flujo de trabajo y la ideación de nuestro equipo.

Si quiero compartir el archivo QuickTime pero no pasar mucho tiempo renderizando, puedo renderizar con una calidad menor agregando mi composición a la Cola de renderizado, seleccionando Configuración de renderizado y eligiendo una resolución más pequeña.

Renders finales

Ahora, si alguna vez jugó en After Effects y exportó un archivo QuickTime, es posible que se haya encontrado con un problema en el que QuickTime tiene que convertir el archivo, un proceso que consume un tiempo precioso. Para resolver este problema, debe exportar el video utilizando el códec H.264.

Para hacerlo, agregue su composición a la Cola de renderizado, haga clic en el enlace azul al lado del Módulo de salida. Asegúrese de que Quicktime esté seleccionado en el menú desplegable Formato y luego seleccione Opciones de formato. En el menú desplegable Códec de video, seleccione H.264. Después de seleccionar Aceptar dos veces, notará que el Módulo de salida ahora dice Personalizado: QuickTime. Sin embargo, esto solo se aplicará a este render. Para aplicar a todos sus renders en el futuro, querrá crear una plantilla de módulo de salida personalizada. Este no es un proceso sencillo, así que aquí hay un buen tutorial general.

Sin embargo, una vez que tenga la capacidad de crear sus propias plantillas, podrá optimizar su proceso de exportación y pasar menos tiempo jugando con la configuración.

Consejo: si está trabajando en animaciones muy complicadas, largas o pesadas en 3D y tiene acceso a varias máquinas, es posible que desee considerar la representación en red.

Estos principios básicos de flujo de trabajo lo ayudarán a trabajar de manera más rápida y eficiente en After Effects. Con suficiente fluidez en las herramientas y métodos, el diseño de movimiento puede convertirse en una parte clave de su proceso de diseño. No solo podrá producir videos pulidos y elegantes, sino que también tendrá otra herramienta a su disposición para enfrentar los desafíos del diseño de la interfaz de usuario.

Aquí hay un paquete de enlaces de todos los recursos mencionados aquí.

¿Tienes un tutorial, recurso o consejo favorito sobre AE? Compártelo en los comentarios!