Tipografía cinética Una guía introductoria

La tipografía cinética parece estar en todas partes estos días. Desde anuncios de televisión hasta páginas de destino de sitios web, los tipos móviles son una herramienta visual popular. Esta popularidad puede provenir de una serie de razones, pero un factor obvio es que llama la atención. Las personas tienden a ser atraídas por las palabras y quieren leerlas.

La tipografía cinética pone esto junto con algunas animaciones simples para crear palabras que se mueven en la pantalla, llamando tu atención y atrayendo los sentidos. Así que echemos un vistazo a la tipografía cinética y cómo puede integrarla en algunos de sus proyectos de diseño. (Nota: los ejemplos en este artículo incluyen animación; haga clic en las imágenes para ver los enlaces a las fuentes originales para verlas en acción).

¿Qué es la tipografía cinética?

La tipografía cinética se refiere a la creación de tipos en movimiento. Es una técnica de animación que se utiliza para hacer que las letras se expandan, se contraigan, se muevan, se muevan en cámara lenta, crezcan y cambien de muchas maneras para el usuario. El efecto puede ser simple y corto con solo pequeños cambios o bastante elaborado y largo.

El uso de la tipografía cinética casi ha estallado recientemente debido a un mayor uso de la técnica en el diseño web. Una vez que se utilizó solo en video y televisión, la tipografía cinética está ganando popularidad como efecto de fondo en sitios web y videos basados ​​en web. (Todo esto es posible gracias a la banda ancha más alta y más común y al aumento de las velocidades de navegación web y de Internet).

La técnica utilizada por varios motivos, pero puede agregar énfasis a cierto contenido. Puede ayudar a transmitir el tono y la emoción. Puede ayudar a crear un visual único donde no existe ninguno. Puede ser una opción asequible para aquellos con presupuestos limitados. Puede agregar interés cuando su diseño necesita un impulso.

Orígenes de la tipografía cinética

Si bien la tipografía cinética se puede etiquetar como una tendencia emergente para el diseño web actual, ha existido por bastante tiempo. Fue utilizado por primera vez en la pantalla grande.

Investigadores del Human Computer Interaction Institute y la Escuela de Diseño de la Universidad Carnegie Mellon han rastreado el primer uso de la tipografía cinética en la película de Alfred Hitchcock de 1959, "North by Northwest". En los créditos de apertura, el tipo se utiliza en un formato móvil. Un año más tarde, el efecto fue utilizado nuevamente en "Psycho". ? Este trabajo se deriva en parte del deseo de que los créditos de apertura establezcan el escenario de la película al establecer un ambiente, en lugar de simplemente transmitir la información de los créditos? los investigadores escribieron

Desde este punto, la tipografía cinética se volvió más común en el cine y más tarde en la televisión. Se ha utilizado en créditos, durante shows y para publicidades. Un uso notable de la tipografía cinética en la publicidad se produjo en 2009, cuando Pepsi lanzó un "¿Actualizar todo?" Campaña (ahora llamada? Pepsi Pulse?) con un nuevo logo. El nuevo diseño, con un logotipo en lugar de la letra 'o', apareció en todas partes, desde la televisión hasta en línea, utilizando tipos móviles.

Más recientemente, se ha convertido en una técnica muy utilizada en el diseño de sitios web (y también en algunas aplicaciones móviles) y es bastante común en los videos en línea. Se utiliza para todo, desde publicidad y promoción hasta arte, videos musicales y una herramienta de narración para periodistas.

¿Cuándo se debe usar tipografía cinética?

La tipografía cinética es una herramienta divertida para tu kit, pero no es una solución fácil para el problema de "no tengo ningún arte, así que ahora". Debe utilizarse, como cualquier otra herramienta, para un propósito específico y con un objetivo determinado en mente.

Existen usos en los que la tipografía cinética ha demostrado ser particularmente efectiva. Estos usos más relacionados con el tono. Agregar tipo móvil a algo que de otra manera sería de naturaleza estática puede agregar ayuda para lograrlo. Los mejores usos para la tipografía cinética incluyen:

  • Creando contenido emocional
  • Creando personajes
  • Captando atencion

La forma en que se mueve el tipo contribuye también a estos usos, de acuerdo con la investigación. Por ejemplo:? La sonoridad puede ser imitada cambiando el tamaño del texto, así como su peso, y ocasionalmente contraste o color. Para volúmenes altos, se pueden usar movimientos que imitan la vibración. En la creación de caracteres, el tipo se puede configurar para que se mueva de manera que imite el movimiento humano y se pueda animar aún más para "adjuntar". a objetos o formas en formas que crean relaciones espaciales o crean asociaciones a una dirección específica.

Aplicaciones de tipografía cinética

Ahora que está empezando a entusiasmarse con la idea de la tipografía cinética, ¿cómo puede usarla en aplicaciones prácticas? ¿Qué medios funcionan mejor?

Primero, el tipo móvil es un video y un formato en línea. A menos que esté creando un libro animado, hay pocos usos para este concepto en proyectos impresos. Es importante pensar en su audiencia y en la cantidad de tiempo que pueden pasar con una animación. Se recomienda mantenerlo corto para aplicaciones web y móviles, mientras que en películas o publicidad puede tener un poco más de tiempo con cada usuario.

De cualquier manera, es importante crear algo que sea interesante, fácil de leer y entender y que genere una conexión emocional. Los usos prácticos comunes para la tipografía cinética incluyen usos educativos, como el popular? Schoolhouse Rock? videos y programación que estuvieron en el aire desde 1973 hasta 2009; promocionales o publicitarios; y videos musicales.

Al planificar para la tipografía cinética, hay algunos patrones comunes de movimiento y comportamiento.

  • Cámara lenta o cámara rápida
  • Estiramiento o encogimiento
  • Movimiento en arcos u ondas a medida que el texto se desplaza por caminos curvos.
  • Acción anticipada, un movimiento tan sutil antes de uno agudo.
  • Seguir las acciones que suceden después de que algo más haya sucedido.
  • Acción secundaria cuando el texto se mueve debido a algo que le sucede a otro elemento en el marco.

Recursos y Tutoriales

Unir un tipo animado puede ser tan simple como crear un gif o tan complicado como producir un video musical. Pero hay muchos tutoriales buenos, y muy fáciles de seguir, disponibles si realmente desea aprender técnicas de tipografía cinética.

Primero, una recomendación para ver qué hay ahí fuera y el número ilimitado de opciones disponibles para crear tipos móviles. (Revisa la tipografía cinética en Tumblr para ver algunos ejemplos divertidos). Y luego comienza a jugar con gifs. Si se siente cómodo con las herramientas de animación de Adobe Photoshop, puede crear algo simple en minutos. Después de eso, es posible que desee pasar a proyectos más grandes.

Además, hay algunas herramientas para ayudarlo a crear animaciones de texto simples a toda prisa.

  • Motor de tipografía cinética
  • Tutorial de tipografía cinética por Jesse Rosten
  • Tutorial de tipografía cinética por gremlins torcidos
  • Técnicas de tipografía cinética con efectos posteriores
  • Curso de tipografía cinética de Udemy.
  • Adobe TV: tutoriales de vídeo de Learn Edge Animate
  • Consejos de animación tipo MotionWorks

Conclusión

Usar tipografía cinética puede ser una herramienta divertida. El tipo móvil puede agregar impacto, conexión emocional e interés visual a proyectos digitales y de video. Si bien las técnicas pueden tomar algún tiempo para dominarlas, es algo que probablemente se mantendrá. (Solo piense, los diseñadores han estado usando la técnica de alguna forma por más de 50 años).

¿Actualmente estás trabajando en proyectos utilizando tipografía cinética? ¿Cómo se están perfilando? Comparte tus pensamientos (y enlaces de proyectos) con nosotros en los comentarios. Nos encantaría ver en qué estás trabajando.