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’.

Orden de clasificación en tablas

Big Ten Conference Standings Board

Buscando soluciones gráficas para visualizar una clasificación de mayor a menor he encontrado esta tabla visual de USA Today Sports que resume y compara de forma contundente las diferentes conferencias de fútbol americano (Football Bowl Subdivision) según diferentes categorías en 2015.

Cómo se comportaron las conferencias con fútbol americano en 2015.
Cómo se comportaron las conferencias con fútbol americano en 2015.

The Power Rank ofrece otra manera visual de presentar la misma información. En el ejemplo que podemos ver un poco más abajo, se comparan las distintas conferencias según el promedio de clasificación de cada equipo.

Las mejores conferencias de fútbol universitario, 2013, The Power Rank.

La antropometría y el diseño ergonómico

The Measure of Man and Woman: Human Factors in Design, Henry Dreyfuss Associated

Las dimensiones de la figura humana han fascinado a filósofos, escritores, artistas, arquitectos o diseñadores desde los egipcios hasta nuestros días.

Marco Vitruvio Polión (siglo I a. C.), arquitecto de Julio César, publicó el tratado ‘De Architectura‘ en 10 libros que establece unas proporciones del hombre que luego interpretarían Leonardo da Vinci en el Renacimiento, John Gibson y J. Bonomi en el siglo XIX o Le Corbusier en el XX.

La figura humana de Vitruvio, interpretada por John Gibson y J. Bonomi. Londres, 1857.

Por un lado, la antropometría es la ciencia que estudia las dimensiones del cuerpo; es decir, las escalas y proporciones del ser humano (antropometría estática) y sus movimientos (antropometría funcional).

Por ejemplo, en 1883 el oficial de la policía francesa Alphonse Bertillon (1853-1914) expuso la nueva disciplina de la antropometría para identificar a los criminales gracias a la medición de las partes de su cuerpo humano, sus marcas individuales (cicatrices, tatuajes) y otras características personales.

Página del libro Identification anthrométrique (1893) de Alphonse Bertillon, editado en 1914.
Página del libro Identification anthrométrique (1893) de Alphonse Bertillon, editado en 1914.

Por otro lado, la ergonomía es la ciencia que estudia la adecuación de los productos, los sistemas y los entornos artificiales a las necesidades de los usuarios para optimizar su funcionalidad y eficacia. Según la Asociación Española de Ergonomía el objetivo es ‘adaptar el trabajo a las capacidades y posibilidades del ser humano’.

Aquí podemos ver algunos ejemplos de diagramas antropométricos y ergonómicos publicados en el manual de Henry Dreyfuss (1904-1972, diseñador industrial, EEUU) ‘The Measure of Man, Human Factors in Design’ publicado en 1960 (pdf y libro en Amazon).

En estas cartas, publicadas en la parte final de su trayectoria, Henry Dreyfuss explica las medidas humanas de su ‘Joe’ y ‘Josephine’ y establece una serie de referencias ergonómicas para que los diseñadores industriales tuviesen especificaciones precisas sobre el diseño de productos.

Sobre estas líneas vemos algunas imágenes del libro de ‘Human Dimension and Interior Space’ (Nueva York, 1979) de Julius Panero y Martin Zelnik, que establece unas normas de referencia para arquitectos y diseñadores de interiores.

En nuestros días, la antropometría y el diseño ergonómico son unas disciplinas fundamentales en los ámbitos de la accesibilidad, los riesgos laborales, la señalética, el diseño de equipos o la organización de espacios.

Referencias

• Identification Antropométrique, Alphonse Bertillon, 1883 (visor online en archive.org)

• Designing for People, Henry Dreyfuss, 1955 (Amazon)

• The Measure of Man, Henry Dreyfuss, 1960 (Amazon).

• The Symbols Sourcebook, A Comprehensive Guide to International Graphic Symbols, Henry Dreyfuss, 1972 (Amazon).

• Human Dimension & Interior Space: A Source Book of Design Reference Standards, Julius Panero, Martin Zelnik, 1979 (Amazon)

• Time-Saver Standards for Interior Design and Space Planning, McGraw-Hill. Joseph De Chiara, Julius Panero, Martin Zelnik, 2001 (Amazon).

La portada de Cahiers Du Cinéma y la Nueva Ola francesa

Cahiers Du Cinéma.

Cahiers Du Cinéma es una revista mensual francesa. Los cuadernos de cine fueron fundados en abril de 1951 por André Bazin, Jacques Doniol-Valcroze y Joseph-Marie Lo Duca y probablemente imprimieron las mejores páginas sobre películas del mundo.

Primer número de la revista, abril de 1951: William Holden and Gloria Swanson in Sunset Boulevard.
Primer número de la revista, abril de 1951: William Holden and Gloria Swanson in Sunset Boulevard.

Hacia la mitad de los años 50 la revista parisina contaba en su alineación editorial —el Comité de Redacción— con las firmas de Jean-Luc Godard, Eric Rohmer, Claude Chabrol, François Truffaut y Jacques Rivette. La Nouvelle Vague (New Cinéma, 1960-1968) al completo contra el realismo psicológico del momento.

Diciembre de 1958.
Diciembre de 1958.

En cuanto al diseño de la portada, una apuesta segura: Amarillo, blanco y negro. Un traje perfecto que hemos visto desde siempre en National Geographic Magazine y más recientemente en la nueva puesta de largo de Mailchimp. En números posteriores, la tinta amarilla fue sustituida por tintas verdes, marrones, moradas o naranjas y la fotografía en blanco y negro por la de color.

Agosto de 1962: National Geographic Magazine.
Agosto de 1962: National Geographic Magazine.

2018: Rebranding de Mailchimp.
2018: Rebranding de Mailchimp.

Julio de 1963: Eric Rohmer, Roberto Rossellini, Cannes, Fuller, Hawks, Ozu...
Julio de 1963: Eric Rohmer, Roberto Rossellini, Cannes, Fuller, Hawks, Ozu…

Febrero de 1967: Dorléac, Catherine Deneuve; back cover: Delphine Seyrig. David W. Griffith, Jean-Luc Godard, Témoignages sur le nouveau cinéma français, "Méditerranée", "Le chat dans le sac", "La voleuse", "Le manuscrit trouvé à Saragosse", Cul-de-sac", "La solution finale", "Arabesque"...
Febrero de 1967: Dorléac, Catherine Deneuve; back cover: Delphine Seyrig.
David W. Griffith, Jean-Luc Godard, Témoignages sur le nouveau cinéma français, «Méditerranée», «Le chat dans le sac», «La voleuse», «Le manuscrit trouvé à Saragosse», Cul-de-sac», «La solution finale», «Arabesque»…

Mayo de 1967: 'Le Conseil des Dix'. El diagrama clásico con la puntuación de las películas del mes.
Mayo de 1967: ‘Le Conseil des Dix’. El diagrama clásico con la puntuación de las películas del mes.

Marzo de 1967: ngmar Bergman, Claude Autant-Lara, Abraham Polonsky, "Le Père Noël a les yeux bleus", "La Grève", "La Collectionneuse", "La Comtesse de Hong-Kong", "Brigitte et Brigitte", "Le Horla", "It Happened Here", "Trans-Europ-Express", "Le Voyage fantastique"...
Marzo de 1967: ngmar Bergman, Claude Autant-Lara, Abraham Polonsky, «Le Père Noël a les yeux bleus», «La Grève», «La Collectionneuse», «La Comtesse de Hong-Kong», «Brigitte et Brigitte», «Le Horla», «It Happened Here», «Trans-Europ-Express», «Le Voyage fantastique»…

Diciembre de 1982: Antonioni y Spielberg.
Diciembre de 1982: Antonioni y Spielberg.

Diciembre de 1986: "Les sixième jour" de Youssef Chahine. "La légende de la forteresse de Souram" de Serguei Paradjanov. "La puritaine" de Jacques Doillon. Michel Piccoli. Leos Carax. Gérard Depardieu. Cinéma muet.
Diciembre de 1986: «Les sixième jour» de Youssef Chahine. «La légende de la forteresse de Souram» de Serguei Paradjanov. «La puritaine» de Jacques Doillon. Michel Piccoli. Leos Carax. Gérard Depardieu. Cinéma muet.

Noviembre de 2018: 'Écouter le cinéma '.
Noviembre de 2018: ‘Écouter le cinéma ‘.

• Galería en pinterest.

• Libro sobre el Nuevo Cine francés: Cahiers Du Cinéma: New Wave, New Cinema, Reevaluating Hollywood.
Paperbackshop UK Import
Jim Hillier, 1992

Número 10 en inglés y en formato PDF, mayo de 1967.

10 claves del rediseño de The Economist

Nueva mancheta, The Economist 2018

Este mes, The Economist (Reino Unido, 1843), una de las publicaciones semanales de asuntos de actualidad más reconocida del mundo, ha cambiado su aspecto en la versión impresa mirando expresamente hacia la salida digital de sus contenidos. El nuevo diseño ha sido dirigido por Stephen Petch hacia un aspecto más limpio y moderno: el último gran rediseño se realizó hace 17 de años (Erik Spiekermann y Penny Garrett, 2001).

Sección inaugural de detalles gráficos . The Economist, 20 de octubre de 2018..
Sección inaugural de detalles gráficos . The Economist, 20 de octubre de 2018..

1. Infografía y periodismo de datos
La revista presenta una nueva sección llamada «Detalles gráficos» que reemplaza la página de la sección existente de «Indicadores económicos y financieros». Detalles gráficos aporta a la edición impresa la pericia visual del equipo de periodismo de datos (The Economist Data Team).

2. Revisión de los estilos infográficos y cartográficos ​​para clarificar la información.
Phil Kenny, director de Gráficos de The Economist: «Con estos cambios de diseño y nuevas incorporaciones, nuestra edición impresa ahora coincide con la amplia gama de productos de The Economist: un diseño uniforme, limpio y moderno, que configura The Economist para los años 2020 y más allá».

3. Branding, somos branding.
Mejora de la consistencia de la marca en todos los productos: Cabecera de portada más grande, páginas más limpias e imágenes más atrevidas, adecuadas tanto para el quiosco de periódicos como para la pantalla móvil.

Tipografía Econ Sans.
Tipografía Econ Sans.

Tipografía Milo Serif
Tipografía Milo Serif

4. Tipografías optimizadas para web e impreso.
Nuevos tipos de letra optimizados para plataformas impresas y digitales, que ofrecen una mejor experiencia de lectur: Econ Sans (Dieter Hofrichter) y Milo serif (Mike Abbink).

Nuevo índice de contenidos, The Economist, 2018
Nuevo índice de contenidos, The Economist, 2018

5. Revisión de todas las secciones
Páginas de contenido completamente revisadas, diseñadas para que sean más claras y fáciles de navegar, incluido un panel expandido «En la portada» para señalar todas las portadas destacadas.

Ilustraciones sencillas e icónicas como punto de entrada en los contenidos.
Ilustraciones sencillas e icónicas como punto de entrada en los contenidos.

6. Renovación de la ilustración, marca de la casa.
Estilos de ilustración impactantes y audaces, aptos para la página impresa y la pantalla digital por igual.

Analistas, expertos, columnistas y editores, The Economist 2018
Analistas, expertos, columnistas y editores, The Economist 2018

7. Firmas y edición.
Periodistas en las principales ciudades de los cinco continentes (Washington DC, Tokio, Londres, Hong Kong, México City, Nueva York, Singapur, Nairobi, Amsterdam, Bruselas, París, Nueva Delhi, Seúl, Chicago…), corresponsales de ciencia, educación, negocios, finanzas, economía, política social, medio ambiente, cuerpo diplomático, exteriores, medios, banca, salud, innovación, productos digitales, tecnología, lengua, religión, mercados emergentes, periodistas de datos, analistas de datos, editores de datos, analistas políticos, expertos en consumo y puntos de venta, periodismo de guerra y de defensa, de cultura, de libros, de arte, expertos en China, en Oriente Medio, en Rusia, en el Brexit, en Trump.

Elementos de la noticia fácilmente adaptables en la web.
Elementos de la noticia fácilmente adaptables en la web.

8. Diseño digital y colaborativo
La web como canal de venta y suscripción. Los elementos del diseño son bloques de construcción listos para usar, creando un kit de herramientas que permite a los departamentos aplicar el diseño en todo los proyectos y continuar trabajando de forma independiente para dar vida al producto.

Rediseño de Economist.com, Stephen Petch , diseño y dirección de arte.
Rediseño de Economist.com, Stephen Petch, diseño y dirección de arte.


9. Fuerza en redes sociales

The Economist mantiene comunidades sociales sólidas en Facebook, Twitter, LinkedIn, Snapchat, LINE, Medium y otras redes sociales.

Nueva portada, The Economist 2018
Nueva portada, The Economist 2018

10. Marca y periodismo
En definitiva, el nuevo lenguaje del diseño de The Economist quiere reflejar la fuerza de la marca y el periodismo; una expresión visual reconocible al instante.

Plano de las marcas renombradas de España

Detalle del plano del Foro de Marcas Renombradas de España, 2018

Diagrama conceptual sobre las marcas renombradas de España.
Se incluye como desplegable en la Memoria de Actividades 2017.
Foro de Marcas
Dosis Font
2018

Diagrama conceptual de las marcas renombradas de España, 2018
Diagrama conceptual de las marcas renombradas de España, 2018

Portada del plano de marcas renombradas de España, 2018
Portada del plano de marcas renombradas de España, 2018

Exterior tríptico, Foro de Marcas, 2018
Exterior tríptico, Foro de Marcas, 2018

Interior tríptico, Foro de Marcas, 2018
Interior tríptico, Foro de Marcas, 2018

Formato tríptico 'C', 450x320 mm
Formato tríptico ‘C’, 450×320 mm

Herramientas para la visualización de la información sobre mapas

Herramientas de geoposicionamiento de información

Algunas referencias sobre programas y recursos para trasladar una base de datos o un fichero a un entorno espacial, generalmente mapas digitalizados.
(en construcción)

Kepler, análisis geoespacial.
Kepler, análisis geoespacial.

KEPLER
Kepler.gl es una poderosa herramienta de análisis geoespacial de código abierto para conjuntos de datos a gran escala.

Es una aplicación basada en web de alto rendimiento y agnóstica de datos para la exploración visual de conjuntos de datos de geolocalización a gran escala. Construido en la parte superior de deck.gl, kepler.gl puede representar millones de puntos que representan miles de viajes y realizar agregaciones espaciales sobre la marcha.

Kepler.gl usa el reductor ‘redux’ para almacenar y administrar las transiciones de estado. Este paquete consta de un reductor y los componentes de la interfaz de usuario para ‘renderizar’ y personalizar el mapa.

Ir a la introducción en github.

CartoDB, geolocalización de datos.
CartoDB, geolocalización de datos.

CARTODB
Geolocalización de grandes volúmenes de datos y combinación con visualizaciones. Integración con lenguajes de programación en D3js. Es una plataforma en plena expansión sobre google maps y está siendo incorporado por múltiples empresas para tomas de decisiones:
Quién lo utiliza: BBVA, Wall Street Journal, United Nations, Twitter, Mashable

MapBox, búsqueda de mapas, navegación y localización.
MapBox, búsqueda de mapas, navegación y localización.

MAPBOX
Proveedor de mapas online.
Mapbox es el creador, o un colaborador significativo, de algunas bibliotecas de mapeo de código abierto y aplicaciones, entre ellas la especificación MBTiles, la cartografía TileMill IDE, la biblioteca de Javascript de Leftlet, y el estilo de mapas y analizador sintáctico (parser) CartoCSS.

Quién lo utiliza: New York Times, NPR, ProPublica o el Washington Post, Foursquare, Evernote, Financial Times, The Weather Channel, Uber Tecnologies.

OpenStreetMap, mapas de código abierto.
OpenStreetMap, mapas de código abierto.

OPEN STREET MAP
OpenStreetMap (también conocido como OSM) es un proyecto colaborativo para crear mapas libres y editables. OpenStreetMap está creado por una gran comunidad de colaboradores que con sus contribuciones al mapa añaden y mantienen datos sobre caminos, senderos, cafeterías, estaciones de ferrocarril y muchas cosas más a lo largo de todo el mundo.

OpenStreetMap impulsa mediante geodatos a miles de sitios web, aplicaciones móviles y dispositivos de hardware.

Google Maps y su API de Javascript.
Google Maps y su API de Javascript.

GOOGLE MAPS
Herramienta para posicionar información, en formato GeoJSON O JSON, sobre capas en un mapa.
Usando la API de Javascript de Google Maps, se pueden insertar en un mapa marcadores, polilíneas, polígonos, etc.

Herramientas para diseño de prototipos

Herramientas para prototipos de diseño.

Aquí dejo algunas referencias sobre programas y recursos para hacer prototipos de diseño:
(en construcción)

Origami Studio
Origami Studio

ORIGAMI STUDIO
Una nueva herramienta para diseñar interfaces modernas, construida y utilizada por diseñadores en Facebook.
Crea prototipos con capas de Sketch y juega con máscaras, sistemas de partículas y cámaras en vivo.
Se puede copiar cualquier cosa de Sketch y pegar las capas nativas en Origami Studio.

Sketch, kit de herramientas de diseño digital.
Sketch, kit de herramientas de diseño digital.

SKETCH
Sketch es un conjunto de herramientas de diseño digital para transformas sus diseños en prototipos interactivos. Mediante símbolos de trabajo, podemos actualizar fácilmente los elementos de diseño diseño repetidos, desde iconos hasta avatares.
Para Mac, desde $99.

Balsamiq, wireframes con calidad de boceto.
Balsamiq, wireframes con calidad de boceto.

BALSAMIQ
Wireframes y prototipado rápido de la estructura de una web o aplicación (‘mockups’). Reproduce la experiencia de dibujar en una pizarra, pero usando una computadora.
Aplicación con versiones para trabajar en la web, en el escritorio o en Google Drive.

UXPin, plataforma de diseño UX.
UXPin, plataforma de diseño UX.

UXPin
Herramientas de diseño web y móvil, prototipos y colaboración en la nube para equipos de trabajo.
Aplicación online de pago desde 9 dólares al mes. A partir de ahí, la suscripción va subiendo según funcionalidades contratadas: Exportar PDF, HTML, PNG, mockups, integración con Sketch y Photoshop, integración con Google Fonts, acceso a la librería de diseño y a la documentación…

INVISION, plataforma de diseño colaborativo.
INVISION, plataforma de diseño colaborativo.

inVISION
Invision Studio: Herramienta en la nube para diseñar pantallas para web y móviles. Plantillas de diseño, prototipos, animaciones, comentarios instantáneos sobre los diseños de trabajo en progreso.
Aplicación con versiones para trabajar en la web, en el escritorio o en Google Drive.

InVision DSM (Design System Manager): Componentes de UX y librerías.
Integración con otras herramientas colaborativas como DropBox, Jira, Slack, Confluence, Teamwork, Trello, Basecamp, Microsoft Teams.

Subscripciones desde coste cero (1 prototipo) hasta 99 euros al mes (equipos de trabajo, sin límite).