Manual de animación de InVision: comunicar y emocionar a través del movimiento digital

Animation Handbook, InVision.

Acaba de estrenarse un pequeño manual gratuito de 72 páginas sobre animación digital producido por Design Better de InVision y escrito por Ryan McLeod (Animation Handbook). El manual se inspira en el tradicional lema de diseño ‘Muestra, no cuentes’ y su fin es dotar de emoción a las experiencias digitales.

Aprendiendo cómo puede usar la animación para demostrar conceptos abstractos y hacer que los productos se sientan más realistas.

Ryan McLeod, autor del manual residente en Amsterdam, ganó en 2017 el prestigioso Apple Design Award de accesibilidad, singularidad, juego e innovación de su aplicación para iOS Blackbox.

Dejaremos aquí algunas de las características del movimiento y la animación que se explican con detalle en el manual:

  • Comunica cambio y contexto.
  • Llama la atención.
  • Captura la emoción.
  • Invita a descubrir y a jugar.
  • Da vida a las aplicaciones.

A partir de estos conceptos, el autor explica con ejemplos los principales principios del movimiento, basados en aquellos postulados en el libro de la edad de oro de la animación de Frank Thomas y Ollie Johnston ‘Disney Animation: The Illusion of Life‘ .

The Illusion Of Life Disney Animation – Frank Thomas & Ollie Johnston
The Illusion Of Life Disney Animation es uno de los libros mas recomendados por cualquier animador profesional.

El tercer capítulo del manual está dedicado a explicar cómo la animación se ha convertido en una herramienta más del lenguaje del diseño, un elemento básico en la era digital que se debe tener en cuenta desde el inicio de cualquier proyecto.

Merece una mención la reserva de links y accesos a lecturas complementarias que encontramos al final de cada capítulo.

Las últimas páginas están dedicadas a las técnicas para llevar la animación un paso más allá con ‘fluidez, matices, consistencia y humanidad’.

El valle inquietante de la animación 3D

Diferentes renderizados virtuales.

El valle inquietante (‘The Uncanny Valley’) es una hipótesis acuñada por el profesor de robótica Masahiro Mori en 1970 que afirma que cuando la apariencia de un robot se parece más a un humano, la respuesta emocional del observador se irá haciendo más positiva. Sin embargo, llega un punto en el que la respuesta  se vuelve muy negativa. En esa zona negativa se encontraría el valle inquietante. Pasado el valle, la empatía con el robot vuelve subir.

The Uncanny Valley: Existence and Explanations, Shensheng Wang, Scott O. Lilienfeld, and Philippe Rochat
The Uncanny Valley: Existence and Explanations, Shensheng Wang, Scott O. Lilienfeld, and Philippe Rochat

 

Según la hipótesis, tenemos una respuesta psicológica negativa a los robots que casi se parecen al ser humano al apreciar algo extraño (nos da mal rollo, vemos algo siniestro, como un cadáver espeluznante).

 

En 1970 el Doctor Mori diseñó un gráfico en el cual se encuentra la representación de los diseños de los robots en función del parecido humano y como resultante obtenemos el agrado del diseño, dicho gráfico es el conocido como “Uncanny Valley”.
En 1970 el Doctor Mori diseñó un gráfico en el cual se
encuentra la representación de los diseños de los robots en función del parecido
humano y como resultante obtenemos el agrado del diseño, dicho gráfico es el
conocido como “Uncanny Valley”.

 

 

Se supone que el gusto por un robot aumenta cuanto más humano es, hasta que cruza hacia el valle (el área gris).
Se supone que el gusto por un robot aumenta cuanto más humano es, hasta que cruza hacia el valle (el área gris).

 

Wired: La hipótesis del valle inquietante aplicada a 'celebrities'
Wired: La hipótesis del valle inquietante aplicada a ‘celebrities’

 

Userlike: la hipótesis del valle inquietante aplicado a los servicios al cliente.
Userlike: la hipótesis del valle inquietante aplicado a los servicios al cliente.

Referencias:

  • La influencia del Efecto ‘Uncanny Valley’ en el Diseño de un Robot Social (pdf), Anaís Garrell Zulueta
  • Face Reality: Investigating the Uncanny Valley for virtual faces, Rachel McDonnell, Trinity College Dublin (pdf)
  • Total Recoil: The Uncanny Valley is an Uncanny cliff, Jessica Outlaw (web)

Animación 2D después de Flash

Las restricciones de algunos dispositivos móviles a la avanzadísima
tecnología Flash (lenguaje ActionScript) ha supuesto una caída de los
contenidos animados.

No ha sido así en el campo del vídeo, los juegos y las
apps móviles, donde Flash todavía tiene mucho camino que recorrer.

Ayer, mi amigo y gran profesor Javier Mateo comentaba que en
muchos sitios web ahora encontramos de nuevo el viejo y querido GIF animado, un
formato que es soportado por todos los navegadores y dispositivos.
Actualmente se está produciendo una explosión de nuevos
productos que permiten contar tus historias con movimiento y audio. Nos
encontramos a mitad de camino entre el ‘boom’ de la animación en Flash y la
nueva web móvil.

El principal obstáculo para su implantación siguen siendo los
viejos navegadores, especialmente los fabricados por Microsoft.

Aquí repasamos algunas opciones para animar tus proyectos
sin saber demasiado código. Son programas que ejecutan código CSS y el lenguaje
Javascript o su librería más extendida: jQuery.
I. DE FLASH A HTML5

Pros: Herramienta de Google para convertir documentos Flash
(swf) realizados con ActionScript 2 en contenido HTML5 no editable. Las
conversiones de ActionScript 3 (en funcionamiento desde 2006) se encuentran hoy
en fase experimental.
La conversión se realiza a través del navegador o cargando
una extensión el el programa Flash.
Cons: Así suena my bonito, pero las conversiones no siempre
son posibles.
Los documentos ‘SWF’ deben ser muy sencillos y pesar menos
de un mega.

Adobe Wallaby: fla
Otra herramienta para convertir documentos Flash  (fla) en HTML; en teoría el resultado es editable
y se ejecuta desde un programa instalado en el ordenador.
De momento, ambas herramientas son muy limitadas y están en
proceso de desarrollo.
Convierten pequeños y simples documentos, pero no una
aplicación.
La interactividad es muy difícil de convertir.
II. ANIMACIÓN EN  HTML5

Adobe Edge CC: Nueva versión el día 17


Crear contenido animado e interactivo para la web moderna.
El día 17 de junio sale la nueva versión: Animate CC.

Se
acabó el tiempo de prueba, empieza el partido y la hora de pagar un precio: 499dólares por licencia o 15 dólares de suscripción mensual, en la web de Adobe.

Pros: Una gran herramienta de animación, pensada por Adobe
para sustituir a Flash e integrarse perfectamente con proyectos HTML5. Su
corazón está escrito con jQuery. Es el futuro de la animación 2D.

Cons: No corre en navegadores antiguos. No hay parche. La
API de Animate no permite conversión a etiquetados antiguos.
Crear. Animar. HTML5.
Igualmente, pensado para tecnología HTML5, juega con su
propia API de Javascript.
Su última verión cuesta 60 dólares, en su web o en la Mac
AppStore.
Cons: Sólo para fieles del Mac y OX 10.6.6. No tienen
pensado sacar versión para Windows.
Pros: Compatible con IE6+ si se respetan algunas opciones.
Pros: Software en línea de Adobe Edge e Hype, con línea del
tiempo, escenas, fotogramas clave, efectos y posibilidad de programar con
javascript.
Corre en navegadores modernos, smartphones, iPhone, iPad y
Pcs.
Cons: No IE6+.
Precio: 120 euros.
Software para crear películas interactivas, juegos y
aplicaciones utilizando el motor de Javascript. La última versión acaba de
salir al mercado.
Pros: El nuevo paquete incluye versión para Windows y Mac OS
X. (antes sólo Windows). Según su web, funciona en el 99% de los navegadores
(IE6+) y en teléfonos inteligentes (smart phones).
La licencia cuesta 50 dólares a través de su web.

Animaciones móviles con CSS3.
Precio: 99 dólares.
Pros: Accesible en plataformas Windows, Mac OX y Linux.
Pensado para realizar pequeñas animaciones para móviles y
juegos simples interactivos.
Cons: sólo para navegadores modernos.
Herramienta para crear contenido y audio web en Flash o
HTML.
Pros: permite salida para HTML5 o para Flash y es compatible
con iBooks Author.
Versión para Mac y Windows.
Precio: 109 euros por licencia.
Contar historias visualmente.
Cons: Herramienta pensada para contenidos del iPad y el
iPhone, por tanto para plataformas nativas de iOS.
Están trabajando en una versión para Android.
19 dólares a través de la Mac App Store.

III. HERRAMIENTAS ONLINE
Página digital para crear y compartir dibujos realizados a
mano realizada con Javascript y el canvas de HTML5.
Cons: Herramienta online extremadamente básica.
Pros: Divertida.

Pros: Creatividad en la nube, sin necesidad de descargar
ningún programa.
Se trabaja desde el navegador y se guarda en la nube.
Los resultados se pueden exportar en formato javascript o
CSS a  tu sitio local.
Accesible tras rellenar un formulario.
Cons: Necesita un reproductor de javascript para renderizar
los trabajos.
Pensado especialmente para crear pequeñas publicidades para
navegadores HTML5 y dispositivos móviles. Se recomienda visualizar los trabajos
en Google Chrome.

Pros: sencillo software gratuito al que se accede a través
de navegador.
Cons: Herramientas muy limitadas, pensado para pequeños
trabajos, para navegadores que soporten tecnología HTML5. Recomiendan Firefox y
Chrome.
Como Mixeek, herramienta para trabajar en el navegador.
Pensada especialmente para animar tipografía y logos.
Herramienta para crear pequeñas publicidades, animar
tipografía o logos a través de tu navegador. Se exporta un archivo javascript y
necesita un reproductor que se guarda en la carpeta de tu sitio local o remoto.
Los trabajos se guardan en tu perfil de gmail.com.
Pros: Salida javascript aceptable en todos los navegadores,
incluido IE6. 
Cons: Pocas herramientas, limitaciones. Recuerda a la
primera versión de Flash.
Gratis.
IV. PASARON A OTRA VIDA

Software que reune las cararterísticas de los anteriores,
pero que ha dejado de desarrollarse.

Data Cracks!

Recojo aquí dos de los personajes más interesantes en la escena de la interacción y los datos.
Expertos en matemáticas, combinaciones, matrices, geometría, probabilidad, análisis numéricos, lenguaje de programación e interacción humana.
Ademas son creativos; la NASA de la visualización.

Santiago Ortiz ‘MOEBIO’

Matemáticas en la Universidad de Los Andes, Colombia.
Profesor de Arte y Tecnología en la European University de Madrid.
Visualizador, inventor de algoritmos.
Proyectos web interactivos de alta innovación.
Frameworks en Javascript/HTML5.
Fundador de Bestiario.

Moebio en Twitter.
Bestiario en Twitter.

MIKE BOSTOCK

Ciencias de la Computación, Princeton University, 2000.
Profesor en Stanford University, EEUU, Ciencias Computación.
Trabaja para TNYT desde San Francisco.
Data-Driven Documents.
Creador de librería de Javascript D3 para manipular datos en el DOM.

«D3 is a small, free JavaScript library for manipulating HTML documents based on data. D3 can help you quickly visualize your data as HTML or SVG, handle interactivity, and incorporate smooth transitions and staged animations into your pages. You can use D3 as a visualization framework (like Protovis), or you can use it to build dynamic pages (like jQuery).»

mbostock en Tumblr.

Workshop, (presentación).

mbostock en Twitter.

BOOKS: Geometría de la pasta, Jacob Kenedy

Gracias por visitar el sitio de Juantxo Cruz

THE GEOMETRY OF PASTA
Amazon.com
Jacob Kenedy (Author), Caz Hildebrand (Author)
Hardcover: 256 pages
Publisher: Boxtree (7 May 2010)
Language English
ISBN-10: 0752227378
ISBN-13: 978-0752227375
Product Dimensions: 22 x 16.2 x 3.8 cm

Gracias por visitar el sitio de Juantxo Cruz

Formas de la pasta.

Gracias por visitar el sitio de Juantxo Cruz

Animación

Diseño
Caz Hildebrand, Creative Partner at Here Design, has designed and created a new cook book, The Geometry of Pasta, with recipes by chef Jacob Kenedy, published by Boxtree/Macmillan.
www.geometryofpasta.co.uk

GRAPHICS: Next Media y la ley marcial

Gracias por visitar el sitio de Juantxo Cruz

Next Media.
Hong Kong, Taiwán
La compañía que preocupa al gobierno chino con sus gráficos animados, especialmente al gobierno de Taipei (Partido Nacionalista Chino, KMT).
El caso pinta muy mal.
Han topado con la dictadura china.
Puede ser cierto que sus gráficos sean exagerados, sensacionalistas, algunas veces recreados con poca base científica, que no protejan al menor o que muestren escenas sexuales. Pero el camino no es el cierre por decreto o el trato imparcial del gobierno. Como siempre, los que se sientan agredidos, que acudan a los tribunales y que allí se defiendan las partes. Aunque esto en China es una ilusión.

Gracias por visitar el sitio de Juantxo Cruz

Hau Lung-bin, alcalde de Taipei y azote de Next Media.

Gracias por visitar el sitio de Juantxo Cruz

Simon Lee, consejero delegado de asuntos multimedia del periódico Apple Daily
Simon Lee: «En realidad, la gente quiere ver cosas en lugar de leer».

Cronología de la polémica visual:

16 de noviembre: arranca el servicio de gráficos animados de Next Media.

20 noviembre: Next Media empieza a a tener problemas con la justicia, según Taiwan News.
Se enfrenta a una multa de entre 100.000 y 500.000 nuevos dólares de Taiwán (2.000-10.000 euros)y a una suspensión del negocio por un mes. Según el Ministro de Interior, estarían violando las leyes de protección del menor.

Next Media to be fined for violating child protection law.

26 de noviembre: ’20 grupos cívicos’, según China Post, comienzan una protesta frente al edificio de Apple Daily pidiendo que el diario se autorregule en la información visual sobre ataques sexuales y violencia doméstica.
El diario responde que no va a dejarse intimidar.

27 de noviembre: Segunda multa a Next Media, 10.000 euros.
El Ayuntamiento de Taipei prohibe a todos los colegios de la capital suscribirse a Apple Daily. El que quiera comprar el periódico debe demostrar que es mayor de 18 años, mostrando el DNI.

28 de noviembre: Editorial de Taipei News.
Denuncia la intrusión del gobierno de Taipei en el trabajo de Apple News.

An ‘Apple’ a day? Not for Mayor Hau

30 de noviembre: Reportaje en Global Post
Animated gore: It bleeds. And yes, it leads

4 de diciembre: La Información se hace eco de la noticia.
Sangre animada, la nueva era de la prensa en Hong Kong

9 de diciembre: The New York Times recoge los acontecimientos.

Animated News Clips Fuel Debate on Media Freedom

10 de diciembre: La ‘Comisión Nacional de Comunicaciones’ (NCC) rechaza las ofertas de Next Media para conseguir canales informativos de televisión (había solicitado tres canales), según China Daily.
Motivo: el uso de sus gráficos animados ‘sensacionalistas’ no respeta el principio de que las noticias deben reflejar datos reales.

Next Media loses TV bid thanks to animated ‘news’

14 de diciembre: nuevo editorial de China Post.
Don’t just blame cartoons for the evils of smoking.

Esta vez defiende un vídeo de Next Media en el que unos jóvenes aparecen fumando cigarrillos. Pone como ejemplos cómics y dibujos populares en Asia (Jimmy Kudo and Detective Conan, un investigador de 7 años que fuma, Japón) en los que aparecen jóvenes fumando y hasta ahora nadie se había molestado en denunciar. Incluso se pasan en las televisiones de EEUU.

15 de diciembre: Opinión en The Wall Street Journal
Tiger Woods and the Animation
L. Gordon Grovitz
Tiger Woods and the Animation.

MAGS: Popular Science, 3D

La portada de julio de la revista Popular Science (edición EEUU) ofrece una innovación interactiva en 3D. Aquí se puede ver un vídeo sobre el funcionamiento.

Gracias por visitar el sitio de Juantxo Cruz

Por lo visto, el lector debe poner la portada de la revista orientada hacia la cámara de su ordenador y entonces aparece el holograma en el monitor.
Ver aquí.

Gracias por visitar el sitio de Juantxo Cruz

General Electric es el proveedor de la tecnología para conseguir el holograma. La Sociedad Americana de Editores de Revistas (ASME) aconseja separar claramente la línea editorial de la comercial y publicitaria.

!Gracias por visitar mi sitio! | Copyright © 1992- 2024 juantxo_cruz. Todos los derechos reservados.