Lo que sigue nos exigirá revisar algo de material y procesarlo para luego generar una interpretación con la que Francisca, Ana, Sebastián, Bárbara, Lindsay, Cristian, Bastián, Tamara y Caterina podrán presentar una primera idea de su infografía digital.

Video (33:30 - 41:05)

Preguntas…
  • ¿Será lo más adecuado pensar en un puro Instagram cuando la condición ideal para la lectura es un estado de enérgico reposo? (cf. Bringhurst, 2008, p.31)
  • En un puro Instagram: ¿Siempre vemos la gráfica de arriba y luego leemos el texto de abajo? Por favor, responda desde su experiencia y confirme con alguien como Ud.
  • Si es que siempre se leyera el texto de abajo en un puro Instagram: ¿Qué condiciones debería tener tal texto? La respuesta aún la podemos ir a buscar al año 1997: How Users Read on the Web
  • ¿Cuánto scroll se hace en un puro Instagram? La respuesta la podemos ir a buscar al año 2022: Infinite Scrolling: When to Use It, When to Avoid It

La primera aproximación a la redacción linear de un puro Instagram se llamaría, según el Dr. García, storyboard. Pero lo que presenta se parece mucho a lo que en diseño de estrategias y experiencias digitales se llama wireframe. Aparte, un storyboard va un poco más allá de marcar lo que va en cada lugar de una redacción

Wireframe

A wireframe is a skeletal depiction of what a product should look like. If that sounds simple, let’s not forget that a skeleton has an awful lot of bones. Like a skeleton, wireframes show you how the whole system hangs together to create a complete, interconnected structure that stands together as a whole (Buley, 2013, p.181)

Puede resolverse rápidamente a mano
Puede resolverse con herramientas digitales

Un buen wireframe muestra un esqueleto como idea bien definida (no necesariamente definitiva). El esqueleto que se muestra debe mantener al equipo de trabajo concentrado en la estructura, sin discutir sobre palabras aleatorias, colores ni estilos gráficos favoritos (cf. Equipo IDA, 2017)

¡Pero la decisión por una gráfica figurativa o no figurativa no es un asunto de estilo! Es una asunto de estructura. Convendría aprovechar los comentarios que siempre se agregan al wireframe para definir si acaso cada elemento visual será un tipo u otro de gráfica, recordando:

  • Para la imagen figurativa: que la misma imagen puede usarse como pictograma (un león macho en la puerta del toilette), como imagen general (un león de enciclopedia), o como imagen singular (¡este formidable ejemplar de león!) (Seel, 2010, p.253).
  • Para la gráfica no figurativa: que no es lo mismo mostrar comparaciones que relaciones, jerarquías, distribuciones, etc. (Ver ¿Qué desea mostrar? en Catálogo de Visualización de Datos)

Storyboard

El propósito de un storyboard consiste en explicar acciones con una serie de imágenes concisas. Para desarrollar un storyboard, los diseñadores tienen que planear el arco de una narración y decidir cómo resumir esa historia en un número limitado de fotogramas (Lupton, 2019, p.34)

La escena de la ducha en Psicosis (Hitchcock, 1960) fue desarrollada por Saul Bass.

Un buen storyboard es capaz de expresar una progresión que incluya principio, nudo y desenlace (Lupton, 2019, p.36)

Arco narrativo

En 1863, el dramaturgo y novelista alemán Gustav Freytag creó el concepto de arco narrativo. Dividió las obras dramáticas en cinco partes: exposición, acción ascendente, clímax, acción descendente y desenlace. El patrón de Freytag, con sus subidas y bajadas, suele visualizarse como una pirámide, cuya cúspide la constituye el punto de acción más alto (Lupton, 2019, p.22).

Tomado del libro El diseño como storytelling.

Ir de un punto álgido a otro bajo y volver a subir es lo que hace que una historia dé la satisfactoria sensación de estar completa. Los relatos complejos contienen historias dentro de otras historias (Lupton, 2019, p.24)

Vertebración

[Una] manera rápida y eficaz de construir un marco teórico consiste en desarrollar, en primer lugar, un índice tentativo de éste, global o general, e irlo afinando hasta que sea sumamente específico, luego, se coloca la información (referencias) en el lugar correspondiente dentro del esquema. A esta operación puede denominársele “vertebrar” el marco o perspectiva teórica (Hernández-Sampieri et al, 2014, p.78).

El proceso de “vertebrar” el marco teórico en un índice puede representarse con el siguiente esquema

Tomado del libro Metodología de la investigación (6ta. Edición).

De esta forma se podrán completar distintos apartados (temas y subtemas) con contenidos extraídos de las referencias pertinentes para cada uno de ellos, después de estructura una columna vertebral. Y con esta columna luego se puede pensar en un storyboard bien fundamentado, en el que conviene considerar un arco narrativo (dividido en exposición, acción ascendente, clímax, acción descendente y desenlace).

Tarea

Relacione vertebración, arco narrativo, storyboard y wireframe para graficar una idea bien definida (no necesariamente definitiva) de la reformulación de su infografía impresa.

Puede buscar inspiración en las infografías digitales de Reuters Graphics; prefiera aquellas infografías digitales donde el scroll sea mucho más relevante que algún efecto (que podría demorarnos mucho comprender y/o programar). Ejemplos para preferir: The origin of the Olympic Games, Democrats’ new optimism, How the renting bubble may be a key factor in the election.

Resultados

Gráfica aportada por Francisca Castillo
Gráfica aportada por Ana Cortés
Gráfica aportada por Sebastian Henriquez
Gráfica aportada por Barbara Iriarte
Gráfica aportada por Lindsay Osorio
Gráfica aportada por Cristian Paz
Gráfica aportada por Bastian Sirguiado
Gráfica aportada por Tamara Toledo
Gráfica aportada por Caterina Valenzuela