Tipografía cinética: una guía introductoria
La tipografía cinética parece estar en todas partes en estos días. Desde comerciales de televisión hasta páginas de inicio de sitios web, el tipo móvil es una herramienta visual popular. Esta popularidad podría provenir de una serie de razones, pero un factor obvio es que llama su atención. Las personas tienden a sentirse atraídas por las palabras y quieren leerlas.
La tipografía cinética combina esto con algunas animaciones simples para crear palabras que se mueven en la pantalla, captando su atención y captando 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 tipo móvil. Es una técnica de animación que se utiliza para hacer que las letras se expandan, encojan, vuelen, 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 explotado recientemente debido a un mayor uso de la técnica en diseño web. Una vez que algo que solo se usaba en video y televisión, la tipografía cinética está ganando popularidad como efecto de fondo en los sitios web y en los videos basados en la web. (Todo esto es posible gracias a una banda ancha más alta y más común y a mayores velocidades de navegación en Internet y en la web).
La técnica se usa por varias razones, pero puede agregar énfasis a cierto contenido. Puede ayudar a transmitir tono y 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 en la actualidad, existe desde hace bastante tiempo. Primero se usó en la pantalla grande.
Investigadores del Human Computer Interaction Institute y la School of Design de la Carnegie Mellon University han rastreado el primer uso de la tipografía cinética hasta la película de 1959 de Alfred Hitchcock de 1959 "North by Northwest". En los créditos iniciales, el tipo se usa en un formato móvil. Un año después, el efecto se usó nuevamente en "Psico". "Este trabajo surgió en parte del deseo de que los créditos iniciales prepararan el escenario para la película estableciendo un estado de ánimo, en lugar de simplemente transmitir la información de los créditos", escribieron los investigadores.
Desde este punto, la tipografía cinética se hizo más común en el cine y más tarde en la televisión. Se ha utilizado en créditos, durante espectáculos y para anuncios. Un uso notable de la tipografía cinética en la publicidad se produjo en 2009 cuando Pepsi lanzó una campaña de "Actualizar todo" (ahora llamada "Pepsi Pulse") con un nuevo logotipo. El nuevo diseño, que presenta un logotipo en lugar de la letra 'o', apareció en todas partes, desde televisión hasta en línea, utilizando tipos móviles.
Más recientemente, se ha convertido en una técnica ampliamente utilizada en el diseño de sitios web (y también para 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 para contar historias para periodistas.
¿Cuándo debe usar la tipografía cinética?
La tipografía cinética es una herramienta divertida para su kit, pero no es una solución fácil para el problema I-don't-have-any-art-so-now-what. Debe usarse, como cualquier otra herramienta, para un propósito específico y con un cierto objetivo en mente.
Hay usos en los que la tipografía cinética ha demostrado ser particularmente efectiva. Estos usos se relacionan más con el tono. Agregar tipos móviles a algo que de otra forma sería de naturaleza estática puede agregar ayuda para lograr esto. Los mejores usos para la tipografía cinética incluyen:
- Creando contenido emocional
- Creando personajes
- Capturando la atención
La forma en que se mueve el tipo contribuye a estos usos también, según la investigación. Por ejemplo: “El volumen se puede imitar cambiando el tamaño del texto, así como su peso y, en ocasiones, el contraste o el color. Para grandes volúmenes, se pueden usar movimientos que imitan la vibración ”. En la creación de caracteres, se puede configurar el tipo para que se mueva de una manera que imite el movimiento humano y además se puede animar a "adjuntar" a objetos o formas de manera que se creen relaciones espaciales o asociaciones en 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 flipbook, hay pocos usos para este concepto en proyectos impresos. Es importante pensar en su audiencia y la cantidad de tiempo que podrían pasar con una animación. Se recomienda mantenerlo breve 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 comprender y que cree una conexión emocional. Los usos prácticos comunes para la tipografía cinética incluyen usos educativos, como los populares videos y programas de "Schoolhouse Rock" que se emitieron en el aire desde 1973 hasta 2009; promocional o publicitario; y videos musicales.
Al planificar la tipografía cinética, hay algunos patrones comunes de movimiento y comportamiento.
- Cámara lenta o cámara rápida
- Estirarse o encogerse
- Movimiento en arcos u ondas a medida que el texto se mueve a lo largo de caminos curvos
- Acción anticipada, un movimiento tan sutil antes de uno agudo
- Siga las acciones que suceden después de que algo más ha sucedido.
- Acción secundaria cuando el texto se mueve debido a algo que le sucede a otro elemento en el marco
Recursos y tutoriales
Crear 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 súper fáciles de seguir, disponibles si realmente quieres aprender técnicas de tipografía cinética.
Primero, una recomendación para ver lo que hay ahí fuera y la cantidad ilimitada de opciones disponibles para crear tipos movibles. (Echa un vistazo a 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 Crooked Gremlins
- Técnicas de tipografía cinética con efectos posteriores
- Curso de tipografía cinética Udemy
- Adobe TV: tutoriales en video de Learn Edge Animate
- Sugerencias de animación de tipo MotionWorks
Conclusión
Usar la 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 tardar un tiempo en dominarse, es algo que probablemente se mantendrá. (Solo piense, los diseñadores han estado utilizando la técnica de alguna forma durante más de 50 años).
¿Estás trabajando actualmente en proyectos que utilizan tipografía cinética? ¿Cómo se están formando? Comparta sus pensamientos (y enlaces de proyectos) con nosotros en los comentarios. Nos encantaría ver en qué estás trabajando.